/* ===========================
   CSS 变量 + 全局重置 — 深色主题
=========================== */
:root {
  --primary: #00E68A;
  --primary-light: #33FFAA;
  --primary-dark: #00B36B;
  --primary-glow: rgba(0,230,138,0.20);
  --primary-soft: rgba(0,230,138,0.08);
  --gold: #FFD166;
  --gold-light: rgba(255,209,102,0.12);
  --gold-dark: #F5A623;
  --accent-red: #FF6B6B;
  --accent-red-soft: rgba(255,107,107,0.10);
  --accent-success: #22C55E;
  --accent-info: #60A5FA;
  --bg-page: #0B1426;
  --bg-card: rgba(255,255,255,0.05);
  --bg-card-hover: rgba(255,255,255,0.08);
  --bg-elevated: rgba(18,18,36,0.96);
  --bg-overlay: rgba(0,0,0,0.55);
  --text-main: #F0F4F8;
  --text-sub: rgba(255,255,255,0.72);
  --text-muted: rgba(255,255,255,0.50);
  --text-light: rgba(255,255,255,0.38);
  --border-color: rgba(255,255,255,0.08);
  --border-subtle: rgba(255,255,255,0.04);
  --card-shadow: 0 2px 12px rgba(0,0,0,0.20);
  --card-shadow-hover: 0 6px 24px rgba(0,0,0,0.30);
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --bubble-bg: rgba(255,255,255,0.05);
  --bubble-bg-solid: rgba(255,255,255,0.07);
  --bubble-border: 1px solid rgba(255,255,255,0.08);
  --bubble-blur: blur(20px) saturate(160%);
  --bubble-shadow: 0 4px 16px rgba(0,0,0,0.15), inset 0 1px 0 rgba(255,255,255,0.05);

  /* ========== z-index 语义化层级 ========== */
  --z-base: 0;
  --z-deco: 1;
  --z-content: 2;
  --z-sticky: 100;
  --z-bottom-nav: 200;
  --z-pagination: 250;
  --z-bet-modal: 650;
  --z-modal: 700;
  --z-card-selector: 750;
  --z-detail-page: 600;
  --z-toast: 9000;
  --z-loader: 9999;

  /* ========== 字体体系 ========== */
  --font-display: 'DIN Alternate', 'SF Pro Display', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
  --font-body: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
  --font-mono: 'SF Mono', 'Fira Code', 'Consolas', monospace;

  /* ========== 响应式字体大小体系 ========== */
  /* 基于 clamp() 实现 360px~480px 视口自适应缩放 */
  /* 公式: clamp(最小值, 首选值, 最大值) */
  /* 首选值使用 vw，确保字体随屏幕宽度线性缩放 */

  /* 超大标题 — 余额、金额等 */
  --fs-3xl: clamp(24px, 6.5vw, 32px);
  /* 大标题 — VIP等级、回执金额 */
  --fs-2xl: clamp(18px, 5.2vw, 24px);
  /* 标题 — 页面标题、充值金额 */
  --fs-xl: clamp(15px, 4.5vw, 18px);
  /* 副标题 — 余额、赔率、金额输入 */
  --fs-lg: clamp(13px, 4vw, 17px);
  /* 正文 — 按钮文字、统计数值、用户名 */
  --fs-md: clamp(11.5px, 3.5vw, 14px);
  /* 辅助 — 时间、标签、小文字 */
  --fs-sm: clamp(10px, 3vw, 12px);
  /* 极小 — 徽章、注释 */
  --fs-xs: clamp(8.5px, 2.6vw, 10px);
  /* 微型 — 9px 级别 */
  --fs-2xs: clamp(7.5px, 2.3vw, 9px);

  /* ========== 响应式图标尺寸体系 ========== */
  /* 图标尺寸同样基于 clamp() 实现 360px~480px 视口自适应 */
  /* 图标需要比同级文字稍大，才能视觉对齐 */

  /* 超大图标 — 成功页大图标、空状态大图标 (原 48~60px) */
  --icon-3xl: clamp(36px, 10vw, 48px);
  /* 大图标 — 品牌图标、receipt图标 (原 24~36px) */
  --icon-2xl: clamp(20px, 6vw, 28px);
  /* 标准大图标 — 导航图标、关闭按钮、操作按钮 (原 20~22px) */
  --icon-xl: clamp(16px, 5vw, 22px);
  /* 标准图标 — 输入框图标、返回箭头、菜单图标 (原 16~18px) */
  --icon-lg: clamp(14px, 4.2vw, 18px);
  /* 中图标 — 小按钮图标、箭头、眼睛 (原 14~16px) */
  --icon-md: clamp(12px, 3.6vw, 16px);
  /* 小图标 — 时间图标、辅助标记 (原 12~13px) */
  --icon-sm: clamp(10px, 3vw, 13px);
  /* 极小图标 — 微型箭头、状态点 (原 10~11px) */
  --icon-xs: clamp(9px, 2.7vw, 11px);

  /* ========== 白色透明度语义变量 ========== */
  --white-03: rgba(255,255,255,0.03);
  --white-04: rgba(255,255,255,0.04);
  --white-05: rgba(255,255,255,0.05);
  --white-06: rgba(255,255,255,0.06);
  --white-08: rgba(255,255,255,0.08);
  --white-10: rgba(255,255,255,0.10);
  --white-12: rgba(255,255,255,0.12);
  --white-15: rgba(255,255,255,0.15);
}

