/* roulang page: index */
:root {
      --primary: #059669;
      --primary-glow: rgba(16, 185, 129, 0.25);
      --bg-pitch: #0b0f17;
      --card-pitch: #111827;
      --text-muted: #94a3b8;
    }
    .stadium-glow {
      background: radial-gradient(circle at 50% 0%, rgba(16, 185, 129, 0.18) 0%, rgba(11, 15, 23, 0) 70%);
    }
    .badge-live {
      display: inline-flex;
      align-items: center;
      gap: 0.375rem;
      padding: 0.25rem 0.75rem;
      border-radius: 9999px;
      font-size: 0.75rem;
      font-weight: 600;
      background-color: rgba(16, 185, 129, 0.12);
      color: #34d399;
      border: 1px solid rgba(16, 185, 129, 0.25);
    }
    .badge-live .pulse-dot {
      width: 0.5rem;
      height: 0.5rem;
      border-radius: 9999px;
      background-color: #10b981;
      position: relative;
    }
    .badge-live .pulse-dot::after {
      content: '';
      position: absolute;
      inset: -2px;
      border-radius: 9999px;
      background-color: #10b981;
      opacity: 0.75;
      animation: ping 1.5s cubic-bezier(0, 0, 0.2, 1) infinite;
    }
    @keyframes ping {
      75%, 100% {
        transform: scale(2);
        opacity: 0;
      }
    }
    .card-border {
      border: 1px solid rgba(255, 255, 255, 0.08);
      transition: all 0.3s ease;
    }
    .card-border:hover {
      border-color: rgba(16, 185, 129, 0.4);
      transform: translateY(-4px);
      box-shadow: 0 16px 32px -8px rgba(5, 150, 105, 0.2);
    }