/* roulang page: index */
:root {
      --bg-base: #080B10;
      --bg-surface: #0F141C;
      --bg-card: #161D27;
      --border-glow: rgba(0, 242, 254, 0.15);
      --border-glow-hover: rgba(0, 242, 254, 0.45);
      --primary-cyan: #00F2FE;
      --primary-mint: #10B981;
      --accent-orange: #FF6B00;
    }
    body {
      background-color: var(--bg-base);
      color: #94A3B8;
      font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
      line-height: 1.65;
      overflow-x: hidden;
    }
    .hud-border {
      border: 1px solid var(--border-glow);
      backdrop-filter: blur(12px);
      border-radius: 6px;
      transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .hud-border:hover {
      border-color: var(--border-glow-hover);
      transform: translateY(-3px);
      box-shadow: 0 10px 25px -5px rgba(0, 242, 254, 0.1);
    }
    .hud-panel {
      background: rgba(22, 29, 39, 0.7);
      border: 1px solid rgba(0, 242, 254, 0.12);
      border-radius: 6px;
    }
    .glow-cyan-text {
      text-shadow: 0 0 12px rgba(0, 242, 254, 0.4);
    }
    .glow-mint-text {
      text-shadow: 0 0 12px rgba(16, 185, 129, 0.4);
    }
    .hud-scanline {
      background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.03), rgba(0, 255, 0, 0.01), rgba(0, 0, 255, 0.03));
      background-size: 100% 3px, 6px 100%;
    }