/*
 * Géneros y ficha de videojuego.
 *
 * Se carga en TODAS las páginas de la tienda (no solo en la de producto)
 * porque los géneros también se muestran en las miniaturas de los listados.
 */


/* =========================================================
   01. GÉNEROS
   ========================================================= */

.rst-pe-genres {
    display: flex;
    justify-content: center;
    font-family: 'Atma', sans-serif;
}

ul.rst-pe-genres__list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 3px;
}

li.rst-pe-genres__item {
    display: flex;
    align-items: center;
    gap: 3px;
    padding: 1px;
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: var(--border-main-radius);
    font-size: .8rem;
}

span.rst-pe-genres__genre {
    padding: 2px;
}

ul.rst-pe-genres__sublist {
    display: flex;
    align-items: center;
    gap: 3px;
}

li.rst-pe-genres__subgenre {
    padding: 1px 6px;
    border-radius: var(--border-button-radius);
    background: linear-gradient(
        rgba(255, 255, 255, .1),
        rgba(255, 255, 255, .2)
    );
    white-space: nowrap;
}


/* =========================================================
   02. FICHA DEL VIDEOJUEGO
   ========================================================= */

/* Contenedor */

.rst-vg-info {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap-main);
    font-family: 'Atma', sans-serif;
}


/* =========================================================
   03. SECCIONES
   ========================================================= */

.rst-vg-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 5px;
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: var(--border-main-radius);
    backdrop-filter: blur(5px);
    gap: var(--gap-main);
}

.rst-vg-title {
    font-size: .8rem;
    text-transform: uppercase;
    opacity: .7;
}


/* =========================================================
   04. OPCIONES
   ========================================================= */

.rst-vg-options {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.rst-vg-option {
    display: flex;
    align-items: center;
    gap: 5px;
    color: white;
    flex-direction: column;
}


/* =========================================================
   05. IDIOMAS
   ========================================================= */

.rst-vg-option-group {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.rst-vg-flags {
    display: inline-flex;
    gap: 3px;
}

.rst-vg-flag {
    width: 24px;
    height: 16px;
    border-radius: 2px;
    object-fit: cover;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .25);
}

.rst-vg-role {
    white-space: nowrap;
}

.rst-vg-separator {
    opacity: .5;
}


/* =========================================================
   06. JUGADORES
   ========================================================= */

.rst-vg-options--players {
    gap: 5px;
}

.rst-vg-option--player {
    white-space: nowrap;
}

.rst-vg-option-value {
    font-weight: 600;
}

.rst-vg-option-label {
    white-space: nowrap;
}

.rst-vg-option-mode {
    opacity: .8;
}


/* =========================================================
   07. ACCESORIOS
   ========================================================= */

.rst-vg-option--with-image {
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 6px 8px;
    text-align: center;
}

.rst-vg-accessory-img {
    width: auto;
    height: 35px;
    max-width: 60px;
    object-fit: contain;
}

.rst-vg-option-name {
    text-align: center;
}


/* =========================================================
   08. RESPONSIVE
   ========================================================= */

@media (min-width: 768px) {

}


@media (min-width: 1200px) {

}