.spa-progress-bar {
            position: fixed;
            top: 0;
            left: 0;
            height: 3px;
            /* Use green bet365 accent to avoid any yellow/orange flash */
            background: linear-gradient(90deg, #146c4b, #0f8a5d);
            width: 0%;
            opacity: 0;
            z-index: 99999;
            transition: width 350ms linear, opacity 200ms ease;
            pointer-events: none;
        }
        .spa-progress-bar.visible {
            opacity: 1;
        }

        /* Page fade during navigation (Bet365-like) */
        body.pt-out { opacity: .6; transition: opacity 200ms ease; }
        @media (prefers-reduced-motion: reduce){ body.pt-out { transition: none; } }

        /* ── SPA Page Transition Spinner ──
           Small centered spinner for AJAX navigation between casino/betting pages.
           Controlled by SPA_NAV_ENABLED env variable. */
        #spa-transition-spinner {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 54px;
            height: 54px;
            z-index: 99998;
            pointer-events: none;
            opacity: 0;
            transition: opacity 200ms ease;
        }
        #spa-transition-spinner.visible {
            opacity: 1;
        }
        /* White ring */
        #spa-transition-spinner .spinner-ring {
            position: absolute;
            inset: 0;
            border-radius: 50%;
            border: 3px solid rgba(255, 255, 255, 0.15);
            border-top-color: #fff;
            animation: spa-spin 0.8s linear infinite;
        }
        /* Inner rotating dot */
        #spa-transition-spinner .spinner-dot {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 8px;
            height: 8px;
            margin: -4px 0 0 -4px;
            background: #fff;
            border-radius: 50%;
            animation: spa-pulse 1s ease-in-out infinite;
        }
        @keyframes spa-spin {
            to { transform: rotate(360deg); }
        }
        @keyframes spa-pulse {
            0%, 100% { transform: scale(1); opacity: 1; }
            50% { transform: scale(0.6); opacity: 0.6; }
        }
        /* Respect reduced motion - show static indicator */
        @media (prefers-reduced-motion: reduce) {
            #spa-transition-spinner .spinner-ring {
                animation: none;
                border-color: rgba(255, 255, 255, 0.4);
                border-top-color: #fff;
            }
            #spa-transition-spinner .spinner-dot {
                animation: none;
                opacity: 0.8;
            }
            #spa-transition-spinner {
                transition: none;
            }
        }