/* ============================================
           ASDF GAME OF THE WEEK
           Fire-themed gaming platform
           ============================================ */

        :root {
            /* Fire Palette */
            --bg-void: #0a0a0f;
            --bg-dark: #0c0c0c;
            --bg-charred: #2a1005;
            --bg-burnt: #451a03;
            --border-rust: #7c2d12;
            --border-orange: #9a3412;
            --accent-fire: #ea580c;
            --accent-bright: #fb923c;
            --accent-ember: #f97316;
            --text-cream: #ffedd5;
            --text-muted: #a8a29e;
            --green: #22c55e;
            --green-light: #4ade80;
            --purple: #a855f7;
            --blue: #3b82f6;
            --red: #ef4444;
            --gold: #fbbf24;
            --silver: #9ca3af;
            --bronze: #d97706;

            /* Typography */
            --font-display: 'Comic Neue', cursive;
            --font-mono: 'JetBrains Mono', monospace;

            /* Spacing */
            --container-max: 1200px;
            --radius: 12px;
        }

        * { margin: 0; padding: 0; box-sizing: border-box; }
        html {
            scroll-behavior: smooth;
            background: var(--bg-void);
        }

        /* Accessibility: Focus styles */
        :focus-visible {
            outline: 2px solid var(--accent-fire);
            outline-offset: 2px;
        }
        button:focus-visible, a:focus-visible {
            outline: 2px solid var(--accent-bright);
            outline-offset: 2px;
        }
        .skip-link:focus {
            left: 16px !important;
        }


        body {
            font-family: var(--font-mono);
            background: var(--bg-void);
            color: var(--text-cream);
            line-height: 1.7;
            overflow-x: hidden;
            min-height: 100vh;
        }

        /* Scrollbar styling - Firefox */
        * {
            scrollbar-width: thin;
            scrollbar-color: var(--border-rust) var(--bg-charred);
        }

        /* Scrollbar styling - Webkit (Chrome, Safari, Edge) */
        @supports selector(::-webkit-scrollbar) {
            ::-webkit-scrollbar { width: 8px; }
            ::-webkit-scrollbar-track { background: var(--bg-charred); }
            ::-webkit-scrollbar-thumb { background: var(--border-rust); border-radius: 4px; }
            ::-webkit-scrollbar-thumb:hover { background: var(--accent-fire); }
        }

        .container {
            max-width: var(--container-max);
            margin: 0 auto;
            padding: 0 24px;
        }

        /* ============================================
           GAMES-SPECIFIC STYLES
           (Navigation handled by learn.css)
           ============================================ */

        /* Dev Mode Button */
        .dev-mode-btn {
            padding: 6px 12px;
            font-family: var(--font-mono);
            font-size: 10px;
            font-weight: 700;
            border: 2px solid var(--purple);
            border-radius: var(--radius);
            background: transparent;
            color: var(--purple);
            cursor: pointer;
            transition: all 0.2s ease;
            text-transform: uppercase;
            letter-spacing: 1px;
        }

        .dev-mode-btn:hover {
            background: var(--purple);
            color: #fff;
        }

        .dev-mode-btn.active {
            background: var(--purple);
            color: #fff;
            box-shadow: 0 0 15px rgba(168, 85, 247, 0.5);
        }

        /* Wallet Button */
        .wallet-btn {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 10px 20px;
            font-family: var(--font-mono);
            font-size: 13px;
            font-weight: 600;
            border: 2px solid var(--border-rust);
            border-radius: var(--radius);
            background: var(--bg-burnt);
            color: var(--text-cream);
            cursor: pointer;
            transition: all 0.2s ease;
            box-shadow: 3px 3px 0 var(--border-rust);
        }

        .wallet-btn:hover {
            background: var(--accent-fire);
            border-color: var(--accent-fire);
            transform: translate(-2px, -2px);
            box-shadow: 5px 5px 0 var(--border-rust);
        }

        .wallet-btn.connected {
            background: var(--green);
            border-color: var(--green-light);
            color: #000;
        }

        .wallet-btn.connected:hover {
            background: var(--red);
            border-color: var(--red);
            color: #fff;
        }

        .wallet-address {
            max-width: 100px;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        /* Holder Badge */
        .holder-badge {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            padding: 4px 10px;
            background: rgba(168, 85, 247, 0.2);
            border: 1px solid var(--purple);
            border-radius: 100px;
            font-size: 11px;
            font-weight: 700;
            color: var(--purple);
            text-transform: uppercase;
        }

        .visitor-badge {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            padding: 4px 10px;
            background: rgba(168, 162, 158, 0.2);
            border: 1px solid var(--text-muted);
            border-radius: 100px;
            font-size: 11px;
            font-weight: 700;
            color: var(--text-muted);
            text-transform: uppercase;
        }

        /* ============================================
           MAIN CONTENT
           Note: .main style removed to avoid conflict with learn.css in SPA mode
           Standalone games.html inherits from this file's body padding
           ============================================ */

        /* ============================================
           HERO SECTION - GAME OF THE WEEK
           ============================================ */

        .hero {
            text-align: center;
            padding: 40px 0 60px;
            position: relative;
        }

        .hero::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background:
                radial-gradient(ellipse at 50% 0%, rgba(234, 88, 12, 0.2), transparent 50%),
                radial-gradient(ellipse at 80% 80%, rgba(124, 45, 18, 0.15), transparent 40%);
            pointer-events: none;
        }

        .hero-content {
            position: relative;
            z-index: 1;
        }

        .gotw-badge {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 8px 20px;
            background: var(--bg-charred);
            border: 2px solid var(--accent-fire);
            border-radius: 100px;
            font-family: var(--font-display);
            font-size: 14px;
            font-weight: 700;
            color: var(--accent-bright);
            margin-bottom: 24px;
            animation: pulse-glow 2s infinite;
        }

        @keyframes pulse-glow {
            0%, 100% { box-shadow: 0 0 20px rgba(234, 88, 12, 0.3); }
            50% { box-shadow: 0 0 40px rgba(234, 88, 12, 0.6); }
        }

        .hero-game-icon {
            font-size: 80px;
            margin-bottom: 20px;
            filter: drop-shadow(0 0 30px rgba(234, 88, 12, 0.5));
        }

        .hero h1 {
            font-family: var(--font-display);
            font-size: clamp(36px, 8vw, 64px);
            font-weight: 700;
            margin-bottom: 16px;
            text-shadow: 4px 4px 0 var(--accent-fire);
        }

        .hero-description {
            font-size: 16px;
            color: var(--text-muted);
            max-width: 500px;
            margin: 0 auto 30px;
        }

        .hero-countdown {
            display: flex;
            justify-content: center;
            gap: 20px;
            margin-bottom: 30px;
        }

        .countdown-item {
            text-align: center;
        }

        .countdown-value {
            display: block;
            font-family: var(--font-mono);
            font-size: 32px;
            font-weight: 700;
            color: var(--accent-bright);
            background: var(--bg-charred);
            border: 2px solid var(--border-rust);
            border-radius: var(--radius);
            padding: 10px 16px;
            min-width: 70px;
        }

        .countdown-label {
            font-size: 11px;
            color: var(--text-muted);
            text-transform: uppercase;
            margin-top: 6px;
        }

        .hero-buttons {
            display: flex;
            gap: 16px;
            justify-content: center;
            flex-wrap: wrap;
        }

        .btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            padding: 14px 28px;
            font-family: var(--font-mono);
            font-size: 14px;
            font-weight: 600;
            text-decoration: none;
            border: 2px solid var(--border-rust);
            border-radius: var(--radius);
            background: var(--bg-burnt);
            color: var(--text-cream);
            cursor: pointer;
            transition: all 0.2s ease;
            box-shadow: 4px 4px 0 var(--border-rust);
        }

        .btn:hover {
            background: var(--accent-fire);
            border-color: var(--accent-fire);
            transform: translate(-2px, -2px);
            box-shadow: 6px 6px 0 var(--border-rust);
        }

        .btn:active {
            transform: translate(2px, 2px);
            box-shadow: 2px 2px 0 var(--border-rust);
        }

        .btn-primary {
            background: var(--accent-fire);
            border-color: var(--accent-bright);
            font-size: 16px;
            padding: 16px 36px;
        }

        .btn-primary:hover {
            background: var(--accent-bright);
        }

        .btn:disabled {
            opacity: 0.5;
            cursor: not-allowed;
            transform: none !important;
            box-shadow: 4px 4px 0 var(--border-rust) !important;
        }

        /* ============================================
           ACCESS INFO BAR
           ============================================ */

        .access-bar {
            display: flex;
            justify-content: center;
            gap: 40px;
            padding: 20px;
            background: var(--bg-charred);
            border: 2px solid var(--border-rust);
            border-radius: var(--radius);
            margin: 40px auto;
            max-width: 800px;
        }

        .access-item {
            display: flex;
            align-items: center;
            gap: 10px;
            font-size: 13px;
        }

        .access-icon {
            font-size: 20px;
        }

        .access-item.locked {
            color: var(--text-muted);
        }

        .access-item.unlocked {
            color: var(--green);
        }

        /* ============================================
           GAMES GRID
           ============================================ */

        .games-section {
            padding: 40px 0;
        }

        .section-header {
            text-align: center;
            margin-bottom: 40px;
        }

        .section-title {
            font-family: var(--font-display);
            font-size: clamp(28px, 5vw, 40px);
            font-weight: 700;
            margin-bottom: 12px;
        }

        .section-subtitle {
            font-size: 14px;
            color: var(--text-muted);
        }

        .games-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 24px;
            max-width: 1000px;
            margin: 0 auto;
        }

        .game-card {
            background: var(--bg-charred);
            border: 2px solid var(--border-rust);
            border-radius: var(--radius);
            padding: 24px;
            text-align: center;
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
        }

        .game-card:hover {
            border-color: var(--accent-fire);
            transform: translateY(-4px);
        }

        .game-card.featured {
            border-color: var(--gold);
            box-shadow: 0 0 30px rgba(251, 191, 36, 0.2);
        }

        .game-card.featured::before {
            content: 'GAME OF THE WEEK';
            position: absolute;
            top: 12px;
            right: -35px;
            background: var(--gold);
            color: #000;
            font-size: 10px;
            font-weight: 700;
            padding: 4px 40px;
            transform: rotate(45deg);
        }

        .game-card.locked {
            opacity: 0.6;
        }

        .game-card.locked::after {
            content: 'HOLDER ONLY';
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background: rgba(10, 10, 15, 0.9);
            border: 2px solid var(--purple);
            border-radius: var(--radius);
            padding: 12px 20px;
            font-size: 12px;
            font-weight: 700;
            color: var(--purple);
            white-space: nowrap;
        }

        .game-icon {
            font-size: 48px;
            margin-bottom: 16px;
        }

        .game-name {
            font-family: var(--font-display);
            font-size: 20px;
            font-weight: 700;
            margin-bottom: 8px;
        }

        .game-type {
            font-size: 12px;
            color: var(--text-muted);
            margin-bottom: 16px;
        }

        .game-highscore {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 6px 12px;
            background: var(--bg-burnt);
            border: 1px solid var(--border-rust);
            border-radius: 100px;
            font-size: 12px;
            color: var(--gold);
            margin-bottom: 16px;
        }

        .game-play-btn {
            width: 100%;
            padding: 12px;
            font-size: 13px;
        }

        /* ============================================
           LEADERBOARD SECTION
           ============================================ */

        .leaderboard-section {
            padding: 60px 0;
        }

        .leaderboard-container {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 30px;
            max-width: 900px;
            margin: 0 auto;
        }

        @media (max-width: 768px) {
            .leaderboard-container {
                grid-template-columns: 1fr;
            }
        }

        .leaderboard-card {
            background: var(--bg-charred);
            border: 2px solid var(--border-rust);
            border-radius: var(--radius);
            overflow: hidden;
        }

        .leaderboard-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 16px 20px;
            background: var(--bg-burnt);
            border-bottom: 2px solid var(--border-rust);
        }

        .leaderboard-title {
            font-family: var(--font-display);
            font-size: 18px;
            font-weight: 700;
        }

        .leaderboard-tabs {
            display: flex;
            gap: 4px;
        }

        .leaderboard-tab {
            padding: 6px 12px;
            font-size: 11px;
            font-weight: 600;
            background: transparent;
            border: 1px solid var(--border-rust);
            border-radius: 6px;
            color: var(--text-muted);
            cursor: pointer;
            transition: all 0.2s;
        }

        .leaderboard-tab.active {
            background: var(--accent-fire);
            border-color: var(--accent-fire);
            color: #fff;
        }

        .leaderboard-list {
            padding: 16px;
        }

        .leaderboard-item {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 12px;
            border-radius: 8px;
            margin-bottom: 8px;
            background: var(--bg-burnt);
            border: 1px solid var(--border-rust);
        }

        .leaderboard-item:last-child {
            margin-bottom: 0;
        }

        .leaderboard-item.you {
            border-color: var(--accent-fire);
            background: rgba(234, 88, 12, 0.1);
        }

        .leaderboard-rank {
            width: 28px;
            height: 28px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 12px;
            font-weight: 700;
            border-radius: 50%;
            background: var(--bg-charred);
            border: 2px solid var(--border-rust);
        }

        .leaderboard-rank.gold {
            background: var(--gold);
            border-color: var(--gold);
            color: #000;
        }

        .leaderboard-rank.silver {
            background: var(--silver);
            border-color: var(--silver);
            color: #000;
        }

        .leaderboard-rank.bronze {
            background: var(--bronze);
            border-color: var(--bronze);
            color: #000;
        }

        .leaderboard-player {
            flex: 1;
            font-size: 13px;
        }

        .leaderboard-score {
            font-weight: 700;
            color: var(--accent-bright);
        }

        /* ============================================
           AIRDROP INFO SECTION
           ============================================ */

        .airdrop-section {
            padding: 60px 0;
            background: var(--bg-charred);
            margin-top: 40px;
        }

        .airdrop-card {
            max-width: 700px;
            margin: 0 auto;
            background: var(--bg-burnt);
            border: 2px solid var(--gold);
            border-radius: var(--radius);
            padding: 32px;
            text-align: center;
        }

        .airdrop-icon {
            font-size: 60px;
            margin-bottom: 16px;
        }

        .airdrop-title {
            font-family: var(--font-display);
            font-size: 28px;
            font-weight: 700;
            margin-bottom: 12px;
            color: var(--gold);
        }

        .airdrop-subtitle {
            font-size: 14px;
            color: var(--text-muted);
            margin-bottom: 24px;
        }

        .airdrop-countdown {
            display: flex;
            justify-content: center;
            gap: 16px;
            margin-bottom: 24px;
        }

        .airdrop-countdown .countdown-value {
            font-size: 24px;
            min-width: 60px;
            padding: 8px 12px;
            border-color: var(--gold);
        }

        .airdrop-rules {
            text-align: left;
            background: var(--bg-charred);
            border-radius: 8px;
            padding: 20px;
            margin-top: 20px;
        }

        .airdrop-rules h4 {
            font-family: var(--font-display);
            font-size: 16px;
            margin-bottom: 12px;
            color: var(--text-cream);
        }

        .airdrop-rules ul {
            list-style: none;
            font-size: 13px;
            color: var(--text-muted);
        }

        .airdrop-rules li {
            padding: 8px 0;
            border-bottom: 1px solid var(--border-rust);
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .airdrop-rules li:last-child {
            border-bottom: none;
        }

        .airdrop-rules .rule-icon {
            font-size: 16px;
        }

        /* ============================================
           TICKETS INFO
           ============================================ */

        .tickets-bar {
            position: fixed;
            bottom: 20px;
            right: 20px;
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 12px 20px;
            background: var(--bg-charred);
            border: 2px solid var(--border-rust);
            border-radius: var(--radius);
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
            z-index: 50;
        }

        .tickets-count {
            display: flex;
            align-items: center;
            gap: 6px;
            font-size: 14px;
            font-weight: 700;
            color: var(--gold);
        }

        .buy-tickets-btn {
            padding: 8px 16px;
            font-size: 12px;
        }

        /* ============================================
           GAME MODAL
           ============================================ */

        .game-modal {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(10, 10, 15, 0.95);
            z-index: 200;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 20px;
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.25s ease, visibility 0.25s ease;
        }

        .game-modal.active {
            opacity: 1;
            visibility: visible;
        }

        .game-modal-content {
            background: var(--bg-charred);
            border: 2px solid var(--border-rust);
            border-radius: var(--radius);
            width: 100%;
            max-width: 800px;
            max-height: 90vh;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            transform: scale(0.95);
            transition: transform 0.25s ease;
        }

        .game-modal.active .game-modal-content {
            transform: scale(1);
        }

        .game-modal-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 16px 20px;
            background: var(--bg-burnt);
            border-bottom: 2px solid var(--border-rust);
        }

        .game-modal-title {
            font-family: var(--font-display);
            font-size: 20px;
            font-weight: 700;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .game-modal-close {
            width: 36px;
            height: 36px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: var(--bg-charred);
            border: 2px solid var(--border-rust);
            border-radius: 8px;
            color: var(--text-cream);
            font-size: 20px;
            cursor: pointer;
            transition: all 0.2s;
        }

        .game-modal-close:hover {
            background: var(--red);
            border-color: var(--red);
        }

        .game-modal-body {
            flex: 1;
            padding: 20px;
            overflow-y: auto;
        }

        .game-arena {
            background: var(--bg-burnt);
            border: 2px solid var(--border-rust);
            border-radius: var(--radius);
            min-height: 400px;
            position: relative;
            overflow: hidden;
        }

        .game-controls {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 16px;
            background: var(--bg-burnt);
            border-top: 2px solid var(--border-rust);
        }

        .game-stats {
            display: flex;
            gap: 20px;
        }

        .game-stat {
            text-align: center;
        }

        .game-stat-value {
            font-size: 24px;
            font-weight: 700;
            color: var(--accent-bright);
        }

        .game-stat-label {
            font-size: 11px;
            color: var(--text-muted);
            text-transform: uppercase;
        }

        .game-mode-toggle {
            display: flex;
            gap: 8px;
        }

        .mode-btn {
            padding: 10px 20px;
            font-size: 12px;
            font-weight: 600;
            background: var(--bg-charred);
            border: 2px solid var(--border-rust);
            border-radius: 8px;
            color: var(--text-muted);
            cursor: pointer;
            transition: all 0.2s;
        }

        .mode-btn.active {
            background: var(--accent-fire);
            border-color: var(--accent-fire);
            color: #fff;
        }

        .mode-btn:hover:not(.active) {
            border-color: var(--accent-fire);
            color: var(--text-cream);
        }

        /* Game Start Overlay */
        .game-start-overlay {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(10, 10, 15, 0.9);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 20px;
            z-index: 10;
        }

        .game-start-overlay.hidden {
            display: none;
        }

        .game-instructions {
            text-align: center;
            max-width: 300px;
        }

        .game-instructions h3 {
            font-family: var(--font-display);
            font-size: 24px;
            margin-bottom: 12px;
        }

        .game-instructions p {
            font-size: 13px;
            color: var(--text-muted);
        }

        /* ============================================
           RESPONSIVE
           ============================================ */

        @media (max-width: 768px) {
            .nav-links {
                display: none;
            }

            .hero-countdown {
                gap: 12px;
            }

            .countdown-value {
                font-size: 24px;
                min-width: 55px;
                padding: 8px 12px;
            }

            .access-bar {
                flex-direction: column;
                gap: 16px;
                text-align: center;
            }

            .tickets-bar {
                bottom: 10px;
                right: 10px;
                left: 10px;
                justify-content: space-between;
            }

            .games-grid {
                grid-template-columns: 1fr;
            }
        }

        /* ============================================
           ANIMATIONS
           ============================================ */

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

        .fade-in {
            animation: fadeIn 0.5s ease;
        }

        @keyframes shake {
            0%, 100% { transform: translateX(0); }
            25% { transform: translateX(-5px); }
            75% { transform: translateX(5px); }
        }

        .shake {
            animation: shake 0.3s ease;
        }

        /* Pack Opening Animation */
        @keyframes bounce {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-20px); }
        }

        @keyframes glow {
            0%, 100% { box-shadow: 0 0 30px rgba(251, 191, 36, 0.4); }
            50% { box-shadow: 0 0 60px rgba(251, 191, 36, 0.8); }
        }

        .pack-card {
            animation: glow 2s infinite;
        }

        .pack-card:hover {
            transform: scale(1.05) rotateY(10deg);
        }

        .pack-card.flip {
            animation: packFlip 0.6s forwards;
        }

        @keyframes packFlip {
            0% { transform: rotateY(0deg) scale(1); }
            50% { transform: rotateY(90deg) scale(1.1); }
            100% { transform: rotateY(180deg) scale(0); opacity: 0; }
        }

        .pack-win {
            animation: winPop 0.5s ease-out;
        }

        @keyframes winPop {
            0% { transform: scale(0); opacity: 0; }
            50% { transform: scale(1.2); }
            100% { transform: scale(1); opacity: 1; }
        }

        /* ============================================
           UTILITY CLASSES
           ============================================ */

        .hidden { display: none !important; }
        .text-gold { color: var(--gold); }
        .text-green { color: var(--green); }
        .text-red { color: var(--red); }
        .text-muted { color: var(--text-muted); }

        /* ============================================
           GAME ENGINE UI COMPONENTS
           Replaces inline styles for CSP compliance
           ============================================ */

        /* Game Container Base */
        .game-container {
            width: 100%;
            height: 100%;
            position: relative;
            overflow: hidden;
        }

        /* Game Backgrounds */
        .game-bg-purple {
            background: linear-gradient(180deg, #1a0a2e 0%, #2d1b4e 50%, #1a1a2e 100%);
        }

        .game-bg-dark {
            background: linear-gradient(180deg, #0a0a1a 0%, #1a1a3a 100%);
        }

        .game-bg-space {
            background: #1a1a2e;
        }

        .game-bg-trading {
            background: linear-gradient(180deg, #0a0a1a 0%, #1a1a3a 100%);
        }

        .game-bg-green {
            background: linear-gradient(180deg, #0a1a0a 0%, #1a3a1a 100%);
        }

        /* Game HUD - Stats Container */
        .game-hud {
            position: absolute;
            top: 15px;
            left: 15px;
            display: flex;
            gap: 20px;
            z-index: 10;
        }

        .game-hud-compact {
            top: 10px;
            left: 10px;
            gap: 15px;
            flex-wrap: wrap;
        }

        /* Game Stat Box */
        .game-stat-box {
            background: rgba(0, 0, 0, 0.5);
            padding: 8px 16px;
            border-radius: 8px;
        }

        .game-stat-box-compact {
            background: rgba(0, 0, 0, 0.7);
            padding: 6px 12px;
            border-radius: 6px;
        }

        .game-stat-label {
            color: var(--text-muted);
            font-size: 12px;
            text-transform: uppercase;
        }

        .game-stat-value {
            font-size: 20px;
            font-weight: bold;
        }

        .game-stat-value-gold { color: var(--gold); }
        .game-stat-value-fire { color: var(--accent-fire); }
        .game-stat-value-purple { color: var(--purple); }
        .game-stat-value-green { color: var(--green); }
        .game-stat-value-blue { color: var(--blue); }

        /* Game Instructions/Hints */
        .game-hint {
            position: absolute;
            bottom: 15px;
            left: 50%;
            transform: translateX(-50%);
            color: var(--text-muted);
            font-size: 12px;
            text-align: center;
            z-index: 10;
        }

        /* Game Canvas Container */
        .game-canvas-wrapper {
            width: 100%;
            height: 100%;
        }

        .game-canvas-wrapper canvas {
            width: 100%;
            height: 100%;
        }

        /* Game Zone - Safe/Target Areas */
        .game-zone {
            position: absolute;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .game-zone-safe {
            background: linear-gradient(90deg, rgba(139, 92, 246, 0.3), rgba(251, 191, 36, 0.3));
            border: 2px solid var(--gold);
        }

        /* Game Buttons in Arena */
        .game-action-btn {
            padding: 15px 30px;
            font-size: 16px;
            font-weight: bold;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            transition: all 0.2s ease;
            text-transform: uppercase;
        }

        .game-action-btn-pump {
            background: linear-gradient(135deg, #22c55e, #16a34a);
            color: white;
        }

        .game-action-btn-dump {
            background: linear-gradient(135deg, #ef4444, #dc2626);
            color: white;
        }

        .game-action-btn:hover {
            transform: scale(1.05);
        }

        .game-action-btn:disabled {
            opacity: 0.5;
            cursor: not-allowed;
            transform: none;
        }

        /* Trading Chart Container */
        .game-chart {
            position: relative;
            width: 100%;
            flex: 1;
            background: rgba(0, 0, 0, 0.3);
            border-radius: 8px;
            overflow: hidden;
        }

        /* Game Token Display */
        .game-token-display {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 10px 20px;
            background: rgba(0, 0, 0, 0.5);
            border-radius: 8px;
        }

        .game-token-icon {
            font-size: 32px;
        }

        .game-token-name {
            font-size: 18px;
            font-weight: bold;
            color: var(--text-cream);
        }

        /* Game Price Display */
        .game-price {
            font-size: 24px;
            font-weight: bold;
        }

        .game-price-up { color: var(--green); }
        .game-price-down { color: var(--red); }
        .game-price-neutral { color: var(--text-cream); }

        /* Game Round/Timer Display */
        .game-round-display {
            position: absolute;
            top: 15px;
            right: 15px;
            display: flex;
            gap: 15px;
            z-index: 10;
        }

        /* Game Result Overlay */
        .game-result-overlay {
            position: absolute;
            inset: 0;
            background: rgba(0, 0, 0, 0.8);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            z-index: 100;
        }

        .game-result-title {
            font-size: 48px;
            font-weight: bold;
            margin-bottom: 20px;
        }

        .game-result-win { color: var(--green); }
        .game-result-lose { color: var(--red); }

        /* Game Shop/Upgrade Buttons */
        .game-shop {
            position: absolute;
            bottom: 10px;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            gap: 10px;
            z-index: 10;
        }

        .game-shop-btn {
            padding: 8px 16px;
            background: rgba(0, 0, 0, 0.7);
            border: 1px solid var(--border-rust);
            border-radius: 6px;
            color: var(--text-cream);
            font-size: 12px;
            cursor: pointer;
            transition: all 0.2s ease;
        }

        .game-shop-btn:hover {
            background: var(--accent-fire);
            border-color: var(--accent-fire);
        }

        .game-shop-btn:disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }

        /* Game Crosshair Cursor */
        .game-crosshair {
            cursor: crosshair;
        }

        /* Game Entity Styles */
        .game-entity {
            position: absolute;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 24px;
            transition: transform 0.1s ease;
        }

        /* Game Health Bar */
        .game-health-bar {
            position: absolute;
            bottom: -8px;
            left: 50%;
            transform: translateX(-50%);
            width: 80%;
            height: 4px;
            background: rgba(0, 0, 0, 0.5);
            border-radius: 2px;
            overflow: hidden;
        }

        .game-health-fill {
            height: 100%;
            background: var(--green);
            transition: width 0.2s ease;
        }

        .game-health-fill.low {
            background: var(--red);
        }

        /* Pump Arena Specific */
        .pump-arena-layout {
            display: flex;
            flex-direction: column;
            padding: 15px;
            box-sizing: border-box;
            height: 100%;
        }

        .pump-arena-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 10px;
        }

        .pump-arena-buttons {
            display: flex;
            gap: 20px;
            justify-content: center;
            margin-top: 15px;
        }

        /* ============================================
           GAME OVER OVERLAY
           ============================================ */

        .game-over-overlay {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.85);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 15px;
            z-index: 1000;
        }

        .game-over-title {
            font-size: 32px;
            font-weight: bold;
            color: var(--accent-bright);
        }

        .game-over-score {
            font-size: 24px;
            color: var(--gold);
        }

        .game-over-new-best {
            font-size: 18px;
            color: var(--green);
            animation: pulse 0.5s infinite;
        }

        .game-over-rank {
            font-size: 16px;
            color: var(--purple);
        }

        .game-over-error {
            font-size: 12px;
            color: var(--text-muted);
        }

        .game-over-restart {
            margin-top: 10px;
        }

        @keyframes pulse {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.7; }
        }

        /* ============================================
           GAME-SPECIFIC UI ELEMENTS
           ============================================ */

        /* Tower Shop Button (Hold Hero) */
        .tower-shop-btn {
            padding: 8px 12px;
            font-size: 12px;
        }

        /* Rug Pull Warning */
        .rug-warning {
            background: rgba(239, 68, 68, 0.2);
            border: 1px solid #ef4444;
            padding: 6px 12px;
            border-radius: 6px;
            font-size: 12px;
            animation: pulse 0.5s;
        }

        /* Whale Watch Button */
        .whale-btn {
            width: 100px;
            height: 100px;
            font-size: 50px;
            background: rgba(0, 0, 0, 0.3);
            border-width: 3px;
            border-style: solid;
            border-radius: 16px;
            cursor: pointer;
            transition: all 0.2s;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .whale-btn:hover {
            transform: scale(1.05);
        }

/* ============================================
   COMPETITIVE MODE TIMER
   ============================================ */

.competitive-timer-display {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: linear-gradient(135deg, var(--bg-burnt), rgba(234, 88, 12, 0.2));
    border: 1px solid var(--accent-fire);
    border-radius: 8px;
}

.timer-label {
    font-size: 12px;
    color: var(--text-muted);
}

.timer-value {
    font-size: 18px;
    font-weight: 700;
    color: var(--accent-bright);
    font-family: var(--font-mono);
}

.timer-value.time-low {
    color: var(--gold);
    animation: pulse 1s infinite;
}

.timer-value.time-exhausted {
    color: var(--red);
    animation: none;
}

/* Timer in game modal */
#timer-stat-container .game-stat-value.time-low,
.game-stat-value.time-low {
    color: var(--gold) !important;
    animation: pulse 1s infinite;
}

.game-stat-value.time-exhausted {
    color: var(--red) !important;
}

/* ============================================
   GLOBAL LEADERBOARD SECTION
   ============================================ */

.leaderboard-global-section {
    padding: 60px 20px;
    background: linear-gradient(180deg, var(--bg-charred) 0%, var(--bg-burnt) 50%, var(--bg-charred) 100%);
}

.leaderboard-tabs {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-bottom: 24px;
}

.leaderboard-tab {
    padding: 10px 24px;
    font-family: var(--font-mono);
    font-size: 14px;
    font-weight: 600;
    background: var(--bg-charred);
    border: 2px solid var(--border-rust);
    color: var(--text-muted);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
}

.leaderboard-tab:hover {
    border-color: var(--accent-fire);
    color: var(--text-cream);
}

.leaderboard-tab.active {
    background: linear-gradient(135deg, var(--accent-fire), var(--accent-ember));
    border-color: var(--accent-bright);
    color: white;
}

.leaderboard-content {
    max-width: 600px;
    margin: 0 auto;
}

.leaderboard-list {
    display: none;
    flex-direction: column;
    gap: 8px;
}

.leaderboard-list.active {
    display: flex;
}

.leaderboard-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: var(--bg-charred);
    border: 1px solid var(--border-rust);
    border-radius: 8px;
    transition: all 0.2s;
}

.leaderboard-item:hover {
    border-color: var(--accent-fire);
    transform: translateX(4px);
}

.leaderboard-item.you {
    background: linear-gradient(135deg, rgba(234, 88, 12, 0.2), rgba(251, 146, 60, 0.1));
    border-color: var(--accent-fire);
}

.leaderboard-rank {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 14px;
    background: var(--bg-burnt);
    border-radius: 50%;
}

.leaderboard-rank.gold {
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    color: #000;
}

.leaderboard-rank.silver {
    background: linear-gradient(135deg, #9ca3af, #6b7280);
    color: #000;
}

.leaderboard-rank.bronze {
    background: linear-gradient(135deg, #d97706, #b45309);
    color: #000;
}

.leaderboard-player {
    flex: 1;
    font-size: 14px;
    color: var(--text-cream);
}

.leaderboard-score {
    font-weight: 700;
    font-size: 16px;
    color: var(--accent-bright);
}

.leaderboard-loading,
.leaderboard-empty {
    text-align: center;
    padding: 24px;
    color: var(--text-muted);
    font-size: 14px;
}

/* ============================================
   MINI LEADERBOARD IN GAME MODAL
   ============================================ */

.game-leaderboard-mini {
    padding: 16px;
    background: var(--bg-charred);
    border-top: 1px solid var(--border-rust);
    max-height: 200px;
    overflow-y: auto;
}

.mini-leaderboard-title {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 12px;
    text-align: center;
}

.mini-leaderboard-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.mini-leaderboard-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    background: var(--bg-burnt);
    border-radius: 6px;
    font-size: 13px;
}

.mini-leaderboard-item.you {
    background: linear-gradient(135deg, rgba(234, 88, 12, 0.3), rgba(251, 146, 60, 0.15));
    border: 1px solid var(--accent-fire);
}

.mini-rank {
    font-weight: 700;
    width: 28px;
    color: var(--text-muted);
}

.mini-rank.gold { color: var(--gold); }
.mini-rank.silver { color: var(--silver); }
.mini-rank.bronze { color: var(--bronze); }

.mini-player {
    flex: 1;
    color: var(--text-cream);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mini-score {
    font-weight: 700;
    color: var(--accent-bright);
}

/* Competitive mode button active state */
.mode-btn[data-action="toggle-competitive"].active,
#competitive-btn-burnrunner.active,
#competitive-btn-scamblaster.active,
#competitive-btn-hodlhero.active,
#competitive-btn-cryptoheist.active,
#competitive-btn-pumparena.active,
#competitive-btn-rugpull.active,
#competitive-btn-whalewatch.active,
#competitive-btn-stakestacker.active,
#competitive-btn-dexdash.active,
#competitive-btn-burnorhold.active {
    background: linear-gradient(135deg, var(--accent-fire), var(--accent-ember)) !important;
    border-color: var(--accent-bright) !important;
    color: white !important;
}