/* Gana (gana.php): el escaparate de los juegos. Cada juego es una tarjeta con su
   icono (iconoSvg(), pintado con --acento, así que lo tiñen los temas). */

.gana__cabecera { max-width: 640px; margin-bottom: 28px; }
.gana__saldo { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 16px; }
.gana__mas { margin-top: 24px; }

.juegos { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); }

.juego {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    transition: border-color var(--transicion);
}
.juego:hover { border-color: color-mix(in srgb, var(--acento) 45%, var(--borde-fuerte)); }
.juego__icono svg { width: 72px; height: 72px; }
.icono-tragaperras { color: var(--acento); }
/* El título de una tarjeta de juego no es la etiqueta pequeña de .tarjeta h2. */
.juego h2 {
    margin-bottom: 4px;
    color: var(--texto);
    font-size: 1.25rem;
    font-weight: 600;
    letter-spacing: -.01em;
    text-transform: none;
}
.juego__texto p { margin: 0; }
.juego .boton,
.juego__parado { margin-top: auto; margin-left: 0; }
.juego--parado .juego__icono { opacity: .45; }

/* Con el ratón encima, el icono brilla y la rueda gira, como el icono del menú (base.css). */
.juego:not(.juego--parado):hover .juego__icono svg { filter: drop-shadow(0 0 8px color-mix(in srgb, var(--acento) 65%, transparent)); }
@media (prefers-reduced-motion: no-preference) {
    .juego:not(.juego--parado):hover .icono-ruleta__rueda { animation: icono-ruleta-giro 2.4s linear infinite; }
}