/* Game Categories Block */

.game-categories {

    padding: var(--spacing-xl) 0;

    background: #0f0f0f;

}



.game-cat-layout {

    display: grid;

    grid-template-columns: 7fr 3fr;

    gap: 20px;

}



/* Left Side: Category Grid */

.cat-grid {

    display: grid;

    grid-template-columns: repeat(4, 1fr);

    /* 4 columns on desktop by default for ~12 items */

    gap: 15px;

}



.game-cat-card {

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    aspect-ratio: 1/1;

    background: #2a2a2a;

    border-radius: var(--radius-md);

    text-align: center;

    padding: 10px;

    transition: transform var(--transition-fast), box-shadow var(--transition-fast);

    position: relative;

    overflow: hidden;

    color: white;

    text-decoration: none;

}



.game-cat-card:hover {

    transform: scale(1.05);

    box-shadow: 0 0 15px rgba(255, 255, 255, 0.1);

    z-index: 2;

}



.game-cat-card svg {

    width: 40px;

    height: 40px;

    margin-bottom: 10px;

    fill: currentColor;

}



.game-cat-card span {

    font-weight: 700;

    font-size: 0.9rem;

    text-transform: uppercase;

    letter-spacing: 0.5px;

    z-index: 2;

}



/* Category Colors */

.cat-crash {

    background: #e74c3c;

}



.cat-clash {

    background: #8e44ad;

}



.cat-tower {

    background: #3498db;

}



.cat-mines {

    background: #f1c40f;

    color: #000;

    /* Dark text for yellow bg */

}



.cat-double {

    background: #2ecc71;

}



.cat-wheel {

    background: #e67e22;

}



.cat-cases {

    background: #1abc9c;

}



.cat-coinflip {

    background: #9b59b6;

}



.cat-classic {

    background: #34495e;

}



.cat-dice {

    background: #d35400;

}



.cat-upgrader {

    background: #16a085;

}



.cat-plinko {

    background: #c0392b;

}





/* Right Side: Promo Column */

.promo-column {

    display: flex;

    flex-direction: column;

    gap: 20px;

}



.promo-cat-card {

    flex: 1;

    position: relative;

    border-radius: var(--radius-lg);

    overflow: hidden;

    display: flex;

    flex-direction: column;

    justify-content: flex-end;

    padding: 20px;

    background-size: cover;

    background-position: center;

    text-decoration: none;

    color: white;

    transition: transform var(--transition-fast);

}



.promo-cat-card:hover {

    transform: scale(1.02);

}



/* Overlays for readability */

.promo-cat-card::before {

    content: '';

    position: absolute;

    inset: 0;

    background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.2) 60%, transparent 100%);

    z-index: 1;

}



.promo-cat-content {

    position: relative;

    z-index: 2;

}



.promo-slots {

    background-image: url('../img/promo_slots_bg.jpg');

    /* Fallback color if image missing */

    background-color: #2c3e50;

}



.promo-bets {

    background-image: url('../img/promo_bets_bg.jpg');

    /* Fallback color if image missing */

    background-color: #27ae60;

}



.promo-cat-content h3 {

    font-size: 1.8rem;

    margin-bottom: 5px;

    font-weight: 800;

    text-transform: uppercase;

    color: var(--color-accent);

}



.promo-cat-content p {

    font-size: 0.95rem;

    margin-bottom: 15px;

    color: #ddd;

    line-height: 1.3;

}



.btn-promo {

    background: var(--color-primary);

    color: white;

    padding: 8px 20px;

    border-radius: var(--radius-sm);

    font-weight: 700;

    text-transform: uppercase;

    display: inline-block;

    font-size: 0.9rem;

    transition: background 0.2s;

}



.promo-cat-card:hover .btn-promo {

    background: var(--color-primary-hover);

}





/* Responsive */

@media (max-width: 1024px) {

    .cat-grid {

        grid-template-columns: repeat(3, 1fr);

    }

}



@media (max-width: 768px) {

    .game-cat-layout {

        display: flex;

        flex-direction: column;

    }



    /* Mobile: Promos first */

    .promo-column {

        order: -1;

        /* Moves it to top */

        flex-direction: row;

        /* Side by side on tablet if space allows, or stacked */

    }



    .cat-grid {

        grid-template-columns: repeat(3, 1fr);

    }

}



@media (max-width: 550px) {

    .promo-column {

        flex-direction: column;

    }



    .cat-grid {

        grid-template-columns: repeat(2, 1fr);

    }



    .promo-cat-card {

        min-height: 200px;

    }

}