/* assets/css/pages/more-games.css */

/*
   On utilise l'ID #games-listing pour augmenter la spécificité des sélecteurs.
   Cela garantit que les styles de cette page (display: grid, width: 100% sur les cartes)
   ne sont pas écrasés par les styles globaux des carrousels (display: flex, largeurs fixes)
   définis dans game-cards.css.
*/
#games-listing .wrapping-grid {
    display: grid;
    gap: 15px;
    width: 100%;
    padding: 0;
    /* Comportement par défaut (mobile) : 2 colonnes qui s'adaptent à la largeur. */
    grid-template-columns: repeat(2, 1fr);
}

/*
   NOUVELLE LOGIQUE DE GRILLE ADAPTATIVE :
   Au lieu d'utiliser "auto-fill" qui ajoute des colonnes dès que possible (ce qui peut réduire la taille des cartes),
   nous définissons un nombre de colonnes fixe pour différentes tailles d'écran (breakpoints).
   Avec "1fr", les colonnes (et donc les cartes de jeu) s'agrandiront pour remplir l'espace disponible,
   tandis que la gouttière ("gap") restera fixe. Cela correspond au comportement souhaité.
*/

/* Tablettes et petits écrans */
@media (min-width: 540px) {
    #games-listing .wrapping-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    #games-listing .wrapping-grid.portrait-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* Écrans de bureau */
@media (min-width: 820px) {
    #games-listing .wrapping-grid {
        grid-template-columns: repeat(4, 1fr);
    }
    #games-listing .wrapping-grid.portrait-grid {
        grid-template-columns: repeat(6, 1fr);
    }
}

/* NOUVEAU : Écrans de bureau plus larges */
@media (min-width: 1200px) {
    #games-listing .wrapping-grid {
        grid-template-columns: repeat(5, 1fr);
    }
    #games-listing .wrapping-grid.portrait-grid {
        grid-template-columns: repeat(7, 1fr);
    }
}

/* NOUVEAU : Très grands écrans (pour atteindre les 6 colonnes) */
@media (min-width: 1600px) {
    #games-listing .wrapping-grid {
        grid-template-columns: repeat(6, 1fr);
    }
    #games-listing .wrapping-grid.portrait-grid {
        grid-template-columns: repeat(8, 1fr);
    }
}

#games-listing .wrapping-grid .game-card {
    width: 100%; /* La carte prend 100% de la colonne de la grille */
    max-width: none; /* On annule toute largeur maximale (ex: max-width: 233px) qui pourrait être héritée des styles de carrousel. */
}

/* =================================================================== */
/* STYLE POUR L'ÉTAT VIDE DE RECHERCHE (Search Empty State Redesign)  */
/* =================================================================== */

.search-empty-container {
    width: 100%;
    margin: 0 auto;
    padding: 24px var(--page-padding, 12px) 16px var(--page-padding, 12px);
    box-sizing: border-box;
}

@media (min-width: 768px) {
    .search-empty-container {
        padding: 36px 24px 24px 24px;
    }
}

@media (min-width: 1200px) {
    .search-empty-container {
        padding: 44px 36px 28px 36px;
    }
}

.search-empty-card {
    position: relative;
    max-width: 840px;
    margin: 0 auto;
    padding: 40px 24px 34px 24px;
    border-radius: 24px;
    text-align: center;
    overflow: hidden;
    box-sizing: border-box;
    background: linear-gradient(165deg, rgba(34, 34, 53, 0.88) 0%, rgba(24, 24, 40, 0.96) 100%);
    border: 1px solid rgba(190, 175, 255, 0.18);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45), 0 0 40px rgba(112, 87, 224, 0.15);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

.search-empty-glow-orb {
    position: absolute;
    top: -40px;
    left: 50%;
    transform: translateX(-50%);
    width: 320px;
    height: 180px;
    background: radial-gradient(ellipse at center, var(--accent-color, #7057e0) 0%, transparent 70%);
    opacity: 0.25;
    filter: blur(40px);
    pointer-events: none;
    animation: floatSearchGlow 4s infinite alternate ease-in-out;
}

@keyframes floatSearchGlow {
    0% { transform: translateX(-50%) scale(0.9); opacity: 0.2; }
    100% { transform: translateX(-50%) scale(1.15); opacity: 0.35; }
}

.search-empty-icon-wrap {
    display: inline-flex;
    justify-content: center;
    margin-bottom: 18px;
    position: relative;
}

.search-empty-icon-circle {
    position: relative;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02));
    border: 1px solid rgba(255, 255, 255, 0.18);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.35);
    animation: emptyFloat 3s infinite ease-in-out;
}

