/* Games-specific styling */

.platform-card {

    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;

    border: none;

    box-shadow: 0 2px 10px rgba(0,0,0,0.1);

}



.platform-card:hover {

    transform: translateY(-5px);

    box-shadow: 0 8px 25px rgba(0,0,0,0.15);

}



.platform-image {

    transition: transform 0.3s ease;

}



.platform-card:hover .platform-image {

    transform: scale(1.05);

}



.game-card {

    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;

    border: none;

    box-shadow: 0 2px 8px rgba(0,0,0,0.1);

}



.game-card:hover {

    transform: translateY(-2px);

    box-shadow: 0 4px 15px rgba(0,0,0,0.15);

}



.genre-badge {

    cursor: pointer;

    transition: all 0.2s ease;

}



.genre-badge:hover {

    transform: translateY(-1px);

    box-shadow: 0 2px 5px rgba(0,0,0,0.2);

}



/* Responsive improvements */

@media (max-width: 768px) {

    .platform-image {

        height: 120px !important;

    }

    

    .bg-info.bg-opacity-10.p-4 {

        padding: 2rem 1rem !important;

    }

    

    .card-body.p-3 {

        padding: 1rem !important;

    }

}



/* Loading states for images */

.platform-image, 

.game-card img {

    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);

    background-size: 200% 100%;

    animation: loading 1.5s infinite;

}



@keyframes loading {

    0% { background-position: 200% 0; }

    100% { background-position: -200% 0; }

}



/* Sticky sidebar improvements */

@media (min-width: 992px) {

    [data-sticky] {

        position: sticky;

        top: 100px;

    }

}
/* Game page specific styling - using CSS variables for future theme support */
:root {
    --game-cover-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    --game-rating-color: #ffc107;
    --game-console-badge: var(--bs-primary);
}

.game-cover {
    box-shadow: var(--game-cover-shadow);
    transition: transform 0.2s ease-in-out;
}

.game-cover:hover {
    transform: scale(1.02);
}

.content-formatting {
    line-height: 1.7;
}

.content-formatting p {
    margin-bottom: 1rem;
}

.content-formatting h1,
.content-formatting h2,
.content-formatting h3,
.content-formatting h4,
.content-formatting h5,
.content-formatting h6 {
    margin-top: 2rem;
    margin-bottom: 1rem;
    color: var(--bs-dark);
}

.content-formatting ul,
.content-formatting ol {
    margin-bottom: 1rem;
    padding-left: 2rem;
}

.content-formatting img {
    max-width: 100%;
    height: auto;
    border-radius: 0.375rem;
    margin: 1rem 0;
}

/* Social media buttons */
.btn-facebook {
    background-color: #1877f2;
    border-color: #1877f2;
    color: white;
}

.btn-facebook:hover {
    background-color: #166fe5;
    border-color: #166fe5;
    color: white;
}

.btn-twitter {
    background-color: #1da1f2;
    border-color: #1da1f2;
    color: white;
}

.btn-twitter:hover {
    background-color: #0d8bd9;
    border-color: #0d8bd9;
    color: white;
}

/* Rating stars interactivity */
.rating-star {
    color: #ddd;
    transition: color 0.2s ease;
}

.rating-star:hover,
.rating-star.active {
    color: var(--game-rating-color);
}

.rating-star:hover ~ .rating-star {
    color: #ddd;
}

/* Responsive improvements */
@media (max-width: 991.98px) {
    .content-formatting {
        font-size: 0.95rem;
    }
    
    .display-5 {
        font-size: 2rem;
    }
}

@media (max-width: 575.98px) {
    .d-flex.flex-wrap.align-items-center > div {
        flex: 1 1 100%;
        margin-bottom: 0.5rem !important;
    }
    
    .content-formatting {
        font-size: 0.9rem;
    }
    
    .game-cover {
        max-width: 200px;
        margin: 0 auto;
    }
}

/* Theme support for dark mode */
[data-bs-theme="dark"] {
    --game-cover-shadow: 0 0.5rem 1rem rgba(255, 255, 255, 0.1);
}

/* Affiliate link logos */
.affiliate-logo {
    height: 16px;
    width: auto;
    vertical-align: middle;
}

[data-bs-theme="dark"] .content-formatting h1,
[data-bs-theme="dark"] .content-formatting h2,
[data-bs-theme="dark"] .content-formatting h3,
[data-bs-theme="dark"] .content-formatting h4,
[data-bs-theme="dark"] .content-formatting h5,
[data-bs-theme="dark"] .content-formatting h6 {
    color: var(--bs-light);
}