@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;700;900&family=Orbitron:wght@700;900&family=Plus+Jakarta+Sans:wght@300;500;700;800&display=swap');

        :root {
            --primary: #2563eb;
            --accent: #4f46e5;
            --cursor-size: 20px;
            --cursor-hover-size: 60px;
        }

        body {
            font-family: 'Plus Jakarta Sans', sans-serif;
            background-color: #020617;
            color: #f8fafc;
            cursor: none;
            overflow-x: hidden;
        }

        @media (max-width: 1024px) {
            body {
                cursor: auto;
            }

            .custom-cursor,
            .custom-cursor-dot {
                display: none !important;
            }
        }

        :lang(ar) {
            font-family: 'Cairo', sans-serif;
        }

        .font-sport {
            font-family: 'Orbitron', sans-serif;
        }

        /* --- CUSTOM CURSOR --- */
        .custom-cursor {
            position: fixed;
            top: 0;
            left: 0;
            width: var(--cursor-size);
            height: var(--cursor-size);
            border: 1px solid rgba(255, 255, 255, 0.5);
            background: rgba(37, 99, 235, 0.2);
            border-radius: 50%;
            pointer-events: none;
            z-index: 9999;
            transform: translate(-50%, -50%);
            transition: width 0.3s, height 0.3s, background 0.3s;
            backdrop-filter: blur(2px);
            mix-blend-mode: screen;
        }

        .custom-cursor.hovered {
            width: var(--cursor-hover-size);
            height: var(--cursor-hover-size);
            background: rgba(37, 99, 235, 0.1);
            border-color: #2563eb;
            backdrop-filter: blur(0px);
        }

        .custom-cursor-dot {
            position: fixed;
            top: 0;
            left: 0;
            width: 6px;
            height: 6px;
            background: white;
            border-radius: 50%;
            pointer-events: none;
            z-index: 10000;
            transform: translate(-50%, -50%);
        }

        .glass-nav {
            background: rgba(2, 6, 23, 0.95);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            border-bottom: 1px solid rgba(255, 255, 255, 0.05);
        }

        .card-player {
            transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
            will-change: transform, box-shadow;
        }

        .card-player:hover {
            transform: translateY(-10px);
            box-shadow: 0 20px 40px -10px rgba(37, 99, 235, 0.3);
        }

        /* Loader Animation */
        @keyframes heartbeat {

            0%,
            100% {
                transform: scale(1);
                opacity: 1;
            }

            50% {
                transform: scale(1.1);
                opacity: 0.8;
            }
        }

        .animate-heartbeat {
            animation: heartbeat 1.5s infinite ease-in-out;
        }

        /* Marquee */
        .marquee-container {
            overflow: hidden;
            white-space: nowrap;
        }

        .marquee-content {
            display: inline-block;
            animation: marquee 20s linear infinite;
        }

        @keyframes marquee {
            0% {
                transform: translateX(0);
            }

            100% {
                transform: translateX(-50%);
            }
        }

        :lang(ar) .marquee-content {
            animation: marquee-rtl 20s linear infinite;
        }

        @keyframes marquee-rtl {
            0% {
                transform: translateX(-50%);
            }

            100% {
                transform: translateX(0);
            }
        }

        /* Table Styling */
        .table-row-hover:hover {
            background: rgba(255, 255, 255, 0.03);
        }

        .form-dot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            display: inline-block;
        }

        .form-w {
            background-color: #22c55e;
            box-shadow: 0 0 10px rgba(34, 197, 94, 0.4);
        }

        .form-d {
            background-color: #94a3b8;
        }

        .form-l {
            background-color: #ef4444;
        }

        ::-webkit-scrollbar {
            width: 8px;
        }

        ::-webkit-scrollbar-track {
            background: #020617;
        }

        ::-webkit-scrollbar-thumb {
            background: #2563eb;
            border-radius: 10px;
        }

        /* Responsive Improvements */
        @media (max-width: 768px) {
            .container {
                padding-left: 1rem;
                padding-right: 1rem;
            }

            section {
                padding-top: 3rem !important;
                padding-bottom: 3rem !important;
            }

            h1 {
                font-size: 2.5rem !important;
                line-height: 1.2 !important;
            }

            h2 {
                font-size: 2rem !important;
                line-height: 1.3 !important;
            }
        }

        @media (max-width: 640px) {
            .mobile-stack {
                flex-direction: column !important;
            }

            .mobile-center {
                text-align: center !important;
            }

            .mobile-full {
                width: 100% !important;
            }

            .mobile-p-4 {
                padding: 1rem !important;
            }

            .mobile-text-sm {
                font-size: 0.875rem !important;
            }

            .mobile-text-xs {
                font-size: 0.75rem !important;
            }
        }

        /* Touch device optimizations */
        @media (hover: none) and (pointer: coarse) {
            .card-player:hover {
                transform: none;
            }

            .interactable:active {
                transform: scale(0.98);
            }
        }