* { box-sizing: border-box; margin:0; padding:0; }

body {
  background: var(--bg-page);
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
  color: var(--text-main);
  min-height: 100vh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* 外部背景 — 深蓝黑纯色 + 顶部光晕 */
body::before {
  content: '';
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 380px;
  background: radial-gradient(ellipse at 50% 0%, rgba(0,230,138,0.06) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

/* 隐藏滚动条但保留滚动功能 */
* {
  -ms-overflow-style: none;
  scrollbar-width: none;
}
*::-webkit-scrollbar { display: none; }

/* 全局禁用文本选中 */
body, html, * {
  -webkit-user-select: none !important;
  -moz-user-select: none !important;
  -ms-user-select: none !important;
  user-select: none !important;
}

/* 全局键盘焦点样式 */
:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}
:focus:not(:focus-visible) {
  outline: none;
}

/* 无障碍：减少动效降级 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .modal-mask, .bet-modal-mask, .tab-page {
    transition-duration: 0.1s !important;
  }
}

/* ========== 小屏适配 (≤380px) ========== */
/* 缩小字体和图标的基础 clamp 范围，让 360px 以下手机显示更紧凑 */
@media (max-width: 380px) {
  :root {
    /* 字体 — 全面下调最小值和首选值 */
    --fs-3xl: clamp(20px, 6.2vw, 28px);
    --fs-2xl: clamp(16px, 5vw, 22px);
    --fs-xl:  clamp(14px, 4.2vw, 17px);
    --fs-lg:  clamp(12px, 3.8vw, 15px);
    --fs-md:  clamp(11px, 3.2vw, 13px);
    --fs-sm:  clamp(10px, 2.8vw, 12px);
    --fs-xs:  clamp(8px, 2.4vw, 10px);
    --fs-2xs: clamp(7px, 2.1vw, 9px);

    /* 图标 — 全面下调 */
    --icon-3xl: clamp(32px, 9vw, 44px);
    --icon-2xl: clamp(18px, 5.5vw, 26px);
    --icon-xl:  clamp(15px, 4.5vw, 20px);
    --icon-lg:  clamp(13px, 4vw, 17px);
    --icon-md:  clamp(11px, 3.5vw, 15px);
    --icon-sm:  clamp(10px, 3vw, 13px);
    --icon-xs: clamp(9px, 2.5vw, 11px);
  }
}