/* roulang page: index */
:root {
      --bg-base: #0A0E14;
      --bg-surface: #121824;
      --bg-card: #1A2332;
      --color-primary: #00E676;
      --color-accent: #FF3D00;
      --color-cyan: #00E5FF;
      --border-subtle: rgba(255, 255, 255, 0.08);
      --font-num: tabular-nums;
    }
    * {
      box-sizing: border-box;
      -webkit-tap-highlight-color: transparent;
    }
    body {
      background-color: var(--bg-base);
      color: #E2E8F0;
      font-family: system-ui, -apple-system, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
      overflow-x: hidden;
    }
    .num-digit {
      font-variant-numeric: tabular-nums;
      letter-spacing: -0.02em;
    }
    .glow-live {
      box-shadow: 0 0 15px rgba(0, 230, 118, 0.45);
    }
    .glow-hover:hover {
      box-shadow: 0 0 22px rgba(0, 230, 118, 0.25);
      border-color: rgba(0, 230, 118, 0.4);
    }
    .hero-mask {
      background: linear-gradient(180deg, rgba(10, 14, 20, 0.75) 0%, rgba(10, 14, 20, 0.95) 75%, #0A0E14 100%);
    }
    .glass-panel {
      background: rgba(18, 24, 36, 0.85);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      border: 1px solid var(--border-subtle);
    }
    /* Custom Scrollbar */
    ::-webkit-scrollbar {
      width: 6px;
      height: 6px;
    }
    ::-webkit-scrollbar-track {
      background: #0A0E14;
    }
    ::-webkit-scrollbar-thumb {
      background: #1E293B;
      border-radius: 9999px;
    }
    ::-webkit-scrollbar-thumb:hover {
      background: #00E676;
    }
    @keyframes pulseLive {
      0%, 100% { transform: scale(1); opacity: 1; }
      50% { transform: scale(1.3); opacity: 0.4; }
    }
    .ping-circle {
      animation: pulseLive 1.8s cubic-bezier(0, 0, 0.2, 1) infinite;
    }