/* roulang page: index */
:root {
      --primary: #E64A19;
      --primary-dark: #BF360C;
      --metal-dark: #121416;
      --metal-card: #1A1D20;
      --metal-gray: #334155;
      --text-dark: #0F172A;
      --text-light: #F8FAFC;
    }
    body {
      color: #334155;
      background-color: #F8FAFC;
      -webkit-font-smoothing: antialiased;
    }
    .hud-border {
      position: relative;
    }
    .hud-border::after {
      content: '';
      position: absolute;
      bottom: 0;
      right: 0;
      width: 12px;
      height: 12px;
      border-bottom: 2px solid var(--primary);
      border-right: 2px solid var(--primary);
    }
    .bg-grid-pattern {
      background-size: 32px 32px;
      background-image: 
        linear-gradient(to right, rgba(255, 255, 255, 0.04) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
    }
    .dark-glow {
      box-shadow: 0 0 35px -5px rgba(230, 74, 25, 0.25);
    }
    .status-ping {
      box-shadow: 0 0 0 0 rgba(100, 221, 23, 0.7);
      animation: statusPulse 2s infinite cubic-bezier(0.66, 0, 0, 1);
    }
    @keyframes statusPulse {
      to {
        box-shadow: 0 0 0 8px rgba(100, 221, 23, 0);
      }
    }