/* CSS VARIABLES */
        :root { --bg-color: #f3f4f6; --card-bg: #ffffff; --text-color: #111827; --text-secondary: #6b7280; --primary: #4f46e5; --primary-light: #6366f1; --primary-dark: #4338ca; --accent: #f59e0b; --success: #10b981; --danger: #ef4444; --border: #e5e7eb; --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); --radius: 16px; --sidebar-width: 320px; --nav-height: 60px; --tip-height: 30px; }
        [data-theme="dark"] { --bg-color: #111827; --card-bg: #1f2937; --text-color: #f9fafb; --text-secondary: #9ca3af; --primary: #6366f1; --primary-light: #818cf8; --primary-dark: #4f46e5; --accent: #fbbf24; --success: #34d399; --danger: #f87171; --border: #374151; }
        
        /* VISIBILITY HELPERS */
        .mobile-only { display: none !important; }
        
        /* LOGO STYLING */
        .logo { 
            display: flex; 
            align-items: center; 
            gap: 0.5rem; 
            font-size: 1.8rem; /* Emoji Size */
            cursor: pointer;
        }

        .logo-text {
            font-weight: 800;
            font-size: 1.5rem;
            /* Gold Gradient Text */
            background: linear-gradient(to right, #fbbf24, #d97706);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            /* Fallback */
            color: #fbbf24;
            letter-spacing: -1px;
        }
        .desktop-only { display: flex !important; }

        header { 
    background-color: #1e1b4b; color: white; 
    padding: 0 1.5rem; 
    box-shadow: var(--shadow); 
    /* Changed to Flex for Desktop */
    display: flex;
    align-items: center; 
    justify-content: space-between;
    gap: 1rem;
    z-index: 50; border-bottom: 1px solid var(--border); 
    flex-shrink: 0; height: 60px; 
}
/* Ensure Desktop Nav stays centered visually */
/* FORCE NAV TO CENTER (Order 1) */
.main-nav.desktop-only { 
    flex: 1; /* Takes up all available middle space */
    justify-content: center; 
    order: 1; /* Visually moves it AFTER the logo but BEFORE coins */
}

/* FORCE COINS TO RIGHT (Order 2) */
.currency-display { 
    order: 2; /* Visually moves it to the RIGHT side */
    
    /* Keep your existing styling below */
    background-color: rgba(255,255,255,0.1); padding: 0.3rem 0.8rem; 
    border-radius: 999px; font-weight: 800; color: #fbbf24; 
    border: 2px solid rgba(255,255,255,0.2); 
    display: flex; align-items: center; gap: 0.3rem; 
    min-width: 80px; justify-content: center; 
    font-family: monospace; font-size: 1rem; white-space: nowrap; 
}

/* FORCE CONTROLS TO FAR RIGHT (Order 3) */
.controls { 
    order: 3; /* Visually moves it to the very end */
    display: flex; gap: 0.5rem; align-items: center; 
    justify-self: end; 
}

        /* NAVIGATION (Center) */
        .main-nav.desktop-only { 
            display: flex; justify-content: center; 
            background: transparent; padding: 0; gap: 1rem; border: none;
            justify-self: center; /* Force Center */
        }

        .nav-item { 
            padding: 0.5rem 1rem; cursor: pointer; font-weight: 700; 
            color: rgba(255,255,255,0.6); 
            border-bottom: 3px solid transparent; 
            font-size: 1rem; border-radius: 8px; 
            display: flex; align-items: center; gap: 8px; transition: all 0.2s;
        }
        .nav-item:hover { background: rgba(255,255,255,0.1); color: white; }
        .nav-item.active { color: #fbbf24; border-bottom-color: #fbbf24; background: rgba(255,255,255,0.05); }

        /* TIPS BAR */
        #tips-bar {
            height: var(--tip-height);
            background: #111827; 
            color: #fbbf24;
            display: flex; align-items: center; justify-content: center;
            font-size: 0.85rem; font-weight: 600;
            overflow: hidden;
            border-bottom: 1px solid rgba(255,255,255,0.1);
            position: relative; z-index: 45;
            flex-shrink: 0;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
        }
        #tip-text { animation: fadeIn 0.5s ease; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 30px 0 10px; }

        /* MOBILE STYLES */
        #mobile-settings-btn { display: none; font-size: 1.2rem; padding: 0.4rem 0.6rem; background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.2); color: white; border-radius: 8px; cursor: pointer; }

      @media (max-width: 850px) {
            /* VISIBILITY HELPERS */
            .mobile-only { display: flex !important; }
            .desktop-only { display: none !important; }

            /* HEADER ADJUSTMENTS */
            /* Hide the text "Clicker.ee" so the logo is smaller */
            .logo span[data-i18n="gameTitle"] { display: none; } 
            
          /* MOBILE HEADER GRID */
/* --- MOBILE HEADER GRID SYSTEM --- */
    
header { 
    background-color: #1e1b4b; color: white; 
    padding: 0 0.5rem; /* Smaller padding for mobile */
    height: 60px; 
    position: sticky; top: 0; z-index: 50; 
    box-shadow: var(--shadow);
    border-bottom: 1px solid var(--border); 

    /* ENABLE GRID FOR PERFECT CENTERING */
    display: grid;
    grid-template-columns: 1fr auto 1fr; /* Left space | Center content | Right space */
    align-items: center;
    justify-content: normal; /* Reset flex property */
}

    /* 1. Logo stays on the Left */
    .logo { 
        grid-column: 1; 
        justify-self: start; 
    }

    /* 2. Coins forced to the exact Center */
    .currency-display { 
        grid-column: 2; 
        justify-self: center;
        width: auto; 
        margin: 0;
        min-width: auto;
        font-size: 0.95rem; /* Slightly smaller for mobile */
    }

    /* 3. Buttons forced to the Right */
    .controls { 
        grid-column: 3; 
        justify-self: end; 
        display: flex; 
        align-items: center; 
        gap: 6px; /* Tighter spacing for mobile */
        margin: 0;
    }
            
            #mobile-settings-btn { display: flex !important; align-items: center; justify-content: center; }

            /* BOTTOM NAVIGATION */
            .main-nav.mobile-only { 
                position: fixed; bottom: 0; left: 0; right: 0; 
                height: var(--nav-height); 
                background: var(--card-bg); 
                border-top: 1px solid var(--border); 
                border-bottom: none; 
                padding: 0; justify-content: space-around; 
                z-index: 100; 
                /* Removed box-shadow to delete the floating bar effect */
                box-shadow: none; 
            }
            .nav-item { 
                flex-direction: column; justify-content: center; 
                border-bottom: none; border-top: 3px solid transparent; 
                border-radius: 0; font-size: 0.7rem; padding: 0.2rem 0; flex: 1; gap: 2px; 
                color: var(--text-secondary); 
            }
            .nav-item.active { border-top-color: var(--primary); color: var(--primary); background: rgba(79, 70, 229, 0.05); }
            .nav-item:hover { background: transparent; color: var(--primary); }
            .nav-icon { font-size: 1.4rem; margin-bottom: -2px; }

            /* SCROLLING FIXES */
            
            /* 1. Allow body to scroll natively */
            body {
                height: auto !important;
                overflow-y: auto !important;
                position: relative;
            }

            /* 2. Main container expands and has padding at bottom */
            main { 
                height: auto !important;
                overflow: visible !important;
                display: block !important;
                padding-bottom: 150px !important; /* Push content above nav bar */
            }

            /* 3. Sections stack naturally without animation glitches */
            .view-section {
                height: auto !important;
                overflow: visible !important;
                display: none;
                opacity: 1; 
                transform: none; 
            }
            .view-section.active {
                display: block !important; 
            }

         /* 4. Fix Mining/Store scrolling & Layout */
            .mining-layout {
                display: flex !important;
                flex-direction: column;
                /* Forces children to fill the width */
                align-items: stretch !important; 
                gap: 2rem;
                height: auto !important;
                overflow: visible !important;
                width: 100% !important;
            }

            .clicker-zone {
                height: auto !important;
                overflow: visible !important;
                /* Restore padding so text isn't stuck to the edge */
                padding: 1.5rem !important; 
                /* Force full width */
                width: 100% !important;
                box-sizing: border-box !important;
                /* Center the card if screen is wide (tablets) */
                max-width: 600px !important;
                margin: 0 auto !important;
            }

            .shop-zone, .shop-container {
                height: auto !important;
                overflow: visible !important;
                width: 100% !important;
                /* Keep shop padding 0 as items have their own padding */
                padding: 0 !important;
            }

            /* 5. Fix Casino/Collections scrolling */
            .casino-wrapper, .collectable-grid, .leaderboard-table, .casino-grid {
                height: auto !important;
                overflow: visible !important;
                padding-bottom: 0 !important;
            }

            /* OVERLAP FIXES (Buttons moved up) */
            #save-status { 
                bottom: calc(var(--nav-height) + 10px) !important; 
                left: 10px !important; 
                right: auto !important; 
                z-index: 95;
            }

            .chat-toggle-btn { 
                display: none !important;
            }
        }


        /* SAVE STATUS */
        #save-status { 
            position: fixed; bottom: 30px; left: 30px; 
            font-size: 0.75rem; padding: 6px 12px; border-radius: 99px;
            pointer-events: none; transition: all 0.3s ease;
            display: flex; align-items: center; gap: 6px; font-weight: 800;
            box-shadow: 0 4px 10px rgba(0,0,0,0.2); z-index: 90;
            border: 1px solid rgba(255,255,255,0.1); background: var(--card-bg); color: var(--text-color);
        }
        #save-status.unsaved { background: var(--danger); color: white; border: none; }
        #save-status.saved { background: var(--success); color: white; border: none; }
        #save-status.syncing { background: var(--accent); color: #111827; border: none; }

        /* COLLECTABLES */
.collectable-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
            gap: 1rem;
            width: 100%;
            padding-bottom: 2rem;
        }
        .collectable-card { 
            background: #1f2937; /* Hardcoded dark color */
            color: white;        /* Hardcoded light text */
            border: 2px solid var(--border); 
            border-radius: 12px; 
            padding: 1rem 0.5rem; 
            display: flex; 
            flex-direction: column; 
            align-items: center; 
            text-align: center; 
            transition: transform 0.2s; 
            position: relative; 
            cursor: help; 
            box-shadow: 0 2px 5px rgba(0,0,0,0.05); 
        }
        .collectable-card:hover { transform: translateY(-3px); border-color: var(--primary); z-index: 5; box-shadow: var(--shadow); }
        
        .pixel-art-box { width: 64px; height: 64px; margin-bottom: 0.8rem; image-rendering: pixelated; display: flex; align-items: center; justify-content: center; font-size: 2.5rem; border-radius: 12px; transition: all 0.3s; }
        .pixel-art-box img { width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; }

        .c-locked { filter: grayscale(100%) brightness(0.6); opacity: 0.7; } 
        .c-locked .pixel-art-box { background: rgba(0,0,0,0.1); color: #6b7280; font-size: 1.5rem; }
        
        .c-unlocked { 
            border-color: var(--accent); 
            background: linear-gradient(to bottom right, #1f2937, rgba(245, 158, 11, 0.05)); 
        }
        .c-unlocked .pixel-art-box { background: transparent; filter: drop-shadow(0 4px 4px rgba(0,0,0,0.1)); }
        
        .c-name { 
            font-weight: 800; 
            font-size: 0.9rem; 
            margin-bottom: 4px; 
            color: white;
}
        .c-desc { 
            font-size: 0.7rem; 
            color: #9ca3af; 
            line-height: 1.2; 
        }

        /* MODALS */
        .modal-overlay { 
            position: fixed; top: 0; left: 0; right: 0; bottom: 0; 
            background: rgba(0,0,0,0.7); backdrop-filter: blur(5px); 
            display: none; justify-content: center; align-items: center; 
            z-index: 9999; animation: fadeIn 0.2s; 
        }
        .modal { 
            background: var(--card-bg); padding: 2.5rem; border-radius: 24px; 
            width: 90%; max-width: 420px; 
            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5); text-align: center; 
            transform: scale(0.95); animation: zoomIn 0.2s forwards; position: relative;
            max-height: 90vh; overflow-y: auto; /* Fix for spilling content */
        }
        
        /* General Styles */
        input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } input[type=number] { -moz-appearance: textfield; }
        * { box-sizing: border-box; }
       body { 
    font-family: 'Inter', system-ui, -apple-system, sans-serif; 
    background-color: var(--bg-color); 
    color: var(--text-color); 
    margin: 0; 
    padding: 0; 
    display: flex; 
    flex-direction: column; 
    height: 100vh; /* Fallback */
    height: 100dvh; /* Mobile browser fix */
    overflow: hidden; 
    user-select: none; 
}
        
        #guest-warning-bar { background-color: var(--accent); color: #111827; text-align: center; padding: 0.4rem; font-weight: 800; font-size: 0.9rem; cursor: pointer; display: none; box-shadow: 0 2px 4px rgba(0,0,0,0.1); z-index: 40; }
        main { flex: 1; position: relative; overflow-y: auto; padding: 1rem; max-width: 1200px; margin: 0 auto; width: 100%; display: flex; flex-direction: column; }
        main::-webkit-scrollbar { width: 6px; } main::-webkit-scrollbar-thumb { background-color: var(--border); border-radius: 10px; }
        .view-section { display: none; opacity: 0; transform: translateY(10px); height: 100%; flex-direction: column; }
        .view-section.active { display: flex; opacity: 1; transform: translateY(0); transition: opacity 0.3s ease, transform 0.3s ease; }
        
        button { font-family: inherit; }
        .btn { padding: 0.5rem 1rem; border-radius: 10px; border: 1px solid var(--border); background: var(--card-bg); color: var(--text-color); cursor: pointer; font-weight: 700; font-size: 0.9rem; display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; box-shadow: 0 2px 0 rgba(0,0,0,0.05); }
        .btn:hover { background: var(--bg-color); transform: translateY(-2px); box-shadow: 0 4px 6px rgba(0,0,0,0.1); } .btn:active { transform: translateY(0); box-shadow: none; }
        .btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none !important; box-shadow: none !important; }
        .btn-primary { background: linear-gradient(135deg, var(--primary), var(--primary-dark)); color: white; border: none; box-shadow: 0 3px 0 var(--primary-dark), 0 5px 10px rgba(79, 70, 229, 0.3); text-shadow: 0 1px 2px rgba(0,0,0,0.2); transition: all 0.15s ease; }
        .btn-primary:hover { transform: translateY(-2px); opacity: 1; } .btn-primary:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--primary-dark); } .btn-primary:disabled { background: var(--text-secondary); box-shadow: none; cursor: not-allowed; transform: none; opacity: 0.7; }
        .btn-action { width: 100%; padding: 0.8rem 1.5rem; border-radius: 12px; font-weight: 800; font-size: 1rem; }
        /* --- BUTTON FIXES --- */
        
        /* PC: Force Save & Profile to have exact same height */
        .header-btn {
            height: 42px; 
            min-width: 42px;
            display: inline-flex; 
            align-items: center; 
            justify-content: center;
            padding: 0 12px; /* Horizontal padding for PC */
        }

        /* MOBILE: Make Save, Profile, Chat exactly the same size (Square) */
        @media (max-width: 850px) {
            .controls .header-btn {
                width: 40px !important;  /* Forced Width */
                height: 40px !important; /* Forced Height */
                padding: 0 !important;   /* Remove padding so icon centers */
                font-size: 1.2rem !important; /* Uniform icon size */
                display: flex !important;
                justify-content: center;
                align-items: center;
            }
        }
        
        .btn-action.small { width: auto; font-size: 0.85rem; border-radius: 10px; padding: 0.4rem 0.8rem; } 
        .auth-input { width: 100%; padding: 0.8rem; border: 2px solid var(--border); border-radius: var(--radius); background: var(--bg-color); color: var(--text-color); font-size: 1rem; outline: none; font-weight: 600; } .auth-input:focus { border-color: var(--primary); box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.1); }
        .bet-input { padding: 0.4rem 0.8rem; border-radius: 10px; border: 1px solid var(--border); background: var(--bg-color); color: var(--text-color); font-size: 0.85rem; font-weight: 700; outline: none; text-align: center; width: 90px; box-shadow: 0 2px 0 rgba(0,0,0,0.05); transition: all 0.2s; } .bet-input:focus { border-color: var(--primary); }
        
        .mining-layout { display: grid; grid-template-columns: 320px 1fr; gap: 1.5rem; align-items: start; height: 100%; } @media(max-width: 850px) { .mining-layout { grid-template-columns: 1fr; overflow-y: auto; display: block;} }
        .clicker-zone { text-align: center; display: flex; flex-direction: column; align-items: center; padding: 2rem; background: var(--card-bg); border-radius: 20px; border: 1px solid var(--border); box-shadow: var(--shadow-lg); position: relative; height: fit-content; }
        #main-btn { -webkit-tap-highlight-color: transparent; width: 160px; height: 160px; border-radius: 50%; background: radial-gradient(circle at 30% 30%, var(--accent), #d97706); border: none; box-shadow: 0 8px 20px rgba(245, 158, 11, 0.3), inset 0 5px 10px rgba(255,255,255,0.4); cursor: pointer; transition: transform 0.05s ease-out; position: relative; outline: none; display: flex; flex-direction: column; align-items: center; justify-content: center; margin-bottom: 1.5rem; z-index: 10; }
        #main-btn:active { transform: scale(0.92); box-shadow: 0 4px 10px rgba(245, 158, 11, 0.2); } #main-btn span { font-size: 4rem; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2)); }
        #main-btn.overheated { background: radial-gradient(circle at 30% 30%, #ef4444, #991b1b); cursor: not-allowed; animation: shake 0.5s infinite; }
        @keyframes shake { 0% { transform: translate(1px, 1px) rotate(0deg); } 10% { transform: translate(-1px, -2px) rotate(-1deg); } 20% { transform: translate(-3px, 0px) rotate(1deg); } 30% { transform: translate(3px, 2px) rotate(0deg); } 40% { transform: translate(1px, -1px) rotate(1deg); } 50% { transform: translate(-1px, 2px) rotate(-1deg); } 60% { transform: translate(-3px, 1px) rotate(0deg); } 70% { transform: translate(3px, 1px) rotate(-1deg); } 80% { transform: translate(-1px, -1px) rotate(1deg); } 90% { transform: translate(1px, 2px) rotate(0deg); } 100% { transform: translate(1px, -2px) rotate(-1deg); } }
        .heat-container { width: 80%; height: 10px; background: var(--bg-color); border-radius: 10px; overflow: hidden; margin-bottom: 0.5rem; border: 1px solid var(--border); box-shadow: inset 0 2px 4px rgba(0,0,0,0.1); } .heat-bar { height: 100%; width: 0%; background: linear-gradient(90deg, #f59e0b, #ef4444); transition: width 0.2s linear; } .heat-text { font-size: 0.85rem; color: var(--text-secondary); margin-bottom: 1rem; font-weight: 700; height: 1.2em; }
        .stats-display { font-size: 0.95rem; font-weight: 600; color: var(--text-secondary); background: var(--bg-color); padding: 0.6rem 1.2rem; border-radius: 16px; width: 100%; border: 1px solid var(--border); }
        .shop-zone { overflow-y: auto; height: 100%; padding-right: 5px; } .shop-zone::-webkit-scrollbar { width: 6px; } .shop-zone::-webkit-scrollbar-thumb { background-color: var(--border); border-radius: 10px; }
        .shop-container { display: flex; flex-direction: column; gap: 0.8rem; } .shop-item { display: flex; justify-content: space-between; align-items: center; padding: 1rem; border: 1px solid var(--border); border-radius: var(--radius); background-color: var(--card-bg); transition: all 0.2s; box-shadow: 0 2px 4px rgba(0,0,0,0.02); } .shop-item:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: var(--primary); }
        #goblin { position: fixed; font-size: 6rem; cursor: pointer; z-index: 1000; animation: bounce 0.6s infinite alternate cubic-bezier(0.5, 0.05, 1, 0.5); filter: drop-shadow(0 10px 10px rgba(0,0,0,0.3)); display: none; } @keyframes bounce { from { transform: translateY(0) scaleY(1); } to { transform: translateY(-20px) scaleY(1.1); } }
        #taxman { position: fixed; font-size: 6rem; cursor: pointer; z-index: 1001; animation: pulseRed 0.5s infinite alternate; filter: drop-shadow(0 0 15px rgba(220, 38, 38, 0.8)); display: none; } @keyframes pulseRed { from { transform: scale(1); } to { transform: scale(1.1); } }
        #golden-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(45deg, #ffd700, #ffecb3, #ffd700); background-size: 400% 400%; animation: goldShimmer 3s ease infinite; z-index: -1; opacity: 0; transition: opacity 0.5s; pointer-events: none; } #golden-overlay.active { opacity: 1; }
        
        .casino-wrapper { width: 100%; height: 100%; overflow-y: auto; display: flex; flex-direction: column; align-items: center; } .casino-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; width: 100%; max-width: 1000px; padding-bottom: 2rem; }
        .game-card { background: var(--card-bg); border-radius: 16px; padding: 1.5rem 1rem; border: 1px solid var(--border); text-align: center; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 0.8rem; transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); position: relative; overflow: hidden; } .game-card:hover { transform: translateY(-5px); border-color: var(--primary); box-shadow: var(--shadow-lg); } .game-card::before { content: ''; position: absolute; top:0; left:0; width:100%; height:4px; background: var(--primary); opacity:0; transition: opacity 0.3s; } .game-card:hover::before { opacity: 1; }
        .game-icon { font-size: 2.5rem; filter: drop-shadow(0 4px 6px rgba(0,0,0,0.1)); } .game-card h3 { margin: 0; font-size: 1.1rem; }
        .game-container { display: none; flex-direction: column; align-items: center; justify-content: center; background: var(--card-bg); border-radius: 20px; border: 1px solid var(--border); padding: 1.5rem; animation: slideIn 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); box-shadow: var(--shadow-lg); width: 100%; max-width: 600px; margin: auto; min-height: 400px; position: relative; } .game-container.active { display: flex; }
        .bet-controls { display: flex; gap: 0.5rem; margin: 1.5rem 0; width: 100%; max-width: 300px; } .back-btn-container { width: 100%; display: flex; justify-content: flex-start; margin-bottom: 0.5rem; }
        .btn-absolute-back { position: absolute; top: 15px; left: 15px; z-index: 50; width: 40px; height: 40px; padding: 0; border-radius: 50%; background: rgba(0,0,0,0.05); border: 1px solid var(--border); font-size: 1.2rem; color: var(--text-color); } .btn-absolute-back:hover { background: var(--bg-color); transform: scale(1.1); }
        .bj-table { background: #2e7d32; background-image: radial-gradient(#388e3c 1px, transparent 1px); background-size: 20px 20px; border-radius: 100px; padding: 1.5rem; width: 100%; margin-bottom: 0.5rem; border: 8px solid #3e2723; position: relative; box-shadow: inset 0 0 50px rgba(0,0,0,0.5); }
        .bj-cards { display: flex; gap: 10px; justify-content: center; min-height: 90px; margin: 5px 0; } .bj-card { width: 50px; height: 75px; background: white; border-radius: 6px; display: flex; align-items: center; justify-content: center; font-size: 1.3rem; font-weight: bold; box-shadow: 2px 4px 6px rgba(0,0,0,0.3); border: 1px solid #ccc; user-select: none; position: relative; } .bj-card.red { color: #d32f2f; } .bj-card.black { color: #212121; } .bj-card.hidden { background: #b71c1c; background-image: repeating-linear-gradient(45deg, #b71c1c 0, #b71c1c 10px, #c62828 10px, #c62828 20px); border: 2px solid white; color: transparent; }
        .bj-info { color: white; text-shadow: 0 1px 2px rgba(0,0,0,0.5); margin-bottom: 0.2rem; font-weight: bold; font-size: 0.9rem; } .bj-controls { display: flex; gap: 0.5rem; width: 100%; justify-content: center; }
        .roulette-choice { padding: 0.6rem 1rem; font-weight: bold; color: white; border-radius: 10px; border: 3px solid transparent; transition: all 0.2s; opacity: 0.7; font-size: 0.9rem; } .roulette-choice:hover { opacity: 1; transform: scale(1.05); } .roulette-choice.active { opacity: 1; transform: scale(1.1); border-color: #fbbf24; box-shadow: 0 0 15px rgba(251, 191, 36, 0.5); }
        .rps-btn { font-size: 3rem; cursor: pointer; background: transparent; border: none; transition: transform 0.2s; padding: 0 10px; } .rps-btn:hover { transform: scale(1.2); } 
        .dice-display { font-size: 4rem; margin: 1rem 0; font-weight: bold; display: flex; gap: 2rem; justify-content: center; } .dice-box { display: flex; flex-direction: column; align-items: center; } .dice-box small { font-size: 0.8rem; color: var(--text-secondary); font-weight: normal; }
        .thimbles-area { display: flex; justify-content: center; gap: 1rem; margin: 1.5rem 0; height: 100px; align-items: flex-end; perspective: 1000px; width: 100%; } .thimble-container { position: relative; width: 70px; height: 80px; cursor: pointer; transition: transform 0.2s; } .thimble-container:hover { transform: translateY(-5px); } .thimble { width: 100%; height: 100%; background: radial-gradient(circle at 30% 30%, #ef4444, #991b1b); border-radius: 10px 10px 4px 4px; position: relative; z-index: 10; box-shadow: inset -5px -5px 10px rgba(0,0,0,0.3), 0 5px 10px rgba(0,0,0,0.2); transition: transform 0.3s ease; } .thimble::before { content: ''; position: absolute; bottom: 0; left: -5%; width: 110%; height: 8px; background: #7f1d1d; border-radius: 4px; } .ball { width: 25px; height: 25px; background: radial-gradient(circle at 30% 30%, #fbbf24, #d97706); border-radius: 50%; position: absolute; bottom: 5px; left: 50%; transform: translateX(-50%); z-index: 1; display: none; box-shadow: 0 2px 4px rgba(0,0,0,0.3); } .thimble.lifted { transform: translateY(-45px); }
        .shuffling .thimble-container { transition: all 0.4s ease-in-out; } .shuffling #cup-0 { animation: shuffleLeft 0.8s ease-in-out infinite; } .shuffling #cup-1 { animation: shuffleCenter 0.8s ease-in-out infinite; } .shuffling #cup-2 { animation: shuffleRight 0.8s ease-in-out infinite; }
        @keyframes shuffleLeft { 0% { transform: translateX(0); z-index: 1; } 25% { transform: translateX(80px) scale(0.9); z-index: 5; } 50% { transform: translateX(0); z-index: 1; } 75% { transform: translateX(100px) scale(1.1); z-index: 20; } 100% { transform: translateX(0); z-index: 1; } } @keyframes shuffleCenter { 0% { transform: translateX(0); z-index: 10; } 25% { transform: scale(1.1); z-index: 20; } 50% { transform: translateX(0); z-index: 10; } 75% { transform: scale(0.9); z-index: 1; } 100% { transform: translateX(0); z-index: 10; } } @keyframes shuffleRight { 0% { transform: translateX(0); z-index: 1; } 25% { transform: translateX(-80px) scale(0.9); z-index: 5; } 50% { transform: translateX(0); z-index: 1; } 75% { transform: translateX(-80px) scale(1.1); z-index: 20; } 100% { transform: translateX(0); z-index: 1; } }
        .crash-graph { width: 100%; height: 200px; background: linear-gradient(to bottom, var(--bg-color), var(--card-bg)); border-radius: var(--radius); border: 2px solid var(--border); position: relative; overflow: hidden; display: flex; align-items: flex-end; justify-content: center; margin-bottom: 1rem; } .rocket-obj { font-size: 3.5rem; position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); transition: bottom 0.1s linear; filter: drop-shadow(0 4px 4px rgba(0,0,0,0.2)); } .crash-value { font-size: 4rem; font-weight: 900; color: var(--text-color); position: absolute; top: 40%; left: 50%; transform: translate(-50%, -50%); z-index: 10; text-shadow: 0 4px 10px rgba(0,0,0,0.1); } .crash-value.crashed { color: var(--danger); }
        .coin-box { width: 120px; height: 120px; position: relative; transform-style: preserve-3d; margin: 1rem; } .coin-side { position: absolute; width: 100%; height: 100%; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 2.5rem; font-weight: 900; border: 6px solid #b45309; backface-visibility: hidden; background: radial-gradient(circle at 30% 30%, #fbbf24, #d97706); color: #78350f; box-shadow: inset 0 0 20px rgba(0,0,0,0.2); text-shadow: 0 1px 2px rgba(255,255,255,0.4); } .tails { background: radial-gradient(circle at 30% 30%, #e5e7eb, #9ca3af); color: #374151; transform: rotateY(180deg); border-color: #6b7280; }
        .slot-row { display: flex; gap: 10px; background: #222; padding: 15px; border-radius: 16px; border: 4px solid #444; box-shadow: inset 0 0 20px rgba(0,0,0,0.5); } .slot-reel { width: 70px; height: 90px; background: white; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 2.5rem; border: 2px solid #ccc; box-shadow: inset 0 0 10px rgba(0,0,0,0.1); }
        .roulette-wrapper { position: relative; display: flex; justify-content: center; margin: 0.5rem 0; } .roulette-wheel { width: 200px; height: 200px; border-radius: 50%; background: conic-gradient(#ef4444 0 170deg, #10b981 170deg 190deg, #1f2937 190deg 360deg); border: 12px solid #374151; position: relative; box-shadow: 0 10px 20px rgba(0,0,0,0.2); overflow: hidden; } .roulette-cap { position: absolute; top:50%; left:50%; transform:translate(-50%, -50%); width:20px; height:20px; background:#d4af37; border-radius:50%; z-index:15; border: 2px solid #b45309; box-shadow: 0 2px 5px rgba(0,0,0,0.5); } .roulette-arrow { position: absolute; top: -10px; left: 50%; transform: translateX(-50%); width: 0; height: 0; border-left: 12px solid transparent; border-right: 12px solid transparent; border-top: 24px solid var(--accent); z-index: 20; filter: drop-shadow(0 2px 2px rgba(0,0,0,0.5)); }
        
        .chat-sidebar { position: fixed; top: 0; right: 0; width: var(--sidebar-width); height: 100vh; background: var(--card-bg); box-shadow: -5px 0 30px rgba(0,0,0,0.2); transform: translateX(100%); transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); z-index: 200; display: flex; flex-direction: column; border-left: 1px solid var(--border); overflow: hidden; } .chat-sidebar.open { transform: translateX(0); } .chat-header { padding: 1.25rem; border-bottom: 1px solid var(--border); font-weight: 800; display: flex; justify-content: space-between; align-items: center; background: var(--primary); color: white; z-index: 210; box-shadow: 0 4px 6px rgba(0,0,0,0.1); }
        .chat-msgs { flex: 1; min-height: 0; overflow-y: auto; padding: 1rem; display: flex; flex-direction: column; gap: 0.75rem; font-size: 0.95rem; background: var(--bg-color); } .chat-msg { background: var(--card-bg); padding: 0.75rem 1rem; border-radius: 12px; border: 1px solid var(--border); box-shadow: 0 1px 2px rgba(0,0,0,0.05); flex-shrink: 0; }
        .chat-input-area { padding: 1rem; border-top: 1px solid var(--border); display: flex; gap: 0.5rem; background: var(--card-bg); z-index: 210; flex-shrink: 0; position: sticky; bottom: 0; margin-top: auto; }
        .chat-toggle-btn { position: fixed; bottom: 30px; right: 30px; width: 60px; height: 60px; border-radius: 50%; background: var(--primary); color: white; border: none; box-shadow: 0 4px 15px rgba(79, 70, 229, 0.4); font-size: 1.8rem; cursor: pointer; z-index: 150; display: flex; align-items: center; justify-content: center; transition: transform 0.2s; } .chat-toggle-btn:hover { transform: scale(1.1); }
        
        #panic-overlay {
            position: fixed; top: 0; left: 0; right: 0; height: 60px;
            background: #ef4444; color: white;
            display: none; align-items: center; justify-content: center;
            font-weight: 900; font-size: 1.2rem; z-index: 9999;
            box-shadow: 0 4px 15px rgba(239, 68, 68, 0.5);
            animation: slideDown 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
        }

	#loading-overlay {
            position: fixed; top: 0; left: 0; right: 0; bottom: 0;
            background: var(--bg-color); z-index: 10000;
            display: none; flex-direction: column; 
            align-items: center; justify-content: center;
            gap: 1rem; color: var(--text-color);
        }
        .spinner {
            width: 40px; height: 40px; border: 4px solid var(--border);
            border-top: 4px solid var(--primary); border-radius: 50%;
            animation: spin 1s linear infinite;
        }

        @keyframes slideDown { from { transform: translateY(-100%); } to { transform: translateY(0); } }
        
        .floating-text { position: fixed; color: #10b981; font-weight: 900; pointer-events: none; animation: floatUp 0.8s forwards; font-size: 1.8rem; text-shadow: 0 2px 0 #ffffff; z-index: 10000; } [data-theme="dark"] .floating-text { text-shadow: 0 2px 0 #000; } @keyframes floatUp { 0% { opacity: 1; transform: translateY(0) scale(1); } 100% { opacity: 0; transform: translateY(-100px) scale(1.5); } }
        
/* UPDATED TOAST CONTAINER & STYLES */
        #toast-container {
            position: fixed;
            top: 80px;
            left: 50%;
            transform: translateX(-50%);
            z-index: 1000;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 10px;
            pointer-events: none;
            width: max-content;
            max-width: 90vw;
        }

        .toast { 
            position: relative; /* Changed from fixed */
            background: #1f2937; 
            color: white; 
            padding: 1rem 2rem; 
            border-radius: 99px; 
            box-shadow: 0 10px 30px rgba(0,0,0,0.3); 
            font-weight: 700; 
            display: flex; 
            align-items: center; 
            gap: 0.8rem; 
            font-size: 1.1rem; 
            pointer-events: auto; 
            animation: toastIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); 
            flex-shrink: 0;
        } 
        
        .toast.danger { background: #ef4444; } 
        
        @keyframes toastIn { 
            from { opacity: 0; transform: translateY(-20px); } 
            to { opacity: 1; transform: translateY(0); } 
        }

        .leaderboard-table { width: 100%; border-collapse: collapse; background: var(--card-bg); border-radius: 12px; overflow: hidden; border: 1px solid var(--border); table-layout: fixed; } .leaderboard-table th { background: var(--bg-color); color: var(--text-secondary); padding: 1rem; text-align: center; font-weight: 700; border-bottom: 2px solid var(--border); } .leaderboard-table td { padding: 1rem; border-bottom: 1px solid var(--border); font-weight: 500; text-align: center; } .leaderboard-table th:nth-child(2), .leaderboard-table td:nth-child(2) { text-align: left; } .leaderboard-table th:nth-child(3), .leaderboard-table td:nth-child(3) { text-align: right; } .leaderboard-table tr:last-child td { border-bottom: none; } .leaderboard-table tr:hover { background: var(--bg-color); }
        .hidden { display: none !important; }

/* PFP STYLES */
.pfp-icon { 
    /* Increased size from 24px to 32px */
    width: 38px; height: 38px; 
    object-fit: contain; 
    border-radius: 6px; 
    vertical-align: middle; 
    margin-right: 8px; 
    /* Removed border and background for a cleaner look */
    background: transparent; 
    border: none;
}

/* Also make the emoji version bigger to match */
.pfp-emoji { 
    font-size: 1.9rem; 
    margin-right: 8px; 
    vertical-align: middle; 
}

/* Header profile icon can be even bigger */
.pfp-icon.large { width: 36px; height: 36px; }

/* Collectable Equip Button */
.btn-equip { 
    margin-top: 5px; padding: 2px 8px; font-size: 0.75rem; 
    background: var(--bg-color); border: 1px solid var(--border); 
    border-radius: 4px; cursor: pointer; color: var(--text-color);
}
.btn-equip.equipped { background: var(--success); color: white; border-color: var(--success); }

/* Remove mobile tap highlight */
#taxman, #goblin, #main-btn, .game-card, button {
    -webkit-tap-highlight-color: transparent;
    outline: none;
}

/* 📱 iOS Mobile Fixes: Prevent Zoom on Double-Tap */
#main-btn, button, .game-card {
    touch-action: manipulation;
    -webkit-touch-callout: none;
    user-select: none;
    -webkit-user-select: none;
}

/* Update this existing class or add it to the bottom of styles.css */
.currency-display {
    display: flex;
    align-items: center; /* This forces vertical centering for all items */
    gap: 5px; /* Adds a little space between icon and number if needed */
}

/* Optional: Ensures the icons inside the specific spans are also centered */
.currency-display > span {
    display: flex;
    align-items: center;
}

/* --- STABILITY FIXES FOR SHOP & COLLECTABLES --- */

/* 1. Hardware Acceleration (Stops text blurring/shaking) */
.shop-item, 
.collectable-card {
    position: relative;
    transform: translateZ(0); 
    will-change: transform;
    transition: transform 0.2s cubic-bezier(0.25, 0.8, 0.25, 1), 
                box-shadow 0.2s ease, 
                border-color 0.2s ease;
}

/* 2. Hover State Priorities */
.shop-item:hover,
.collectable-card:hover {
    z-index: 10; /* Ensures it floats above other items */
}

/* 3. The "Safety Net" (Invisible layer that captures mouse) */
.shop-item::after,
.collectable-card::after {
    content: '';
    position: absolute;
    left: 0; 
    right: 0;
    bottom: -10px; /* Extends invisible hit-box down */
    height: 10px;
    z-index: -1;
}

/* ✅ NEW: Dashboard Grid */
.stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr; /* 3 Equal Columns */
    gap: 8px;
    width: 100%;
    margin-top: 1rem;
}

.stat-box {
    background: var(--bg-color);
    padding: 0.6rem 0.2rem;
    border-radius: 12px;
    border: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    font-weight: 800;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.02);
}

.stat-box small {
    font-size: 0.65rem;
    text-transform: uppercase;
    color: var(--text-secondary);
    font-weight: 700;
    margin-bottom: 4px;
    letter-spacing: 0.5px;
    white-space: nowrap; /* Prevents text breaking */
}

/* ✅ 1. Restore the Multiplier Box */
.stats-display { 
    font-size: 1.1rem; 
    font-weight: 700; 
    color: var(--text-secondary); 
    background: var(--bg-color); 
    padding: 0.8rem 1.2rem; 
    border-radius: 16px; 
    width: 100%; 
    border: 1px solid var(--border);
    margin-bottom: 0.8rem; 
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
}

/* ✅ 2. Create the Vertical Stack for Extra Stats */
.extra-stats-stack {
    display: flex;
    flex-direction: column; /* Stacks items top-to-bottom */
    gap: 6px;               /* Space between the two rows */
    width: 100%;
    align-items: center;    /* Center the text horizontally */
    font-size: 0.85rem;
    color: var(--text-secondary);
    font-weight: 600;
}

/* Optional: Style for each row to make them consistent */
.stat-row {
    width: 100%;
    text-align: center;
}

/* ✅ Wrapper for the Left Column (Clicker + Stats) */
.mining-left-col {
    display: flex;
    flex-direction: column;
    gap: 1rem; /* Space between the Card and the Stats below it */
    width: 100%;
}

/* Update mobile layout to center the new wrapper */
@media (max-width: 850px) {
    .mining-left-col {
        max-width: 600px;
        margin: 0 auto;
    }
}