:root {
    --green: #0b9a3d;
    --green-dark: #07712e;
    --lime: #b7ee2f;
    --blue: #1768e8;
    --purple: #6f38df;
    --orange: #ff6a18;
    --pink: #f14ba9;
    --text: #0b1230;
    --muted: #39445a;
    --card: #ffffff;
    --shadow: 0 16px 38px rgba(13, 26, 58, .13);
}

.games-page {
  max-width: 1780px;
  margin: 0 auto;
  padding: 14px;
}

.games-hero {
    min-height: 470px;
    display: grid;
    grid-template-columns: 42% 58%;
    overflow: hidden;
    border-radius: 18px;
    box-shadow: var(--shadow);
        background-image: url("../images/games-hero-bg.png");
    background-position: center right;
    background-size: cover;
    background-repeat: no-repeat;
}

.games-hero__content {
    position: relative;
    z-index: 2;
    padding: 58px 68px;
    color: #fff;
}

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(246, 255, 239, .95);
    color: var(--green-dark);
    padding: 10px 18px;
    border-radius: 999px;
    font-weight: 800;
    font-size: 18px;
}

.games-hero h1 {
    margin: 34px 0 22px;
    font-size: clamp(46px, 5.2vw, 74px);
    line-height: .98;
    letter-spacing: -1.5px;
}

.games-hero h1 span { color: var(--lime); }

.games-hero p {
    margin: 0 0 34px;
    max-width: 520px;
    color: rgba(255, 255, 255, .94);
    font-size: 24px;
    line-height: 1.35;
}

.games-hero__art {

}

.hero-mini-features {
    display: flex;
    gap: 34px;
    flex-wrap: wrap;
}

.hero-mini-features div {
    display: grid;
    gap: 4px;
}

.hero-mini-features strong {
    color: #fff;
    font-size: 18px;
}

.hero-mini-features span {
    color: rgba(255,255,255,.82);
    font-size: 15px;
}

.games-list-section {
    position: relative;
    z-index: 3;
    background: #fff;
    margin-top: -8px;
    border-radius: 34px 34px 0 0;
    padding: 38px 58px 0;
}

.section-heading {
    text-align: center;
    margin-bottom: 28px;
}

.section-heading h2 {
    margin: 0 0 8px;
    font-size: 42px;
    letter-spacing: -1px;
}

.section-heading p {
    margin: 0;
    font-size: 20px;
    color: var(--muted);
}

.section-heading strong { color: var(--green); }

.game-filters {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 22px;
    margin-bottom: 34px;
}

.game-filters button {
    min-height: 50px;
    border: 0;
    background: #fff;
    color: #1d2740;
    border-radius: 999px;
    padding: 0 28px;
    font-size: 18px;
    font-weight: 800;
    box-shadow: 0 8px 22px rgba(13, 26, 58, .12);
    cursor: pointer;
}

.game-filters button.active {
    color: #fff;
    background: linear-gradient(180deg, #36c54f, #179b35);
}

.games-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
}

.game-card {
    background: var(--card);
    border-radius: 18px;
    box-shadow: var(--shadow);
    overflow: hidden;
    padding: 12px;
    transition: transform .2s ease, box-shadow .2s ease;
}

.game-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 46px rgba(13, 26, 58, .18);
}

.game-card__image {
    height: 182px;
    border-radius: 14px;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.game-card__body {
    text-align: center;
    padding: 18px 12px 12px;
}

.game-card h3 {
    margin: 0 0 9px;
    font-size: 25px;
}

.game-card p {
    min-height: 46px;
    margin: 0 0 18px;
    color: var(--text);
    font-size: 16px;
    line-height: 1.35;
}

.preview-btn {
    display: inline-flex;
    width: 100%;
    justify-content: center;
    align-items: center;
    min-height: 48px;
    border-radius: 10px;
    background: #fff;
    border: 2px solid currentColor;
    color: inherit;
    text-decoration: none;
    font-weight: 900;
    font-size: 17px;
}

.game-card--purple h3, .game-card--purple .preview-btn { color: var(--purple); }
.game-card--blue h3, .game-card--blue .preview-btn { color: var(--blue); }
.game-card--orange h3, .game-card--orange .preview-btn { color: var(--orange); }
.game-card--green h3, .game-card--green .preview-btn { color: var(--green); }
.game-card--pink h3, .game-card--pink .preview-btn { color: var(--pink); }

.games-cta {
    margin-top: 32px;
    display: grid;
    grid-template-columns: 90px 1fr auto;
    gap: 24px;
    align-items: center;
    background: linear-gradient(90deg, #f1eafe, #f8f2ff);
    border-radius: 18px;
    padding: 26px 34px;
}

.games-cta__icon {
    width: 74px;
    height: 74px;
    display: grid;
    place-items: center;
    font-size: 46px;
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 8px 22px rgba(13, 26, 58, .12);
}

.games-cta h2 {
    margin: 0 0 5px;
    color: var(--purple);
    font-size: 30px;
}

.games-cta p {
    margin: 0;
    font-size: 18px;
    color: var(--text);
}

.cta-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 54px;
    padding: 0 34px;
    border-radius: 999px;
    color: #fff;
    background: linear-gradient(135deg, #7b36ef, #9c38ec);
    text-decoration: none;
    font-size: 18px;
    font-weight: 900;
    box-shadow: 0 10px 24px rgba(123, 54, 239, .25);
}

@media (max-width: 1100px) {
    .games-hero {
        grid-template-columns: 1fr;
        background:
            linear-gradient(90deg, rgba(6, 10, 38, .94), rgba(6, 10, 38, .55)),
            url("../images/games-hero-bg.png?v=2") center / cover no-repeat;
    }

    .games-hero__art { display: none; }

    .games-grid { grid-template-columns: repeat(2, 1fr); }

    .games-cta { grid-template-columns: 80px 1fr; }

    .cta-btn {
        grid-column: 1 / -1;
        justify-self: start;
    }
}

@media (max-width: 650px) {
    .games-page { padding-bottom: 20px; }

    .games-hero {
        min-height: auto;
        border-radius: 0 0 24px 24px;
    }

    .games-hero__content { padding: 38px 24px; }

    .games-hero p { font-size: 18px; }

    .games-list-section {
        padding: 28px 16px 0;
        border-radius: 24px 24px 0 0;
    }

    .section-heading h2 { font-size: 30px; }

    .game-filters { gap: 10px; }

    .game-filters button {
        font-size: 14px;
        padding: 0 16px;
    }

    .games-grid { grid-template-columns: 1fr; }

    .games-cta {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .games-cta__icon, .cta-btn { justify-self: center; }
}