/* =====================================================
   GAMES & STEAM
   Steam games, provider icons, badges
===================================================== */

/* ===============================
   PROVIDER ICONS
================================ */

.provider-icon {
    width: 18px;
    height: 18px;
    background-size: contain;
    background-repeat: no-repeat;
    opacity: .85;
}

.provider-icon.steam {
    background-image: url('/assets/icons/providers/steam.svg');
}

.provider-icon.epic {
    background-image: url('/assets/icons/providers/epic.svg');
}

.provider-icon.rockstar {
    background-image: url('/assets/icons/providers/rockstar.svg');
}

.provider-icon.fivem {
    background-image: url('/assets/icons/providers/fivem.svg');
}

.provider-icon.ubisoft {
    background-image: url('/assets/icons/providers/ubisoft.svg');
}

.provider-icon.ea {
    background-image: url('/assets/icons/providers/ea.svg');
}

.provider-icon.battlenet {
    background-image: url('/assets/icons/providers/battlenet.svg');
}

.provider-icon.gog {
    background-image: url('/assets/icons/providers/gog.svg');
}

.provider-icon.custom {
    background-image: url('/assets/icons/providers/custom.svg');
}

/* ===============================
   STEAM GAME CARD
================================ */

.steam-game-image {
    width: 100%;
    border-radius: 14px;
    margin-bottom: 12px;
}

.is-top-game {
    box-shadow:
        0 0 25px rgba(255,48,80,0.35),
        inset 0 0 0 1px rgba(255,255,255,0.06);
}

.steam-separator {
    grid-column: 1 / -1;
    margin: 50px 0 35px;
    text-align: center;
    color: rgba(255,255,255,0.65);
    font-size: 13px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

/* ===============================
   BADGES
================================ */

.badge {
    position: absolute;
    top: 12px;
    left: 12px;
    padding: 5px 9px;

    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.5px;

    border-radius: 7px;
    color: #fff;
}

.badge-top {
    background: linear-gradient(135deg, #ff3050, #ff4d6d);
}

.badge-recent {
    background: linear-gradient(135deg, #ff6c6c, #ff4a4a);
}

.badge-other {
    background: linear-gradient(135deg, #ff3050, #ff4d6d);
}

.last-played {
    display: block;
    margin-top: 6px;
    font-size: 11px;
    opacity: 0.75;
}