/* Participating Games block (blocks/participating-games) */
.participating-games {
    padding: 3rem 1rem;
    text-align: center;
}
/* Scoped as ".participating-games .participating-games-title" (not just
   ".participating-games-title") so this reliably beats the theme's
   ".post-content h2, .post-content h3" rule in style.css / responsive.css,
   which targets these same h2 tags with higher specificity - without
   editing those shared stylesheets. Same font-size/weight/color as
   .how-it-works-title for visual consistency between the two blocks. */
.participating-games .participating-games-title {
    color: #fff;
    font-weight: 800;
    font-size: 30px;
    margin: 0 0 2rem;
}
.participating-games-row-wrap {
    position: relative;
    max-width: 1079px;
    margin: 0 auto;
}
.participating-games-row {
    display: flex;
    justify-content: center;
    align-items: stretch;
    gap: 1rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding-bottom: .25rem;
    cursor: grab;
}
.participating-games-row::-webkit-scrollbar {
    display: none;
}
.participating-games-row.is-dragging {
    cursor: grabbing;
    scroll-snap-type: none;
    user-select: none;
    -webkit-user-select: none;
}
/* Fades the row's edges into the background to hint that it scrolls -
   pure CSS gradients (no image assets), rendered as pseudo-elements on the
   non-scrolling wrapper so they stay pinned to the visible edges instead of
   scrolling away with the row's content. Purely decorative: sit on top of
   the row and ignore clicks. */
.participating-games-row-wrap::before,
.participating-games-row-wrap::after {
    content: '';
    position: absolute;
    inset-block-start: 0;
    block-size: 100%;
    inline-size: 80px;
    pointer-events: none;
    z-index: 2;
}
.participating-games-row-wrap::before {
    inset-inline-start: 0;
    background: linear-gradient(to right, var(--bg-color) 0%, transparent 100%);
}
.participating-games-row-wrap::after {
    inset-inline-end: 0;
    background: linear-gradient(to right, transparent 0%, var(--bg-color) 100%);
}
/* Sized so exactly 5 cards fit the visible row on desktop (2 on mobile,
   see the ≤576px override below) - any further cards keep scrolling past
   that and are what the edge gradients above fade out, hinting there's
   more to see. 4 gaps between 5 cards at the row's 1rem gap. */
.participating-games-card {
    display: block;
    flex: 0 0 calc((100% - 4rem) / 5);
    overflow: hidden;
    border-radius: 12px;
    scroll-snap-align: start;
}
.participating-games-image {
    display: block;
    inline-size: 100%;
    block-size: auto;
}
/* Scoped as ".participating-games .participating-games-cta" so this
   reliably beats the theme's ".post-content a" rule in style.css, which
   sets a[color] to gold and would otherwise make this button's text
   invisible against its own gold background - without editing style.css. */
.participating-games .participating-games-cta {
    display: inline-block;
    margin-top: 2rem;
    background: var(--yellow-span, #E2C562);
    color: #1A1400;
    font-weight: 700;
    font-size: 16px;
    text-decoration: none;
    padding: .75rem 2.5rem;
    border-radius: 12px;
}
.participating-games .participating-games-cta:hover {
    filter: brightness(1.05);
}

/* Mobile (matches the theme's established ≤576px breakpoint) */
@media (max-width: 576px) {
    .participating-games .participating-games-title {
        font-size: 20px;
        margin-bottom: 1.5rem;
    }
    .participating-games-row {
        justify-content: flex-start;
        gap: .75rem;
    }
    /* 2 cards visible per screen on mobile - 1 gap between them at the
       row's .75rem gap here. */
    .participating-games-card {
        flex-basis: calc((100% - .75rem) / 2);
    }
    .participating-games-row-wrap::before,
    .participating-games-row-wrap::after {
        inline-size: 48px;
    }
    .participating-games .participating-games-cta {
        font-size: 14px;
        padding: .625rem 2rem;
    }
}