@property --game-promo-angle {
    syntax: "<angle>";
    inherits: false;
    initial-value: 0deg;
}

@keyframes gamePromoFrameOrbit {
    to { --game-promo-angle: 360deg; }
}

.game-search-promo {
    --game-promo-angle: 0deg;
    position: sticky;
    top: 92px;
    z-index: 2;
    padding: 8px;
    overflow: hidden;
    border: 1px solid rgba(139, 243, 194, .58);
    border-radius: 14px;
    background: linear-gradient(145deg, rgba(13, 28, 39, .96), rgba(20, 36, 42, .98));
    box-shadow: 0 10px 28px rgba(0, 0, 0, .22), 0 0 18px rgba(76, 175, 150, .12);
}

@supports (background: conic-gradient(from 0deg, #123, #8bf3c2)) {
    .game-search-promo {
        border-color: transparent;
        background:
            linear-gradient(145deg, rgba(13, 28, 39, .96), rgba(20, 36, 42, .98)) padding-box,
            conic-gradient(from var(--game-promo-angle), rgba(76, 175, 80, .38), #8bf3c2, #4ddbe0, rgba(76, 175, 80, .38)) border-box;
        animation: gamePromoFrameOrbit 12s linear infinite;
    }
}

.game-search-promo-link,
.game-search-promo picture {
    display: block;
}

.game-search-promo-link {
    overflow: hidden;
    border-radius: 8px;
    line-height: 0;
}

.game-search-promo-link img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 8px;
    transition: filter .18s ease;
}

.game-search-promo-link:hover img {
    filter: brightness(1.05);
}

.game-search-promo-link:focus-visible {
    outline: 3px solid #ffd36b;
    outline-offset: 3px;
}

@media (max-width: 1023px) {
    .game-search-promo {
        position: static;
        top: auto;
    }
}

@media (prefers-reduced-motion: reduce) {
    .game-search-promo {
        animation: none;
        border-color: rgba(139, 243, 194, .58);
        background: linear-gradient(145deg, rgba(13, 28, 39, .96), rgba(20, 36, 42, .98));
    }

    .game-search-promo-link img {
        transition: none;
    }

    .game-search-promo-link:hover img {
        filter: none;
    }
}