/* ================================================================
   CSS变量 — 调色板（替代Tailwind配置）
   ================================================================ */
:root {
  --gold-400: #fbbf24;
  --gold-500: #f59e0b;
  --gold-600: #d97706;
  --cyan: #00e5ff;
  --blue: #2979ff;
  --pink: #ff1744;
  --accent-gold: #ffd740;
  --green: #4ade80;
  --bg-950: #04060a;
  --bg-900: #06080e;
  --bg-800: #0b0e18;
  --bg-700: #101424;
  --bg-600: #161b2e;
  --bg-500: #1c2240;
  --font-stack: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Helvetica Neue', STHeiti, 'Microsoft YaHei', sans-serif;
  --radius: 16px;
  --radius-sm: 8px;
}

/* ================================================================
   全局重置与基础样式（iOS 6/7兼容）
   ================================================================ */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html, body {
  margin: 0; padding: 0;
  width: 100%;
  overflow-x: hidden !important;
  position: relative;
}
html { scroll-behavior: smooth; -webkit-tap-highlight-color: transparent; }
body {
  background-color: #c8e8f8;
  background-image: url('../picture/background.png');
  background-size: cover;
  background-position: top center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  color: #0a2a4a;
  font-family: var(--font-stack);
  min-height: 100vh;
  min-height: 100dvh;
  padding-bottom: 16px;
  font-size: 14px;
  line-height: 1.5;
}

/* === 自定义滚动条 === */
::-webkit-scrollbar { width: 3px; }
::-webkit-scrollbar-track { background: #72b8e8; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.5); border-radius: 2px; }

/* ================================================================
   噪点纹理覆盖层
   ================================================================ */
.noise {
  position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  pointer-events: none !important;
  z-index: 9999;
  opacity: 0.015;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ================================================================
   页面外层容器
   ================================================================ */
.app-shell {
  max-width: 100%;
  width: 100%;
  margin: 0 auto;
  min-height: 100vh;
  min-height: 100dvh;
  position: relative;
  overflow: hidden;
  background: transparent;
}

/* side-borders removed — full-width layout */
.side-borders { display: none; }
.side-borders-inner { display: none; }

/* ================================================================
   顶部主横幅
   ================================================================ */
.hero-banner {
  width: 100%; position: relative;
  background: #a8d8f5;
  cursor: pointer; display: block;
  overflow: hidden;
}
.hero-img { width: 100%; height: auto; display: block; }

/* ================================================================
   支付方式横幅
   ================================================================ */
.pay-banner-wrap {
  margin: 10px 0 0;
  border-radius: 0;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.82);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-top: 1px solid rgba(255, 255, 255, 0.6);
  border-bottom: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.06);
  position: relative;
  z-index: 20;
}
.pay-banner-img {
  width: 100%;
  height: auto;
  display: block;
  padding: 6px 4px;
  box-sizing: border-box;
}
.ball-spin {
  position: absolute; top: 5%; left: 30%;
  width: 50px;
  animation: spin 4s linear infinite;
}
@media (min-width: 640px) { .ball-spin { width: 50px; } }
@keyframes spin { to { transform: rotate(360deg); } }


/* ================================================================
   中部推广轮播图
   ================================================================ */
/* ================================================================
   推广横幅（单图全宽）
   ================================================================ */
