/* Define Tactic Round font from local file */
        @font-face {
            font-family: 'Tactic Round';
            src: url('/fonts/tactic-round.otf') format('opentype');
            font-weight: 100 900;
            font-style: normal;
            font-display: swap;
            font-feature-settings: normal;
        }

        body {
            background-color: #0f212e;
            color: #ffffff;
        }

        /* Fix for Tactic Round font rendering issues with OTF files */
        * {
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }

        /* Specific fixes for Tactic Round font to prevent crooked text */
        [style*="Tactic Round"],
        .tactic-round {
            text-rendering: optimizeLegibility;
            transform: translateZ(0);
            -webkit-transform: translateZ(0);
            backface-visibility: hidden;
            -webkit-backface-visibility: hidden;
            perspective: 1000px;
            -webkit-perspective: 1000px;
            will-change: transform;
        }

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

        ::-webkit-scrollbar-track {
            background: #1a2332;
        }

        ::-webkit-scrollbar-thumb {
            background: #2a3441;
            border-radius: 4px;
        }

        ::-webkit-scrollbar-thumb:hover {
            background: #3B82F6;
        }

        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }

        #gumbo-root {
            animation: fadeIn 0.3s ease-in;
        }
    


        @font-face {
            font-family: 'Tactic Round';
            src: url('/fonts/tactic-round.otf') format('opentype');
            font-weight: 100 900;
            font-style: normal;
            font-display: swap;
        }

        /* Preload the font */
        body {
            font-family: 'Tactic Round', 'Poppins', Arial, sans-serif;
        }
    


                @keyframes fadeInDown {
                    from {
                        opacity: 0;
                        transform: translateY(-20px);
                    }
                    to {
                        opacity: 1;
                        transform: translateY(0);
                    }
                }
            


                body, html {
                    background-color: #0F212E !important;
                }

                /* Hide floating images on mobile devices */
                @media screen and (max-width: 768px) {
                    .floating-wheel,
                    .floating-wheel-right,
                    img[alt*="Wheel"],
                    img[alt*="Blue"],
                    img[alt*="Diamond2"],
                    img[alt*="Yellow"],
                    img[alt*="Rock"],
                    img[alt*="Rainstar"] {
                        display: none !important;
                        visibility: hidden !important;
                        opacity: 0 !important;
                    }
                }

                .leader-text-stake, .leader-text-raingg {
                    -webkit-background-clip: text !important;
                    -webkit-text-fill-color: transparent !important;
                    background-clip: text !important;
                    text-fill-color: transparent !important;
                    color: transparent !important;
                    display: inline-block;
                }
                @keyframes float-left-wheel {
                    0%, 100% {
                        transform: translateY(0px) rotate(105deg);
                    }
                    50% {
                        transform: translateY(-20px) rotate(120deg);
                    }
                }

                @keyframes float-right-wheel {
                    0%, 100% {
                        transform: translateY(0px) rotate(75deg);
                    }
                    50% {
                        transform: translateY(-20px) rotate(90deg);
                    }
                }

                @keyframes float-left-blue {
                    0%, 100% {
                        transform: translateY(0px) rotate(190deg);
                    }
                    50% {
                        transform: translateY(-20px) rotate(190deg);
                    }
                }

                @keyframes float-right-blue {
                    0%, 100% {
                        transform: translateY(0px) rotate(-50deg);
                    }
                    50% {
                        transform: translateY(-20px) rotate(-50deg);
                    }
                }

                @keyframes float-left-diamond {
                    0%, 100% {
                        transform: translateY(0px) rotate(15deg);
                    }
                    50% {
                        transform: translateY(-20px) rotate(30deg);
                    }
                }

                @keyframes float-right-diamond {
                    0%, 100% {
                        transform: translateY(0px) rotate(-20deg);
                    }
                    50% {
                        transform: translateY(-20px) rotate(-35deg);
                    }
                }

                @keyframes float-left-yellow {
                    0%, 100% {
                        transform: translateY(0px) rotate(-170deg);
                    }
                    50% {
                        transform: translateY(-20px) rotate(-170deg);
                    }
                }

                @keyframes float-right-yellow {
                    0%, 100% {
                        transform: translateY(0px) rotate(35deg);
                    }
                    50% {
                        transform: translateY(-20px) rotate(35deg);
                    }
                }

                @keyframes float-left-rock {
                    0%, 100% {
                        transform: translateY(0px) rotate(-20deg);
                    }
                    50% {
                        transform: translateY(-20px) rotate(0deg);
                    }
                }

                @keyframes float-right-rock {
                    0%, 100% {
                        transform: translateY(0px) rotate(-30deg);
                    }
                    50% {
                        transform: translateY(-20px) rotate(-50deg);
                    }
                }

                /* Parallax scrolling effect */
                .parallax-section {
                    will-change: transform;
                    transition: transform 0.1s ease-out;
                }