.search-icon-svg {
    stroke: var(--accent-color, #beafff);
    filter: drop-shadow(0 4px 10px rgba(112, 87, 224, 0.45));
}

.search-empty-gamepad-badge {
    position: absolute;
    bottom: -4px;
    right: -4px;
    font-size: 22px;
    filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.6));
    animation: gamepadWiggle 2.5s infinite ease-in-out;
}

@keyframes emptyFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}

@keyframes gamepadWiggle {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(-8deg); }
    75% { transform: rotate(8deg); }
}

.search-empty-title {
    font-family: var(--font-title, 'Poppins', sans-serif);
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--text-color-primary, #ffffff);
    margin: 0 0 12px 0;
    letter-spacing: -0.02em;
}

@media (min-width: 768px) {
    .search-empty-title {
        font-size: 2.1rem;
    }
}

.search-query-badge-wrap {
    display: flex;
    justify-content: center;
    margin-bottom: 14px;
}

.search-query-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 18px;
    background: rgba(112, 87, 224, 0.12);
    border: 1px solid rgba(190, 175, 255, 0.25);
    border-radius: 999px;
    font-size: 0.95rem;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}

.search-query-pill .pill-label {
    color: var(--text-color-secondary, #a8a8c0);
    font-size: 0.85rem;
}

.search-query-pill .pill-query {
    color: var(--accent-color, #beafff);
    font-weight: 800;
}

.search-empty-subtitle {
    max-width: 620px;
    margin: 0 auto 26px auto;
    font-size: 0.98rem;
    line-height: 1.6;
    color: var(--text-color-secondary, #a8a8c0);
}

.search-recovery-form {
    max-width: 580px;
    margin: 0 auto 26px auto;
    width: 100%;
}

.search-recovery-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
    background: rgba(15, 15, 26, 0.88);
    border: 2px solid rgba(255, 255, 255, 0.12);
    border-radius: 16px;
    padding: 6px 8px 6px 16px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.search-recovery-input-wrap:focus-within {
    border-color: var(--accent-color, #7057e0);
    box-shadow: 0 8px 28px rgba(112, 87, 224, 0.25);
}

.search-recovery-icon {
    color: var(--text-color-secondary, #a8a8c0);
    margin-right: 12px;
    flex-shrink: 0;
}

.search-recovery-input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    color: #ffffff;
    font-size: 1rem;
    font-family: inherit;
    min-width: 0;
}

.search-recovery-input::placeholder {
    color: rgba(255, 255, 255, 0.45);
}

.search-recovery-submit {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--accent-color, #7057e0);
    color: #140e2d !important;
    border: none;
    border-radius: 12px;
    padding: 10px 20px;
    font-weight: 700;
    font-size: 0.95rem;
    cursor: pointer;
    flex-shrink: 0;
    transition: transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.search-recovery-submit:hover {
    background: var(--accent-color-hover, #8870f0);
    color: #140e2d !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(112, 87, 224, 0.4);
}

@media (max-width: 540px) {
    .search-recovery-input-wrap {
        flex-direction: column;
        align-items: stretch;
        padding: 12px;
        gap: 10px;
    }
    .search-recovery-submit {
        justify-content: center;
        width: 100%;
    }
}

.search-quick-tags {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.quick-tags-label {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-color-secondary, #a8a8c0);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.quick-tags-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
}

.quick-tag-chip {
    display: inline-flex;
    align-items: center;
    padding: 7px 15px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 999px;
    color: var(--text-color-primary, #ffffff);
    text-decoration: none;
    font-size: 0.88rem;
    font-weight: 600;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.quick-tag-chip:hover {
    background: var(--accent-color, #7057e0);
    border-color: var(--accent-color, #7057e0);
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
}

.search-failed-carousels {
    display: flex;
    flex-direction: column;
    gap: 28px;
    width: 100%;
    margin-top: 8px;
    margin-bottom: 48px;
}

.search-failed-carousels .game-grid-section {
    margin: 0 !important;
}