.single-banner {
  display: block;
  width: 100%;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.single-banner-img {
  width: 100%;
  height: auto;
  display: block;
}
/* ================================================================
   平台网格区域
   ================================================================ */
.platform-section {
  padding: 16px 20px 24px;
  position: relative;
  z-index: 20;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 680px;
  margin: -60px auto 0;
  border-radius: 20px 20px 0 0;
  background: rgba(210, 238, 255, 0.92);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(4px);
}

/* 背景光晕 */
.orb-glow {
  will-change: opacity, transform;
  position: absolute; top: 25%; left: 50%;
  transform: translateX(-50%);
  width: 450px; height: 450px;
  pointer-events: none !important; z-index: 0;
  background: radial-gradient(circle, rgba(100,180,255,0.15) 0%, rgba(50,150,230,0.06) 45%, transparent 70%);
  animation: orbPulse 6s ease-in-out infinite;
}
@keyframes orbPulse {
  0%, 100% { opacity: 0.5; transform: translateX(-50%) scale(1); }
  50% { opacity: 0.9; transform: translateX(-50%) scale(1.2); }
}

/* 悬浮粒子 */
.particles-wrap {
  position: absolute; top: 0; left: 0; right: 0; bottom: 0;
  overflow: hidden; pointer-events: none !important; z-index: 0;
}
.particle {
  will-change: opacity, transform;
  position: absolute; border-radius: 50%;
  pointer-events: none !important;
  animation: floatParticle var(--dur, 8s) var(--delay, 0s) ease-in-out infinite;
}
.p1 { width:3px;height:3px;background:rgba(255,255,255,0.7);left:10%;bottom:0;--dur:7s;--delay:0s; }
.p2 { width:4px;height:4px;background:rgba(255,255,255,0.6);left:30%;bottom:0;--dur:9s;--delay:1.5s; }
.p3 { width:3px;height:3px;background:rgba(200,230,255,0.7);left:50%;bottom:0;--dur:11s;--delay:0.8s; }
.p4 { width:4px;height:4px;background:rgba(255,255,255,0.5);left:65%;bottom:0;--dur:8s;--delay:2.5s; }
.p5 { width:3px;height:3px;background:rgba(200,235,255,0.8);left:80%;bottom:0;--dur:10s;--delay:1s; }
.p6 { width:3px;height:3px;background:rgba(255,255,255,0.6);left:92%;bottom:0;--dur:12s;--delay:3s; }
@keyframes floatParticle {
  0%, 100% { transform: translateY(0) translateX(0); opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { transform: translateY(-100vh) translateX(30px); opacity: 0; }
}

/* ================================================================
   Pill按钮 — 胶囊式白色按钮（兼容所有浏览器）
   ================================================================ */
.platform-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px 12px;
  width: 100%;
  margin: 0 auto;
  position: relative; z-index: 10;
}
.pill-btn {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  background: #ffffff;
  border-radius: 50px;
  padding: clamp(12px, 2.5vw, 24px) clamp(16px, 3.5vw, 36px) clamp(12px, 2.5vw, 24px) clamp(24px, 4.5vw, 44px);
  text-decoration: none;
  box-shadow: 0 4px 16px rgba(0,80,160,0.13), inset 0 -3px 0 rgba(0,0,0,0.05);
  cursor: pointer;
  -webkit-transition: -webkit-transform 0.1s;
  transition: transform 0.1s;
  -webkit-tap-highlight-color: transparent;
  border: 1.5px solid rgba(200,225,255,0.7);
  overflow: hidden;
  min-height: clamp(60px, 11vw, 100px);
  position: relative;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* === Option B: gradient nền theo loại nút === */
.pill-btn.pill-reg {
  background: -webkit-linear-gradient(135deg, #f4f9ff 0%, #dceeff 100%);
  background: linear-gradient(135deg, #f4f9ff 0%, #dceeff 100%);
  border-color: rgba(100,180,255,0.45);
}
.pill-btn.pill-promo {
  background: -webkit-linear-gradient(135deg, #fffbf0 0%, #ffecc8 100%);
  background: linear-gradient(135deg, #fffbf0 0%, #ffecc8 100%);
  border-color: rgba(240,150,0,0.35);
}
.pill-btn.pill-dl {
  background: -webkit-linear-gradient(135deg, #f0fff6 0%, #d0f5e4 100%);
  background: linear-gradient(135deg, #f0fff6 0%, #d0f5e4 100%);
  border-color: rgba(0,160,80,0.32);
}

/* === Option C: 左侧品牌色竖条 === */
.pill-btn::before {
  content: '';
  display: block;
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: clamp(5px, 0.8vw, 8px);
  border-radius: 50px 0 0 50px;
}
.pill-btn.pill-ob::before  { background: linear-gradient(180deg, #f97316, #fb923c); }
.pill-btn.pill-ks::before  { background: linear-gradient(180deg, #ff1744, #ff6d6d); }
.pill-btn.pill-sk::before  { background: linear-gradient(180deg, #7c4dff, #a78bfa); }
.pill-btn.pill-ky::before  { background: linear-gradient(180deg, #0078e0, #38bdf8); }
.pill-btn.pill-xk::before  { background: linear-gradient(180deg, #3730a3, #818cf8); }
.pill-btn.pill-ml::before  { background: linear-gradient(180deg, #e53935, #f87171); }
.pill-btn.pill-ab::before  { background: linear-gradient(180deg, #0097a7, #22d3ee); }
.pill-btn.pill-od::before  { background: linear-gradient(180deg, #00bcd4, #67e8f9); }
.pill-btn.pill-ly::before  { background: linear-gradient(180deg, #1976d2, #60a5fa);
}
.pill-btn:active {
  -webkit-transform: scale(0.95);
  transform: scale(0.95);
}
.pill-logo {
  width: clamp(38px, 8vw, 76px);
  height: clamp(38px, 8vw, 76px);
  min-width: 38px;
  -o-object-fit: contain;
  object-fit: contain;
  margin-right: clamp(10px, 2.2vw, 22px);
  -webkit-flex-shrink: 0;
  flex-shrink: 0;
}
.pill-text {
  will-change: opacity;
  font-size: clamp(13px, 2.8vw, 26px);
  font-weight: 800;
  white-space: nowrap;
  letter-spacing: 0.3px;
  font-family: var(--font-stack);
  display: inline-block; /* cần cho transform hoạt động trên inline */
  -webkit-animation: textBreathe 2.5s ease-in-out infinite;
  animation: textBreathe 2.5s ease-in-out infinite;
}

/* Glow màu theo từng loại nút */
.text-blue {
  color: #0078e0;
  text-shadow: 0 0 8px rgba(0,120,224,0.5), 0 0 16px rgba(0,120,224,0.2);
}
.text-orange {
  color: #e06000;
  text-shadow: 0 0 8px rgba(224,96,0,0.5), 0 0 16px rgba(224,96,0,0.2);
}
.text-green {
  color: #007a30;
  text-shadow: 0 0 8px rgba(0,122,48,0.5), 0 0 16px rgba(0,122,48,0.2);
}

/* Breathing: phóng to nhỏ + glow sáng dần */
@-webkit-keyframes textBreathe {
  0%, 100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 0.82;
  }
  50% {
    -webkit-transform: scale(1.08);
    transform: scale(1.08);
    opacity: 1;
  }
}
@keyframes textBreathe {
  0%, 100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 0.82;
  }
  50% {
    -webkit-transform: scale(1.08);
    transform: scale(1.08);
    opacity: 1;
  }
}
/* ================================================================
   游戏化角标徽章
   ================================================================ */
.badge {
  position: absolute; top: 8px; right: 8px; z-index: 52;
  font-size: 9px; font-weight: 800;
  padding: 2px 7px 2px 5px;
  border-radius: 6px; letter-spacing: 0.03em;
  line-height: 1.4; pointer-events: none; white-space: nowrap;
}
.badge-hot {
  background: linear-gradient(135deg, #ff1744, #ff6d00);
  color: #fff;
  box-shadow: 0 2px 10px rgba(255,23,68,0.33), 0 0 20px rgba(255,23,68,0.13);
  animation: badgePulse 2s ease-in-out infinite;
}
.badge-vip {
  background: linear-gradient(135deg, var(--accent-gold), #ff9100);
  color: #1a0e00;
  box-shadow: 0 2px 10px rgba(255,215,64,0.27), 0 0 20px rgba(255,215,64,0.13);
  animation: badgePulse 2.4s ease-in-out infinite;
}
.badge-new {
  background: linear-gradient(135deg, var(--cyan), var(--blue));
  color: #001828;
  box-shadow: 0 2px 10px rgba(0,229,255,0.27), 0 0 20px rgba(0,229,255,0.13);
  animation: badgePulse 2.2s ease-in-out infinite;
}
@keyframes badgePulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.85; transform: scale(1.05); }
}

/* ================================================================
   卡片入场交错动画
   ================================================================ */
.animate-stagger { animation: fadeSlideUp 0.5s ease-out both; }
.delay-1 { animation-delay: 0.03s; }
.delay-2 { animation-delay: 0.07s; }
.delay-3 { animation-delay: 0.11s; }
.delay-4 { animation-delay: 0.15s; }
.delay-5 { animation-delay: 0.19s; }
.delay-6 { animation-delay: 0.23s; }
.delay-7 { animation-delay: 0.27s; }
.delay-8 { animation-delay: 0.31s; }

@keyframes fadeSlideUp {
  from { opacity: 0; transform: translateY(24px) scale(0.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* ================================================================
   乐鱼下方图片横幅
   ================================================================ */
.extra-banner-wrap {
  grid-column: span 2;
  width: 100%;
  margin: 4px 0;
}
.extra-banner-link {
  display: block;
  width: 100%;
  cursor: pointer;
}
.extra-banner-img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 12px;
}

/* === 客服横幅 — 渐变边框 + 发光效果 === */
.extra-banner-kefu {
  will-change: box-shadow;
  padding: 3px;
  border-radius: 16px;
  background: linear-gradient(135deg,
    rgba(100,180,255,0.9) 0%,
    rgba(220,240,255,0.6) 35%,
    rgba(255,220,120,0.7) 65%,
    rgba(100,180,255,0.9) 100%);
  box-shadow:
    0 0 18px rgba(100,180,255,0.45),
    0 0 36px rgba(100,180,255,0.20),
    0 4px 20px rgba(0,80,160,0.18);
  animation: kefuGlow 3s ease-in-out infinite;
}
.extra-banner-kefu .extra-banner-link {
  border-radius: 13px;
  overflow: hidden;
  display: block;
}
.extra-banner-kefu .extra-banner-img {
  border-radius: 13px;
  display: block;
}

@keyframes kefuGlow {
  0%, 100% {
    box-shadow:
      0 0 18px rgba(100,180,255,0.45),
      0 0 36px rgba(100,180,255,0.20),
      0 4px 20px rgba(0,80,160,0.18);
  }
  50% {
    box-shadow:
      0 0 28px rgba(100,180,255,0.70),
      0 0 55px rgba(100,180,255,0.35),
      0 4px 24px rgba(0,80,160,0.25);
  }
}

/* ================================================================
/* ================================================================
   页脚
   ================================================================ */
.footer {
  border-top: 1px solid rgba(255,255,255,0.4);
  background: rgba(255,255,255,0.15);
  padding: 20px 16px 64px;
}
.footer-inner { text-align: center; }
.footer-logo { display: flex; align-items: center; justify-content: center; gap: 8px; margin-bottom: 10px; }
.footer-logo-icon {
  width: 20px; height: 20px; border-radius: 6px;
  background: linear-gradient(135deg, var(--gold-400), var(--gold-600));
  display: flex; align-items: center; justify-content: center;
  font-size: 7px; font-weight: 800; color: var(--bg-900);
  font-family: var(--font-stack);
}
.footer-logo-text { font-size: 11px; letter-spacing: 0.15em; color: rgba(255,255,255,0.25); font-family: var(--font-stack); }
.footer-links { display: flex; align-items: center; justify-content: center; gap: 16px; margin-bottom: 10px; }
.footer-links a { font-size: 10px; color: #1a5a90; text-decoration: none; transition: color 0.3s; font-family: var(--font-stack); }
.footer-links a:hover { color: #0a3060; }
.footer-dot { font-size: 8px; color: rgba(10,60,130,0.4); }
.footer-copy { font-size: 9px; color: #2a6090; font-family: var(--font-stack); }

/* ================================================================
   跑马灯轨道（顶部公告用）
   ================================================================ */
.marquee-track {
  display: flex; white-space: nowrap;
  animation: marquee 18s linear infinite;
}

@keyframes marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}