html { background-color: #0f172a; -webkit-tap-highlight-color: transparent; }
        body {
            background-color: #0f172a; color: #f8fafc;
            -webkit-user-select: none; user-select: none;
            display: flex; flex-direction: column;
            min-height: 100vh; overflow-x: hidden; overflow-y: auto; width: 100%;
        }
        input, select, textarea { -webkit-user-select: auto; user-select: auto; }
        input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
        input[type="number"] { -moz-appearance: textfield; }
        a, button, .item-box, .group { touch-action: manipulation; }

        .glass-panel {
            background: rgba(30, 41, 59, 0.95); border: 1px solid rgba(51, 65, 85, 0.8);
            box-shadow: 0 10px 40px -10px rgba(0, 0, 0, 0.3);
        }
        .glass-nav {
            background: #0f172a; border-bottom: 1px solid rgba(51, 65, 85, 0.6);
        }

        ::-webkit-scrollbar { width: 4px; height: 4px; }
        ::-webkit-scrollbar-track { background: transparent; }
        ::-webkit-scrollbar-thumb { background: #334155; border-radius: 10px; }
        ::-webkit-scrollbar-thumb:hover { background: #F59E0B; }
        .hide-scroll::-webkit-scrollbar { display: none; }
        .hide-scroll { -ms-overflow-style: none; scrollbar-width: none; }
        .snap-x-mandatory { scroll-snap-type: x mandatory; }
        .snap-center { scroll-snap-align: center; }

        .marquee-container { display: block; overflow: hidden; white-space: nowrap; width: 100%; }
        .marquee-content { display: inline-block; padding-left: 100%; animation: marqueeScroll 30s linear infinite; will-change: transform; backface-visibility: hidden; transform: translateZ(0); }
        @keyframes marqueeScroll { 0% { transform: translate3d(0, 0, 0); } 100% { transform: translate3d(-100%, 0, 0); } }

        .auto-scroll-box { display: block; width: 100%; overflow: hidden; white-space: nowrap; position: relative; }
        .auto-scroll-text { display: inline-block; padding-left: 100%; animation: autoScrollAnim 10s linear infinite; will-change: transform; backface-visibility: hidden; transform: translateZ(0); }
        @keyframes autoScrollAnim { 0% { transform: translate3d(0, 0, 0); } 100% { transform: translate3d(-100%, 0, 0); } }

        /* --- Custom Seamless Leaderboard Marquee Styles --- */
        .leaderboard-scroller { }
        .leaderboard-track { display: flex; width: max-content; animation: seamlessMarquee 150s linear infinite; will-change: transform; }
        .leaderboard-track:hover { animation-play-state: paused; }
        @keyframes seamlessMarquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }

        .shimmer-bg { position: relative; overflow: hidden; }
        .shimmer-bg::after {
            content: ''; position: absolute; top: 0; left: -150%; width: 50%; height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
            transform: skewX(-20deg); animation: shimmerSweep 2.5s infinite linear;
        }
        @keyframes shimmerSweep { 0% { left: -150%; } 100% { left: 250%; } }

        .shimmer-text {
            background: linear-gradient(110deg, #ffffff 0%, #ffffff 40%, #F59E0B 50%, #ffffff 60%, #ffffff 100%);
            background-size: 200% 100%; -webkit-background-clip: text; -webkit-text-fill-color: transparent;
            animation: textShimmer 3s infinite linear;
        }
        @keyframes textShimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

        .carousel-slide-item { transition: opacity 0.4s ease; opacity: 1; }
        .carousel-slide-item.is-active { opacity: 1; z-index: 10; }

        .item-box { background: #1e293b; border: 1px solid #334155; transition: all 0.2s ease; position: relative; cursor: pointer; overflow: hidden; }
        .item-box:active:not(.sold-out) { transform: scale(0.98); }
        .item-box.selected { border-color: #F59E0B; background: rgba(245, 158, 11, 0.1); box-shadow: 0 4px 20px rgba(245, 158, 11, 0.15); }
        .item-box.sold-out { cursor: not-allowed; }

        .input-field {
            background: #1e293b; border: 1px solid #334155; color: #ffffff; width: 100%;
            padding: 12px 16px; border-radius: 12px; font-size: 14px !important; font-weight: 600;
            transition: all 0.3s ease; outline: none;
        }
        .input-field::placeholder { color: #64748b; font-weight: 500; }
        .input-field:focus, .input-field.is-focused { border-color: #F59E0B; background: #0f172a; box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.15); }

        select.input-field {
            appearance: none; background-repeat: no-repeat; background-position: right 14px center; background-size: 16px; padding-right: 36px; cursor: pointer;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
        }
        select.input-field:focus { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23F59E0B' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='18 15 12 9 6 15'%3E%3C/polyline%3E%3C/svg%3E"); }
        select.input-field option { background: #1e293b; color: #ffffff; padding: 12px; }

        .btn-primary {
            background: linear-gradient(135deg, #F59E0B 0%, #D97706 100%); color: #0f172a; padding: 14px 24px; border-radius: 12px;
            font-weight: 800; font-size: 15px; transition: all 0.2s ease; box-shadow: 0 6px 20px -5px rgba(245, 158, 11, 0.4);
            display: inline-flex; justify-content: center; align-items: center; border: none; cursor: pointer; position: relative; overflow: hidden;
        }
        .btn-primary::after {
            content: ''; position: absolute; top: 0; left: -150%; width: 50%; height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
            transform: skewX(-20deg); animation: shimmerSweep 2.5s infinite linear;
        }
        .btn-primary:active:not(:disabled) { transform: scale(0.96); box-shadow: 0 2px 10px -5px rgba(245, 158, 11, 0.4); }
        .btn-primary:disabled { opacity: 0.6; cursor: not-allowed; transform: none; box-shadow: none; }

        @keyframes viewFadeIn {
            from { opacity: 0; transform: translateY(8px); }
            to { opacity: 1; transform: translateY(0); }
        }
        .view-section { display: none; opacity: 0; background-color: transparent; }
        .view-section.active-view { display: block; opacity: 1; animation: viewFadeIn 0.2s ease-out forwards; will-change: opacity, transform; }

        /* Hardware acceleration for modals */
        #login-sheet, #home-popup-content, #low-balance-content, #gc-confirm-content { will-change: transform, opacity; }

        .circle-progress { animation: rotate 1s linear infinite; }
        .circle-progress circle { stroke: currentColor; stroke-width: 5; stroke-dasharray: 1, 200; stroke-dashoffset: 0; animation: dash 1s ease-in-out infinite; stroke-linecap: round; fill: none; }
        @keyframes rotate { 100% { transform: rotate(360deg); } }
        @keyframes dash { 
            0% { stroke-dasharray: 1, 200; stroke-dashoffset: 0; } 
            50% { stroke-dasharray: 90, 200; stroke-dashoffset: -35px; } 
            100% { stroke-dasharray: 90, 200; stroke-dashoffset: -124px; } 
        }

        .fade-in-text { animation: softFadeIn 0.5s ease forwards; opacity: 0; }
        @keyframes softFadeIn { to { opacity: 1; } }
        
        .success-checkmark { width: 60px; height: 60px; border-radius: 50%; display: block; stroke-width: 3; stroke: #34d399; stroke-miterlimit: 10; box-shadow: inset 0px 0px 0px #34d399; animation: fill .4s ease-in-out .4s forwards, scale .3s ease-in-out .9s both; }
        .success-checkmark__circle { stroke-dasharray: 166; stroke-dashoffset: 166; stroke-width: 3; stroke-miterlimit: 10; stroke: #34d399; fill: none; animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards; }
        .success-checkmark__check { transform-origin: 50% 50%; stroke-dasharray: 48; stroke-dashoffset: 48; animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards; }
        
        .failed-checkmark { width: 60px; height: 60px; border-radius: 50%; display: block; stroke-width: 3; stroke: #ef4444; stroke-miterlimit: 10; box-shadow: inset 0px 0px 0px #ef4444; animation: fillRed .4s ease-in-out .4s forwards, scale .3s ease-in-out .9s both; }
        .failed-checkmark__circle { stroke-dasharray: 166; stroke-dashoffset: 166; stroke-width: 3; stroke-miterlimit: 10; stroke: #ef4444; fill: none; animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards; }
        .failed-checkmark__check { transform-origin: 50% 50%; stroke-dasharray: 48; stroke-dashoffset: 48; animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards; }
        
        @keyframes stroke { 100% { stroke-dashoffset: 0; } }
        @keyframes scale { 0%, 100% { transform: none; } 50% { transform: scale3d(1.1, 1.1, 1); } }
        @keyframes fill { 100% { box-shadow: inset 0px 0px 0px 30px rgba(52, 211, 153, 0.1); } }
        @keyframes fillRed { 100% { box-shadow: inset 0px 0px 0px 30px rgba(239, 68, 68, 0.1); } }