/* GAME CARD UI FIXES - UPDATED 2026-03-15 */
/* All changes are reversible by removing this section */

/* 1. HIDE DEMO BADGE on top-right corner of game cards (PINK BADGE) */
.game-card .badge-demo,
.game-card .demo-badge,
.game-badges .badge-demo,
.game-card .badge.badge-demo,
.badge-new.demo,
.game-badges .badge:contains("DEMO"),
span.badge-demo,
.badge[class*="demo"] {
    display: none !important;
}

/* Additional selectors for demo badges */
.game-card .game-badges > span:nth-child(2),
.game-card .game-badges > .badge:not(.badge-new):not(.badge-hot) {
    display: none !important;
}

/* 2. HIDE GAME TITLE (yellow text) on hover/click */
.game-card .game-title,
.game-card .game-info h3,
.game-overlay .game-title {
    display: none !important;
}

/* 3. HIDE CATEGORY TEXT on game cards */
.game-card .game-provider,
.game-card .game-category,
.game-overlay .game-provider {
    display: none !important;
}

/* 4. STACK BUTTONS VERTICALLY (Demo above Play Now) - Centered */
.game-card .game-buttons {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 10px !important;
}

/* 5. MAKE BUTTONS SAME SIZE - Clean and Uniform */
.game-card .btn-play,
.game-card .btn-demo,
.game-card .btn-real {
    width: 120px !important;
    padding: 10px 16px !important;
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    border-radius: 8px !important;
    border: none !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    text-align: center !important;
}

/* Demo Button Styling */
.game-card .btn-demo {
    background: linear-gradient(135deg, #6366f1, #8b5cf6) !important;
    color: white !important;
    box-shadow: 0 2px 8px rgba(99, 102, 241, 0.3) !important;
}

.game-card .btn-demo:hover {
    background: linear-gradient(135deg, #4f46e5, #7c3aed) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.5) !important;
}

/* Play & Win Button - RESTORE ORIGINAL HOMEPAGE COLOR (Pink/Magenta) */
.game-card .btn-real,
.game-card .btn-play.btn-real {
    background: linear-gradient(135deg, #EC4899, #DB2777) !important;
    color: white !important;
    box-shadow: 0 2px 8px rgba(236, 72, 153, 0.3) !important;
}

.game-card .btn-real:hover,
.game-card .btn-play.btn-real:hover {
    background: linear-gradient(135deg, #DB2777, #BE185D) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(236, 72, 153, 0.5) !important;
}

/* 6. ENSURE BUTTONS DON'T INTERFERE WITH CARD */
.game-card .game-overlay {
    padding: 12px !important;
}

/* Hide game info section completely */
.game-card .game-info {
    display: none !important;
}

/* 7. FIX CATEGORY FILTER BUTTONS - SEPARATE THEM PROPERLY */
/* Remove yellow line/border that makes them look stuck together */
.lobby-filters {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
    padding: 20px !important;
    justify-content: center !important;
}

.filter-btn {
    margin: 0 !important;
    border: 2px solid transparent !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
    position: relative !important;
}

/* Remove any top borders or lines */
.filter-btn::before,
.filter-btn::after {
    display: none !important;
}

/* Add spacing between filter buttons */
.filter-btn + .filter-btn {
    margin-left: 0 !important;
}

/* Ensure buttons are visually separated */
.lobby-filters > * {
    flex-shrink: 0 !important;
}

/* 8. MOBILE RESPONSIVE BUTTONS */
@media (max-width: 768px) {
    .game-card .btn-play,
    .game-card .btn-demo,
    .game-card .btn-real {
        width: 100px !important;
        padding: 8px 12px !important;
        font-size: 0.75rem !important;
        gap: 4px !important;
    }
    
    .game-card .game-buttons {
        gap: 6px !important;
        padding: 8px !important;
    }
    
    .lobby-filters {
        gap: 8px !important;
        padding: 15px !important;
    }
}

@media (max-width: 480px) {
    .game-card .btn-play,
    .game-card .btn-demo,
    .game-card .btn-real {
        width: 90px !important;
        padding: 7px 10px !important;
        font-size: 0.7rem !important;
    }
    
    .game-card .game-buttons {
        gap: 5px !important;
    }
}

/* 9. CLEAN CARD APPEARANCE - Remove clutter */
.game-card:hover .game-overlay {
    background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.4) 60%, transparent 100%) !important;
}

/* Ensure buttons are always visible on hover */
.game-card:hover .game-buttons {
    opacity: 1 !important;
    visibility: visible !important;
}

/* END OF REVERSIBLE CHANGES */
/* To revert: Delete this entire file or remove from HTML */