body{
            -webkit-font-smoothing: antialiased;
            touch-action: none;
        }
    #loading-overlay {
    position: fixed;
    inset: 0;
    background: #000000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    transition: opacity 1s ease; /* Slower fade out */
}

.reveal-container {
    display: flex;
    align-items: center;
    justify-content: center; 
    gap: 15px;
    width: 100%; 
    margin-bottom: 20px; 
}

/* Update the icon container to be the anchor for the animation */
.logo-icon-container {
    width: 100px;
    height: 100px;
    z-index: 2;
    /* Slower pop (0.8s) and longer wait (1.5s delay) before sliding */
    animation: 
        logo-pop 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.2) forwards,
        logo-slide 0.7s 1.8s cubic-bezier(0.77, 0, 0.175, 1) forwards;
}

.logo-icon-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Ensure the text wrapper starts exactly behind the logo */
.logo-text-wrapper {
    width: 0;
    overflow: hidden;
    display: flex;
    align-items: center;
    z-index: 1;
    margin-left: -20px;
    /* Starts exactly when the logo-slide begins (1.8s) */
    animation: reveal-text 0.8s 1.8s cubic-bezier(0.77, 0, 0.175, 1) forwards;
}

.logo-text {
    font-size: 3.5rem;
    font-weight: 800;
    color: #fff;
    white-space: nowrap;
    padding-left: 15px;
}

.logo-text span { color: #00ffcc; }

/* Sub-text styling */
.loader-text {
    margin-top: 40px;
    color: #444;
    font-size: 0.7rem;
    letter-spacing: 4px;
    text-transform: uppercase;
    opacity: 0;
    /* Appears after the text is fully revealed (2.6s) */
    animation: fade-in 0.8s 2.6s forwards;
}

.provider-info {
    margin-top: 10px;
    font-size: 10px;
    color: #333;
    opacity: 0;
    animation: fade-in 0.5s 2s forwards;
}

/* --- KEYFRAMES --- */

@keyframes logo-pop {
    0% { transform: scale(0) rotate(-10deg); opacity: 0; }
    100% { transform: scale(1) rotate(0deg); opacity: 1; }
}

@keyframes logo-slide {
    0% { transform: translateX(0); }
    100% { transform: translateX(-30px); }
}

@keyframes reveal-text {
    0% { width: 0; }
    100% { width: 450px; } /* Increased width for safety */
}

@keyframes fade-in {
    to { opacity: 1; }
}

/* Step 4: Full-Screen Beast Mode */
#game-frame {
    width: 100vw;
    height: 100vh;
    border: none;
    display: block;
}

.back-btn {
    position: fixed;
    top: 20px;
    left: 20px;
    z-index: 10000; /* Must be above the iframe */
    background: rgba(0, 255, 204, 0.2);
    color: #00ffcc;
    border: 1px solid #00ffcc;
    padding: 8px 15px;
    border-radius: 5px;
    text-decoration: none;
    font-weight: bold;
    font-size: 12px;
    backdrop-filter: blur(5px);
    transition: 0.3s;
}

.back-btn:hover {
    background: #00ffcc;
    color: #000;
}

@media (max-width: 480px) {
    .logo-text { font-size: 2rem; }
    .logo-icon-container { width: 60px; height: 60px; }
    @keyframes reveal-text {
        0% { width: 0; }
        100% { width: 200px; } /* Smaller width for mobile */
    }
}

#tap-to-start-btn {
    /* The Frosted Glass Magic */
    background: rgba(255, 59, 48, 0.2); 
    backdrop-filter: blur(12px); 
    -webkit-backdrop-filter: blur(12px); 
    
    /* Glass Edges */
    border: 1px solid rgba(255, 255, 255, 0.2); 
    border-top: 1px solid rgba(255, 255, 255, 0.5); 
    border-radius: 30px;
    
    /* Typography & Spacing */
    color: white;
    font-family: 'Segoe UI', sans-serif;
    font-size: 20px;
    font-weight: bold;
    letter-spacing: 1px;
    padding: 15px 40px;
    margin-top: 20px;
    cursor: pointer;
    z-index: 10;
    
    /* Text Shadow & Box Shadow for depth */
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    
    /* NEW: Setup for the Glint Animation */
    position: relative;
    overflow: hidden; /* This keeps the light beam inside the rounded borders */
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* Added a nice hover/press effect since we removed the pulsing */
#tap-to-start-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 10px 40px rgba(255, 59, 48, 0.4);
}

#tap-to-start-btn:active {
    transform: scale(0.95);
}

/* The Glint/Shine Light Beam */
#tap-to-start-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%; /* Start completely off-screen to the left */
    width: 60%; /* Width of the shine */
    height: 100%;
    
    /* The light gradient: clear -> semi-white -> clear */
    background: linear-gradient(
        120deg, 
        rgba(255,255,255, 0) 0%, 
        rgba(255,255,255, 0.4) 50%, 
        rgba(255,255,255, 0) 100%
    );
    transform: skewX(-25deg); /* Angles the light beam */
    
    /* Runs the animation. 3s total: fast sweep, then pauses */
    animation: glint-sweep 3s infinite; 
}

@keyframes glint-sweep {
    0% { left: -100%; }
    20% { left: 200%; } /* Sweeps across in the first 20% of the time */
    100% { left: 200%; } /* Pauses out of frame for the remaining 80% */
}