/**
 * GameVerse — CSS Complementar
 * Estilos que não estão em style.css ou precisam de especificidade maior
 */

/* ===================== GRID RESPONSIVE ===================== */
@media (min-width: 768px) {
    #site-footer .footer-grid {
        grid-template-columns: 2fr 1fr 1fr !important;
    }
    #site-footer .footer-grid > div:first-child {
        grid-column: span 2 !important;
    }
}

/* ===================== HERO TEXT SHADOW ===================== */
#hero-title {
    text-shadow: 0 2px 20px rgba(0,0,0,0.6), 0 1px 4px rgba(0,0,0,0.8);
}

/* ===================== SLIDE ANIMATION ===================== */
.img-slide {
    position: absolute;
    inset: 0;
    transition: transform 0.5s ease-in-out;
}

/* ===================== GAME CARD RESPONSIVE ===================== */
@media (min-width: 640px) {
    .games-grid { gap: 16px; }
}

/* ===================== FILTER BAR RESPONSIVE ===================== */
@media (max-width: 639px) {
    .filter-row {
        flex-direction: column;
    }
    .filter-input, .filter-select {
        width: 100%;
    }
}

/* ===================== SMOOTH SCROLL ===================== */
html {
    scroll-behavior: smooth;
}

/* ===================== IMAGE MODAL ===================== */
.image-modal {
    animation: none;
}
.image-modal.open {
    display: flex !important;
    animation: fadeIn 0.2s ease-out;
}

/* ===================== TAILWIND OVERRIDE — dark body ===================== */
.bg-\[\#0a0e17\] {
    background-color: #0a0e17 !important;
}

/* ===================== RESPONSIVE FOOTER GRID ===================== */
@media (max-width: 767px) {
    #site-footer .footer-grid {
        grid-template-columns: 1fr !important;
    }
    #site-footer .footer-grid > div:first-child {
        grid-column: span 1 !important;
    }
}

/* ===================== GAME DETAIL SIDEBAR ===================== */
@media (min-width: 1024px) {
    #game-detail-grid {
        grid-template-columns: 1fr 320px !important;
    }
    #game-sidebar {
        position: sticky;
        top: 80px;
        align-self: start;
    }
}

/* ===================== STAT ITEM BORDERS ===================== */
@media (min-width: 768px) {
    .stat-item:not(:last-child) {
        border-right: 1px solid rgba(55, 65, 81, 0.5) !important;
    }
}

/* ===================== CATEGORIES GRID ===================== */
@media (min-width: 640px) {
    .sm\:grid-cols-4 {
        grid-template-columns: repeat(4, 1fr) !important;
    }
    .sm\:grid-cols-3 {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

@media (min-width: 768px) {
    .md\:grid-cols-4 {
        grid-template-columns: repeat(4, 1fr) !important;
    }
    .md\:grid-cols-6 {
        grid-template-columns: repeat(6, 1fr) !important;
    }
    .md\:grid-cols-3 {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

/* ===================== RELATED GAMES GRID ===================== */
@media (min-width: 768px) {
    #game-detail-grid + section .md\:grid-cols-6 {
        grid-template-columns: repeat(6, 1fr) !important;
    }
}

/* ===================== THUMB STRIP ===================== */
.thumb-strip.grabbing {
    cursor: grabbing !important;
}

/* ===================== PROGRESS BAR ===================== */
@keyframes slideProgress {
    from { width: 0%; }
    to   { width: 100%; }
}

/* ===================== DOWNLOAD ITEM HIGHLIGHT ===================== */
.download-item.highlight {
    border-color: rgba(79, 70, 229, 0.7) !important;
    animation: pulseHighlight 2s ease-in-out;
    box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.3);
}

@keyframes pulseHighlight {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.8; }
}

/* ===================== WP ADMIN BAR OFFSET ===================== */
.admin-bar #site-header {
    top: 32px;
}
@media (max-width: 782px) {
    .admin-bar #site-header {
        top: 46px;
    }
}

/* ===================== SEARCH INPUT - remove system style ===================== */
input[type="search"]::-webkit-search-cancel-button {
    -webkit-appearance: none;
}