:root {
    --gp-bg: #0B0F14;
    --gp-bg-secondary: #111820;
    --gp-card: #161F29;
    --gp-lime: #B6FF00;
    --gp-lime-hover: #D6FF4D;
    --gp-blue: #18A8FF;
    --gp-white: #FFFFFF;
    --gp-text: #C8D1DA;
    --gp-muted: #8B98A8;
    --gp-line: rgba(200, 209, 218, 0.18);
}

.gameplays-single-game {
    min-height: 60vh;
    overflow: hidden;
    background: var(--gp-bg);
    color: var(--gp-white);
}

.gameplays-hero {
    --gameplays-hero-image: none;
    isolation: isolate;
    position: relative;
    min-height: clamp(690px, 82vh, 900px);
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    background: var(--gp-bg);
}

.gameplays-hero__image,
.gameplays-hero__backdrop,
.gameplays-hero__vignette,
.gameplays-hero__texture {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.gameplays-hero__image {
    z-index: -5;
    inset: -18px;
    background-color: var(--gp-bg-secondary);
    background-image: var(--gameplays-hero-image);
    background-position: center 28%;
    background-repeat: no-repeat;
    background-size: cover;
    filter: saturate(1.06) contrast(1.04) blur(2px);
    transform: scale(1.025);
}

.gameplays-hero--placeholder .gameplays-hero__image {
    background-image:
        radial-gradient(circle at 72% 22%, rgba(24, 168, 255, 0.24), transparent 35%),
        radial-gradient(circle at 18% 80%, rgba(182, 255, 0, 0.14), transparent 32%),
        linear-gradient(135deg, #111820, #0B0F14 70%);
    filter: none;
}

.gameplays-hero__backdrop {
    z-index: -4;
    background:
        linear-gradient(90deg, rgba(5, 7, 10, 0.98) 0%, rgba(5, 7, 10, 0.91) 34%, rgba(5, 7, 10, 0.58) 62%, rgba(5, 7, 10, 0.35) 100%),
        linear-gradient(0deg, #0B0F14 0%, rgba(11, 15, 20, 0.94) 12%, rgba(11, 15, 20, 0.28) 52%, rgba(0, 0, 0, 0.30) 100%);
}

.gameplays-hero__vignette {
    z-index: -3;
    box-shadow:
        inset 0 0 170px rgba(0, 0, 0, 0.88),
        inset 0 -90px 130px rgba(11, 15, 20, 0.82);
    background:
        radial-gradient(circle at 72% 45%, rgba(24, 168, 255, 0.08), transparent 27%),
        linear-gradient(118deg, transparent 58%, rgba(182, 255, 0, 0.055) 58.25%, transparent 59%);
}

.gameplays-hero__texture {
    z-index: -2;
    opacity: 0.25;
    mix-blend-mode: screen;
    background-image:
        repeating-linear-gradient(112deg, transparent 0 22px, rgba(255, 255, 255, 0.018) 23px, transparent 24px),
        linear-gradient(90deg, transparent 0 49.8%, rgba(24, 168, 255, 0.06) 50%, transparent 50.2%);
}

.gameplays-hero::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--gp-lime), var(--gp-blue) 58%, transparent 92%);
    box-shadow: 0 0 24px rgba(182, 255, 0, 0.25);
}

.gameplays-hero__inner {
    width: min(1460px, calc(100% - 64px));
    margin: 0 auto;
    padding: clamp(130px, 15vw, 220px) 0 clamp(72px, 8vw, 110px);
    display: grid;
    grid-template-columns: minmax(260px, 370px) minmax(0, 1fr);
    gap: clamp(48px, 6vw, 96px);
    align-items: end;
}

.gameplays-hero--no-cover .gameplays-hero__inner {
    grid-template-columns: minmax(0, 1040px);
}

.gameplays-hero__cover {
    position: relative;
    margin: 0;
    border-radius: 4px;
    filter: drop-shadow(0 34px 48px rgba(0, 0, 0, 0.66));
    transform: translateZ(0);
}

.gameplays-hero__cover-glow {
    position: absolute;
    inset: 8% 2% -7%;
    z-index: -1;
    border-radius: 22px;
    background: linear-gradient(145deg, rgba(182, 255, 0, 0.34), rgba(24, 168, 255, 0.22));
    filter: blur(28px);
    opacity: 0.78;
}

.gameplays-hero__cover img {
    display: block;
    width: 100%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    border-radius: 3px;
    background: var(--gp-card);
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.13),
        0 0 0 3px rgba(182, 255, 0, 0.08),
        0 28px 60px rgba(0, 0, 0, 0.55);
    clip-path: polygon(0 0, 100% 0, 100% 93%, 93% 100%, 0 100%);
}

.gameplays-hero__content {
    min-width: 0;
    max-width: 980px;
    padding-bottom: 4px;
}

.gameplays-hero__title {
    max-width: 1100px;
    margin: 0;
    color: var(--gp-white);
    font-size: clamp(3.3rem, 7vw, 7.6rem);
    font-weight: 950;
    line-height: 0.90;
    letter-spacing: -0.06em;
    text-wrap: balance;
    text-shadow: 0 7px 36px rgba(0, 0, 0, 0.72);
}

.gameplays-hero__summary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 18px 30px;
    margin-top: 34px;
}

.gameplays-hero__release {
    display: inline-flex;
    align-items: baseline;
    gap: 12px;
    margin: 0;
    color: var(--gp-white);
    font-size: 1rem;
    font-weight: 850;
}

.gameplays-hero__release-label {
    color: var(--gp-muted);
    font-size: 0.69rem;
    font-weight: 900;
    letter-spacing: 0.17em;
    text-transform: uppercase;
}

.gameplays-hero__status {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 38px;
    padding: 9px 14px;
    border: 1px solid rgba(182, 255, 0, 0.44);
    border-radius: 999px;
    background: rgba(11, 15, 20, 0.72);
    color: var(--gp-white);
    font-size: 0.76rem;
    font-weight: 900;
    letter-spacing: 0.075em;
    text-transform: uppercase;
    box-shadow: inset 0 0 18px rgba(182, 255, 0, 0.035), 0 0 22px rgba(182, 255, 0, 0.06);
    backdrop-filter: blur(14px);
}

.gameplays-hero__status-dot {
    width: 8px;
    height: 8px;
    flex: 0 0 8px;
    border-radius: 50%;
    background: var(--gp-lime);
    box-shadow: 0 0 15px var(--gp-lime);
}

.gameplays-hero__meta {
    display: grid;
    grid-template-columns: minmax(240px, 1.25fr) minmax(190px, 0.9fr) minmax(105px, auto);
    gap: 30px 44px;
    margin-top: 42px;
    padding-top: 30px;
    border-top: 1px solid var(--gp-line);
}

.gameplays-hero__meta-group {
    min-width: 0;
}

.gameplays-hero__meta-label {
    display: block;
    margin-bottom: 13px;
    color: var(--gp-muted);
    font-size: 0.67rem;
    font-weight: 900;
    letter-spacing: 0.17em;
    text-transform: uppercase;
}

.gameplays-hero__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
}

.gameplays-chip {
    display: inline-flex;
    align-items: center;
    min-height: 37px;
    padding: 8px 14px;
    border: 1px solid rgba(182, 255, 0, 0.52);
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(22, 31, 41, 0.92), rgba(11, 15, 20, 0.88));
    color: var(--gp-white);
    font-size: 0.78rem;
    font-weight: 820;
    line-height: 1.15;
    box-shadow: inset 0 0 16px rgba(182, 255, 0, 0.025), 0 0 16px rgba(182, 255, 0, 0.04);
    backdrop-filter: blur(10px);
    transition: transform 170ms ease, border-color 170ms ease, color 170ms ease, box-shadow 170ms ease, background 170ms ease;
}

.gameplays-chip:hover {
    transform: translateY(-2px) scale(1.02);
    border-color: var(--gp-lime-hover);
    color: var(--gp-lime-hover);
    background: rgba(22, 31, 41, 0.98);
    box-shadow: 0 0 18px rgba(182, 255, 0, 0.15);
}

.gameplays-chip--platform {
    border-color: rgba(24, 168, 255, 0.66);
    box-shadow: inset 0 0 16px rgba(24, 168, 255, 0.04), 0 0 18px rgba(24, 168, 255, 0.05);
}

.gameplays-chip--platform:hover {
    border-color: var(--gp-blue);
    color: var(--gp-white);
    box-shadow: 0 0 20px rgba(24, 168, 255, 0.20);
}

.gameplays-chip--genre {
    border-color: rgba(182, 255, 0, 0.45);
}

.gameplays-hero__pegi-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.gameplays-pegi {
    display: inline-grid;
    grid-template-columns: auto auto;
    align-items: stretch;
    overflow: hidden;
    min-height: 54px;
    border: 1px solid rgba(182, 255, 0, 0.60);
    border-radius: 4px;
    background: var(--gp-bg-secondary);
    box-shadow: 0 0 22px rgba(182, 255, 0, 0.08);
}

.gameplays-pegi__prefix {
    display: grid;
    place-items: center;
    padding: 0 9px;
    background: rgba(182, 255, 0, 0.10);
    color: var(--gp-lime);
    font-size: 0.58rem;
    font-weight: 950;
    letter-spacing: 0.12em;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
}

.gameplays-pegi__rating {
    display: grid;
    place-items: center;
    min-width: 58px;
    padding: 5px 12px;
    color: var(--gp-white);
    font-size: 1.45rem;
    font-weight: 950;
    line-height: 1;
}

.gameplays-screenshot-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1rem;
}

.gameplays-screenshot-grid figure { margin: 0; }
.gameplays-screenshot-grid img { display: block; width: 100%; height: auto; }
.gameplays-screenshot-grid figcaption { margin-top: 0.4rem; }
.gameplays-dlc-grid { display: grid; gap: 1rem; }
.gameplays-dlc-card { display: grid; grid-template-columns: minmax(120px, 220px) 1fr; gap: 1rem; }
.gameplays-dlc-card img { width: 100%; height: auto; }

@media (max-width: 1100px) {
    .gameplays-hero__inner {
        grid-template-columns: minmax(220px, 300px) minmax(0, 1fr);
        gap: 44px;
    }

    .gameplays-hero__meta {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .gameplays-hero__meta-group--pegi {
        grid-column: 1 / -1;
    }
}

@media (max-width: 820px) {
    .gameplays-hero {
        min-height: auto;
        align-items: stretch;
    }

    .gameplays-hero__image {
        background-position: center top;
        filter: saturate(1.04) contrast(1.03) blur(1px);
    }

    .gameplays-hero__backdrop {
        background:
            linear-gradient(0deg, #0B0F14 0%, rgba(11, 15, 20, 0.97) 42%, rgba(11, 15, 20, 0.42) 100%),
            linear-gradient(90deg, rgba(0, 0, 0, 0.58), rgba(0, 0, 0, 0.12));
    }

    .gameplays-hero__inner {
        width: min(100% - 36px, 720px);
        grid-template-columns: minmax(180px, 240px) minmax(0, 1fr);
        gap: 32px;
        padding-top: clamp(260px, 52vw, 430px);
        padding-bottom: 64px;
    }

    .gameplays-hero__title {
        font-size: clamp(2.8rem, 9vw, 5rem);
    }

    .gameplays-hero__meta {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .gameplays-hero__meta-group--pegi {
        grid-column: auto;
    }
}

@media (max-width: 620px) {
    .gameplays-hero__inner {
        width: min(100% - 28px, 520px);
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 30px;
        padding-top: clamp(225px, 68vw, 350px);
        padding-bottom: 52px;
    }

    .gameplays-hero__cover {
        width: min(56vw, 220px);
        align-self: center;
    }

    .gameplays-hero__content {
        width: 100%;
    }

    .gameplays-hero__title {
        text-align: center;
        font-size: clamp(2.65rem, 13vw, 4.25rem);
        line-height: 0.94;
    }

    .gameplays-hero__summary {
        justify-content: center;
        margin-top: 27px;
    }

    .gameplays-hero__release {
        justify-content: center;
    }

    .gameplays-hero__meta {
        gap: 22px;
        margin-top: 31px;
        padding-top: 26px;
    }

    .gameplays-hero__meta-label {
        text-align: center;
    }

    .gameplays-hero__chips,
    .gameplays-hero__pegi-list {
        justify-content: center;
    }

    .gameplays-dlc-card {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    .gameplays-chip {
        transition: none;
    }

    .gameplays-chip:hover {
        transform: none;
    }

    .gameplays-hero__status-dot {
        box-shadow: none;
    }
}


/* Featured Gameplay ------------------------------------------------------- */
.gameplays-gameplay {
    position: relative;
    padding: clamp(72px, 8vw, 120px) 0;
    background:
        radial-gradient(circle at 84% 4%, rgba(24, 168, 255, 0.09), transparent 30%),
        radial-gradient(circle at 8% 100%, rgba(182, 255, 0, 0.06), transparent 28%),
        var(--gp-bg);
}

.gameplays-gameplay__inner {
    width: min(1380px, calc(100% - 64px));
    margin: 0 auto;
}

.gameplays-gameplay__header {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 28px;
}

.gameplays-gameplay__eyebrow {
    display: block;
    margin-bottom: 9px;
    color: var(--gp-lime);
    font-size: 0.7rem;
    font-weight: 900;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.gameplays-gameplay__heading {
    margin: 0;
    color: var(--gp-white);
    font-size: clamp(2.4rem, 5vw, 4.9rem);
    font-weight: 950;
    line-height: 0.95;
    letter-spacing: -0.045em;
}

.gameplays-gameplay__label {
    display: inline-flex;
    align-items: center;
    min-height: 38px;
    padding: 9px 15px;
    border: 1px solid rgba(182, 255, 0, 0.48);
    border-radius: 999px;
    background: rgba(22, 31, 41, 0.82);
    color: var(--gp-lime);
    font-size: 0.7rem;
    font-weight: 900;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    box-shadow: 0 0 22px rgba(182, 255, 0, 0.08);
}

.gameplays-gameplay__card {
    position: relative;
    overflow: hidden;
    padding: clamp(18px, 2.5vw, 32px);
    border: 1px solid rgba(200, 209, 218, 0.14);
    border-radius: 18px;
    background: linear-gradient(145deg, rgba(22, 31, 41, 0.98), rgba(11, 15, 20, 0.98));
    box-shadow: 0 34px 80px rgba(0, 0, 0, 0.38), 0 0 35px rgba(24, 168, 255, 0.04);
}

.gameplays-gameplay__card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 2px;
    background: linear-gradient(90deg, var(--gp-lime), var(--gp-blue) 64%, transparent);
}

.gameplays-gameplay__title {
    margin: 0 0 20px;
    color: var(--gp-white);
    font-size: clamp(1.15rem, 2vw, 1.65rem);
    font-weight: 850;
    line-height: 1.25;
}

.gameplays-gameplay__video {
    position: relative;
    overflow: hidden;
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 12px;
    background: #000;
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.38);
}

.gameplays-gameplay__video iframe {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

.gameplays-gameplay__actions {
    display: flex;
    justify-content: flex-start;
    margin-top: 24px;
}

.gameplays-gameplay__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 50px;
    padding: 13px 22px;
    border: 1px solid var(--gp-lime);
    border-radius: 8px;
    background: var(--gp-lime);
    color: #0B0F14;
    font-size: 0.84rem;
    font-weight: 950;
    letter-spacing: 0.045em;
    text-decoration: none;
    text-transform: uppercase;
    box-shadow: 0 10px 30px rgba(182, 255, 0, 0.12);
    transition: transform 170ms ease, background 170ms ease, border-color 170ms ease, box-shadow 170ms ease;
}

.gameplays-gameplay__button:hover,
.gameplays-gameplay__button:focus-visible {
    transform: translateY(-2px);
    border-color: var(--gp-lime-hover);
    background: var(--gp-lime-hover);
    color: #0B0F14;
    box-shadow: 0 14px 34px rgba(182, 255, 0, 0.22);
}

.gameplays-gameplay__empty {
    position: relative;
    display: flex;
    align-items: center;
    gap: 18px;
    min-height: 150px;
    padding: clamp(26px, 4vw, 48px);
    overflow: hidden;
    border: 1px solid rgba(200, 209, 218, 0.14);
    border-radius: 18px;
    background: linear-gradient(145deg, rgba(22, 31, 41, 0.96), rgba(11, 15, 20, 0.98));
    box-shadow: 0 28px 70px rgba(0, 0, 0, 0.28);
}

.gameplays-gameplay__empty::after {
    content: "";
    position: absolute;
    right: -70px;
    top: -100px;
    width: 250px;
    height: 250px;
    border-radius: 50%;
    background: rgba(24, 168, 255, 0.08);
    filter: blur(12px);
}

.gameplays-gameplay__empty-accent {
    width: 5px;
    height: 54px;
    flex: 0 0 5px;
    border-radius: 999px;
    background: linear-gradient(180deg, var(--gp-lime), var(--gp-blue));
    box-shadow: 0 0 20px rgba(182, 255, 0, 0.2);
}

.gameplays-gameplay__empty p {
    position: relative;
    z-index: 1;
    margin: 0;
    color: var(--gp-text);
    font-size: clamp(1rem, 2vw, 1.25rem);
    font-weight: 720;
}

@media (max-width: 820px) {
    .gameplays-gameplay__inner {
        width: min(100% - 36px, 1380px);
    }

    .gameplays-gameplay__header {
        align-items: flex-start;
        flex-direction: column;
        gap: 16px;
    }
}

@media (max-width: 520px) {
    .gameplays-gameplay {
        padding: 58px 0 70px;
    }

    .gameplays-gameplay__inner {
        width: min(100% - 24px, 1380px);
    }

    .gameplays-gameplay__card {
        padding: 12px;
        border-radius: 12px;
    }

    .gameplays-gameplay__video {
        border-radius: 8px;
    }

    .gameplays-gameplay__actions,
    .gameplays-gameplay__button {
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .gameplays-gameplay__button {
        transition: none;
    }
}


/* Official Trailer -------------------------------------------------------- */
.gameplays-trailer {
    position: relative;
    padding: clamp(64px, 7vw, 108px) 0 clamp(78px, 8vw, 124px);
    background:
        radial-gradient(circle at 10% 8%, rgba(24, 168, 255, 0.07), transparent 28%),
        radial-gradient(circle at 92% 92%, rgba(182, 255, 0, 0.045), transparent 26%),
        var(--gp-bg-secondary);
}

.gameplays-trailer__inner {
    width: min(1380px, calc(100% - 64px));
    margin: 0 auto;
}

.gameplays-trailer__header {
    margin-bottom: 28px;
}

.gameplays-trailer__eyebrow {
    display: block;
    margin-bottom: 9px;
    color: var(--gp-lime);
    font-size: 0.7rem;
    font-weight: 900;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.gameplays-trailer__heading {
    margin: 0;
    color: var(--gp-white);
    font-size: clamp(2.25rem, 4.5vw, 4.35rem);
    font-weight: 950;
    line-height: 0.98;
    letter-spacing: -0.04em;
}

.gameplays-trailer__card {
    position: relative;
    overflow: hidden;
    padding: clamp(18px, 2.5vw, 32px);
    border: 1px solid rgba(200, 209, 218, 0.13);
    border-radius: 18px;
    background: linear-gradient(145deg, rgba(22, 31, 41, 0.97), rgba(11, 15, 20, 0.99));
    box-shadow: 0 30px 74px rgba(0, 0, 0, 0.34), 0 0 32px rgba(24, 168, 255, 0.035);
}

.gameplays-trailer__card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 2px;
    background: linear-gradient(90deg, var(--gp-blue), var(--gp-lime) 64%, transparent);
}

.gameplays-trailer__video {
    position: relative;
    overflow: hidden;
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 12px;
    background: #000;
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.36);
}

.gameplays-trailer__video iframe {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

.gameplays-trailer__actions {
    display: flex;
    justify-content: flex-start;
    margin-top: 24px;
}

.gameplays-trailer__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 50px;
    padding: 13px 22px;
    border: 1px solid var(--gp-lime);
    border-radius: 8px;
    background: var(--gp-lime);
    color: #0B0F14;
    font-size: 0.84rem;
    font-weight: 950;
    letter-spacing: 0.045em;
    text-decoration: none;
    text-transform: uppercase;
    box-shadow: 0 10px 30px rgba(182, 255, 0, 0.12);
    transition: transform 170ms ease, background 170ms ease, border-color 170ms ease, box-shadow 170ms ease;
}

.gameplays-trailer__button:hover,
.gameplays-trailer__button:focus-visible {
    transform: translateY(-2px);
    border-color: var(--gp-lime-hover);
    background: var(--gp-lime-hover);
    color: #0B0F14;
    box-shadow: 0 14px 34px rgba(182, 255, 0, 0.22);
}

.gameplays-trailer__empty {
    position: relative;
    display: flex;
    align-items: center;
    gap: 18px;
    min-height: 150px;
    padding: clamp(26px, 4vw, 48px);
    overflow: hidden;
    border: 1px solid rgba(200, 209, 218, 0.13);
    border-radius: 18px;
    background: linear-gradient(145deg, rgba(22, 31, 41, 0.96), rgba(11, 15, 20, 0.98));
    box-shadow: 0 28px 70px rgba(0, 0, 0, 0.26);
}

.gameplays-trailer__empty::after {
    content: "";
    position: absolute;
    right: -70px;
    top: -100px;
    width: 250px;
    height: 250px;
    border-radius: 50%;
    background: rgba(24, 168, 255, 0.07);
    filter: blur(12px);
}

.gameplays-trailer__empty-accent {
    width: 5px;
    height: 54px;
    flex: 0 0 5px;
    border-radius: 999px;
    background: linear-gradient(180deg, var(--gp-blue), var(--gp-lime));
    box-shadow: 0 0 20px rgba(24, 168, 255, 0.18);
}

.gameplays-trailer__empty p {
    position: relative;
    z-index: 1;
    margin: 0;
    color: var(--gp-text);
    font-size: clamp(1rem, 2vw, 1.25rem);
    font-weight: 720;
}

@media (max-width: 820px) {
    .gameplays-trailer__inner {
        width: min(100% - 36px, 1380px);
    }
}

@media (max-width: 520px) {
    .gameplays-trailer {
        padding: 54px 0 70px;
    }

    .gameplays-trailer__inner {
        width: min(100% - 24px, 1380px);
    }

    .gameplays-trailer__card {
        padding: 12px;
        border-radius: 12px;
    }

    .gameplays-trailer__video {
        border-radius: 8px;
    }

    .gameplays-trailer__actions,
    .gameplays-trailer__button {
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .gameplays-trailer__button {
        transition: none;
    }
}

/* Game Information ------------------------------------------------------- */
.gameplays-information {
    position: relative;
    padding: clamp(56px, 7vw, 92px) 0 clamp(64px, 8vw, 104px);
    overflow: hidden;
    background:
        radial-gradient(circle at 100% 0%, rgba(24, 168, 255, 0.055), transparent 32%),
        radial-gradient(circle at 0% 100%, rgba(182, 255, 0, 0.04), transparent 30%),
        var(--gp-bg);
}

.gameplays-information__inner {
    width: min(100% - 48px, 1380px);
    margin: 0 auto;
}

.gameplays-information__header {
    margin-bottom: clamp(24px, 3vw, 34px);
}

.gameplays-information__eyebrow {
    display: block;
    margin-bottom: 12px;
    color: var(--gp-lime);
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.gameplays-information__heading {
    margin: 0;
    color: var(--gp-white);
    font-size: clamp(2.25rem, 4.5vw, 4.35rem);
    font-weight: 950;
    line-height: 0.98;
    letter-spacing: -0.04em;
}

.gameplays-information__card {
    position: relative;
    overflow: hidden;
    padding: clamp(20px, 2.4vw, 30px);
    border: 1px solid rgba(200, 209, 218, 0.13);
    border-radius: 18px;
    background: linear-gradient(145deg, rgba(22, 31, 41, 0.98), rgba(11, 15, 20, 0.99));
    box-shadow: 0 26px 62px rgba(0, 0, 0, 0.3), 0 0 28px rgba(182, 255, 0, 0.02);
}

.gameplays-information__card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 2px;
    background: linear-gradient(90deg, var(--gp-lime), var(--gp-blue) 66%, transparent);
}

.gameplays-information__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.gameplays-information__grid--primary {
    gap: 12px;
}

.gameplays-information__item {
    min-width: 0;
    min-height: 0;
    padding: 15px 18px;
    border: 1px solid rgba(200, 209, 218, 0.09);
    border-radius: 10px;
    background: rgba(11, 15, 20, 0.38);
    transition: transform 170ms ease, border-color 170ms ease, background 170ms ease, box-shadow 170ms ease;
}

.gameplays-information__item:hover {
    transform: translateY(-1px);
    border-color: rgba(182, 255, 0, 0.19);
    background: rgba(17, 24, 32, 0.68);
    box-shadow: 0 9px 22px rgba(0, 0, 0, 0.14);
}

.gameplays-information__item--primary {
    border-left: 2px solid rgba(182, 255, 0, 0.55);
}

.gameplays-information__item--secondary {
    opacity: 0.92;
    border-left: 2px solid rgba(24, 168, 255, 0.42);
}

.gameplays-information__item--wide {
    grid-column: 1 / -1;
}

.gameplays-information__label {
    display: block;
    margin-bottom: 6px;
    color: var(--gp-muted);
    font-size: 0.64rem;
    font-weight: 900;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.gameplays-information__value {
    min-width: 0;
    color: var(--gp-white);
    font-size: clamp(0.96rem, 1.15vw, 1.08rem);
    font-weight: 760;
    line-height: 1.35;
}

.gameplays-information__chips,
.gameplays-information__pegi-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.gameplays-information__chips .gameplays-chip {
    min-height: 30px;
    padding: 6px 12px;
    font-size: 0.7rem;
}

.gameplays-information__divider {
    height: 1px;
    margin: 18px 0;
    background: linear-gradient(90deg, transparent, rgba(200, 209, 218, 0.16) 10%, rgba(200, 209, 218, 0.16) 90%, transparent);
}

.gameplays-information__boolean {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.gameplays-information__boolean::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--gp-muted);
    box-shadow: 0 0 10px rgba(139, 152, 168, 0.16);
}

.gameplays-information__boolean.is-yes::before {
    background: var(--gp-lime);
    box-shadow: 0 0 13px rgba(182, 255, 0, 0.26);
}

.gameplays-information__boolean.is-no::before {
    background: var(--gp-muted);
}

.gameplays-information__website {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 9px 16px;
    border: 1px solid var(--gp-lime);
    border-radius: 7px;
    background: var(--gp-lime);
    color: var(--gp-bg);
    font-size: 0.72rem;
    font-weight: 950;
    letter-spacing: 0.04em;
    text-decoration: none;
    text-transform: uppercase;
    box-shadow: 0 8px 22px rgba(182, 255, 0, 0.1);
    transition: transform 170ms ease, background 170ms ease, border-color 170ms ease, box-shadow 170ms ease;
}

.gameplays-information__website:hover,
.gameplays-information__website:focus-visible {
    transform: translateY(-2px);
    border-color: var(--gp-lime-hover);
    background: var(--gp-lime-hover);
    color: var(--gp-bg);
    box-shadow: 0 12px 28px rgba(182, 255, 0, 0.2);
}

@media (max-width: 820px) {
    .gameplays-information__inner {
        width: min(100% - 36px, 1380px);
    }
}

@media (max-width: 680px) {
    .gameplays-information__grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .gameplays-information__item--wide {
        grid-column: auto;
    }
}

@media (max-width: 520px) {
    .gameplays-information {
        padding: 50px 0 68px;
    }

    .gameplays-information__inner {
        width: min(100% - 24px, 1380px);
    }

    .gameplays-information__header {
        margin-bottom: 22px;
    }

    .gameplays-information__card {
        padding: 12px;
        border-radius: 12px;
    }

    .gameplays-information__grid {
        gap: 9px;
    }

    .gameplays-information__item {
        padding: 14px 15px;
        border-radius: 8px;
    }

    .gameplays-information__divider {
        margin: 14px 0;
    }

    .gameplays-information__website {
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .gameplays-information__item,
    .gameplays-information__website {
        transition: none;
    }
}

/* Gameplay Highlights ----------------------------------------------------- */
.gameplays-highlights {
    position: relative;
    padding: clamp(58px, 7vw, 94px) 0 clamp(68px, 8vw, 108px);
    overflow: hidden;
    background:
        radial-gradient(circle at 92% 8%, rgba(24, 168, 255, 0.06), transparent 32%),
        radial-gradient(circle at 8% 92%, rgba(182, 255, 0, 0.045), transparent 30%),
        var(--gp-bg-secondary);
}

.gameplays-highlights__inner {
    width: min(100% - 48px, 1380px);
    margin: 0 auto;
}

.gameplays-highlights__header {
    margin-bottom: clamp(24px, 3vw, 34px);
}

.gameplays-highlights__eyebrow {
    display: block;
    margin-bottom: 12px;
    color: var(--gp-lime);
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.gameplays-highlights__heading {
    margin: 0;
    color: var(--gp-white);
    font-size: clamp(2.25rem, 4.5vw, 4.35rem);
    font-weight: 950;
    line-height: 0.98;
    letter-spacing: -0.04em;
}

.gameplays-highlights__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(16px, 2vw, 24px);
}

.gameplays-highlight-card {
    min-width: 0;
    overflow: hidden;
    border: 1px solid rgba(200, 209, 218, 0.13);
    border-radius: 16px;
    background: linear-gradient(145deg, rgba(22, 31, 41, 0.98), rgba(11, 15, 20, 0.99));
    box-shadow: 0 22px 48px rgba(0, 0, 0, 0.26);
    transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.gameplays-highlight-card:hover,
.gameplays-highlight-card:focus-within {
    transform: translateY(-4px);
    border-color: rgba(182, 255, 0, 0.34);
    box-shadow: 0 28px 56px rgba(0, 0, 0, 0.34), 0 0 28px rgba(182, 255, 0, 0.06);
}

.gameplays-highlight-card__media {
    position: relative;
    display: block;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    background: var(--gp-bg);
    text-decoration: none;
}

.gameplays-highlight-card__thumbnail {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.001);
    transition: transform 260ms ease, filter 260ms ease;
}

.gameplays-highlight-card:hover .gameplays-highlight-card__thumbnail,
.gameplays-highlight-card:focus-within .gameplays-highlight-card__thumbnail {
    transform: scale(1.035);
    filter: brightness(0.82);
}

.gameplays-highlight-card__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 48%, rgba(5, 8, 12, 0.76));
    pointer-events: none;
}

.gameplays-highlight-card__play {
    position: absolute;
    z-index: 2;
    top: 50%;
    left: 50%;
    display: grid;
    width: 56px;
    height: 56px;
    place-items: center;
    border: 1px solid rgba(182, 255, 0, 0.7);
    border-radius: 50%;
    background: rgba(11, 15, 20, 0.86);
    box-shadow: 0 0 24px rgba(182, 255, 0, 0.18);
    transform: translate(-50%, -50%);
    transition: transform 180ms ease, background 180ms ease, box-shadow 180ms ease;
}

.gameplays-highlight-card__play span {
    display: block;
    width: 0;
    height: 0;
    margin-left: 4px;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-left: 13px solid var(--gp-lime);
}

.gameplays-highlight-card:hover .gameplays-highlight-card__play,
.gameplays-highlight-card:focus-within .gameplays-highlight-card__play {
    background: var(--gp-lime);
    box-shadow: 0 0 32px rgba(182, 255, 0, 0.3);
    transform: translate(-50%, -50%) scale(1.06);
}

.gameplays-highlight-card:hover .gameplays-highlight-card__play span,
.gameplays-highlight-card:focus-within .gameplays-highlight-card__play span {
    border-left-color: var(--gp-bg);
}

.gameplays-highlight-card__label {
    position: absolute;
    z-index: 2;
    top: 14px;
    right: 14px;
    padding: 6px 10px;
    border: 1px solid rgba(182, 255, 0, 0.55);
    border-radius: 999px;
    background: rgba(11, 15, 20, 0.88);
    color: var(--gp-lime);
    font-size: 0.64rem;
    font-weight: 950;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.gameplays-highlight-card__body {
    display: flex;
    min-height: 154px;
    flex-direction: column;
    align-items: flex-start;
    padding: 18px;
}

.gameplays-highlight-card__title {
    margin: 0 0 18px;
    color: var(--gp-white);
    font-size: clamp(1rem, 1.35vw, 1.2rem);
    font-weight: 850;
    line-height: 1.3;
}

.gameplays-highlight-card__button {
    display: inline-flex;
    min-height: 38px;
    margin-top: auto;
    align-items: center;
    justify-content: center;
    padding: 8px 14px;
    border: 1px solid var(--gp-lime);
    border-radius: 7px;
    background: transparent;
    color: var(--gp-lime);
    font-size: 0.68rem;
    font-weight: 950;
    letter-spacing: 0.05em;
    text-decoration: none;
    text-transform: uppercase;
    transition: transform 170ms ease, background 170ms ease, color 170ms ease, box-shadow 170ms ease;
}

.gameplays-highlight-card__button:hover,
.gameplays-highlight-card__button:focus-visible {
    transform: translateY(-2px);
    background: var(--gp-lime-hover);
    color: var(--gp-bg);
    box-shadow: 0 10px 24px rgba(182, 255, 0, 0.16);
}

.gameplays-highlights__empty {
    display: flex;
    min-height: 126px;
    align-items: center;
    gap: 16px;
    padding: 24px 28px;
    border: 1px solid rgba(200, 209, 218, 0.13);
    border-radius: 14px;
    background: linear-gradient(145deg, rgba(22, 31, 41, 0.98), rgba(11, 15, 20, 0.99));
    color: var(--gp-text);
    box-shadow: 0 20px 46px rgba(0, 0, 0, 0.22);
}

.gameplays-highlights__empty p {
    margin: 0;
}

.gameplays-highlights__empty-accent {
    width: 4px;
    height: 48px;
    flex: 0 0 auto;
    border-radius: 99px;
    background: linear-gradient(180deg, var(--gp-lime), var(--gp-blue));
}

@media (max-width: 940px) {
    .gameplays-highlights__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 680px) {
    .gameplays-highlights__grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 520px) {
    .gameplays-highlights {
        padding: 50px 0 68px;
    }

    .gameplays-highlights__inner {
        width: min(100% - 24px, 1380px);
    }

    .gameplays-highlight-card__body {
        min-height: 0;
        padding: 16px;
    }

    .gameplays-highlight-card__button {
        width: 100%;
    }

    .gameplays-highlights__empty {
        padding: 20px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .gameplays-highlight-card,
    .gameplays-highlight-card__thumbnail,
    .gameplays-highlight-card__play,
    .gameplays-highlight-card__button {
        transition: none;
    }
}

/* v2.0.7 Content Hierarchy Polish ----------------------------------------- */
:root {
    --gp-action-height: 44px;
    --gp-action-radius: 7px;
    --gp-action-padding-x: 18px;
    --gp-action-font-size: 0.72rem;
}

/* Keep first-party gameplay visually dominant, while tightening the flow. */
.gameplays-gameplay {
    padding: clamp(68px, 7vw, 108px) 0 clamp(54px, 6vw, 82px);
}

.gameplays-highlights {
    padding: clamp(48px, 5.5vw, 76px) 0 clamp(54px, 6vw, 84px);
}

.gameplays-highlights__header {
    margin-bottom: clamp(20px, 2.2vw, 28px);
}

/* Larger, better balanced highlight cards without changing their content. */
.gameplays-highlights__grid {
    grid-template-columns: repeat(3, minmax(300px, 1fr));
    gap: clamp(20px, 2.2vw, 30px);
}

.gameplays-highlight-card {
    min-height: 100%;
    border-radius: 18px;
}

.gameplays-highlight-card__media {
    aspect-ratio: 16 / 9;
}

.gameplays-highlight-card__body {
    min-height: 174px;
    padding: 21px 22px 22px;
}

.gameplays-highlight-card__title {
    margin-bottom: 22px;
    font-size: clamp(1.08rem, 1.45vw, 1.28rem);
    line-height: 1.34;
}

.gameplays-highlight-card__play {
    width: 62px;
    height: 62px;
}

/* Publisher content remains clearly secondary to Gameplays.nl gameplay. */
.gameplays-trailer {
    padding: clamp(48px, 5.5vw, 76px) 0 clamp(54px, 6vw, 84px);
}

.gameplays-trailer__inner {
    width: min(1120px, calc(100% - 64px));
}

.gameplays-trailer__header {
    margin-bottom: 22px;
}

.gameplays-trailer__heading {
    font-size: clamp(2.1rem, 3.8vw, 3.75rem);
}

.gameplays-trailer__card {
    padding: clamp(15px, 2vw, 24px);
    border-radius: 16px;
}

.gameplays-trailer__actions {
    margin-top: 18px;
}

/* Information is a concise reference panel, not a competing feature block. */
.gameplays-information {
    padding: clamp(46px, 5vw, 70px) 0 clamp(54px, 6vw, 82px);
}

.gameplays-information__header {
    margin-bottom: clamp(18px, 2vw, 25px);
}

.gameplays-information__heading {
    font-size: clamp(2rem, 3.7vw, 3.65rem);
}

.gameplays-information__card {
    padding: clamp(14px, 1.7vw, 21px);
    border-radius: 16px;
}

.gameplays-information__grid,
.gameplays-information__grid--primary {
    gap: 9px;
}

.gameplays-information__item {
    padding: 11px 14px;
    border-radius: 8px;
}

.gameplays-information__label {
    margin-bottom: 4px;
    font-size: 0.6rem;
}

.gameplays-information__value {
    font-size: clamp(0.9rem, 1vw, 1rem);
    line-height: 1.28;
}

.gameplays-information__chips,
.gameplays-information__pegi-list {
    gap: 6px;
}

.gameplays-information__chips .gameplays-chip {
    min-height: 27px;
    padding: 5px 10px;
    font-size: 0.66rem;
}

.gameplays-information__divider {
    margin: 12px 0;
}

.gameplays-information__boolean {
    gap: 7px;
}

.gameplays-information__boolean::before {
    width: 7px;
    height: 7px;
}

/* Consistent primary action language across all existing sections. */
.gameplays-gameplay__button,
.gameplays-trailer__button,
.gameplays-information__website,
.gameplays-highlight-card__button {
    min-height: var(--gp-action-height);
    padding: 10px var(--gp-action-padding-x);
    border-radius: var(--gp-action-radius);
    font-size: var(--gp-action-font-size);
    line-height: 1;
}

.gameplays-gameplay__button {
    min-height: 48px;
    padding-inline: 21px;
    font-size: 0.78rem;
}

.gameplays-trailer__button {
    min-height: 42px;
    padding-inline: 16px;
    font-size: 0.69rem;
}

.gameplays-highlight-card__button {
    background: transparent;
}

@media (max-width: 1100px) {
    .gameplays-highlights__grid {
        grid-template-columns: repeat(2, minmax(280px, 1fr));
    }
}

@media (max-width: 820px) {
    .gameplays-trailer__inner {
        width: min(100% - 36px, 1120px);
    }
}

@media (max-width: 680px) {
    .gameplays-highlights__grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .gameplays-highlight-card__body {
        min-height: 0;
    }
}

@media (max-width: 520px) {
    .gameplays-gameplay,
    .gameplays-highlights,
    .gameplays-trailer,
    .gameplays-information {
        padding-top: 48px;
        padding-bottom: 60px;
    }

    .gameplays-trailer__inner {
        width: min(100% - 24px, 1120px);
    }

    .gameplays-information__card {
        padding: 10px;
    }

    .gameplays-information__item {
        padding: 11px 12px;
    }
}

/* v2.0.7.1 Final Layout Polish ------------------------------------------- */
/* First-party highlights use available space intelligently at every count. */
.gameplays-highlights__grid--one {
    grid-template-columns: minmax(0, 720px);
    justify-content: start;
}

.gameplays-highlights__grid--two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 1040px;
}

.gameplays-highlights__grid--many {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.gameplays-highlight-card__media {
    min-height: 220px;
}

.gameplays-highlight-card__body {
    min-height: 184px;
    padding: 23px 24px 24px;
}

.gameplays-highlight-card__title {
    font-size: clamp(1.14rem, 1.55vw, 1.34rem);
}

/* Keep the section containers aligned, while making publisher media quieter. */
.gameplays-trailer__inner {
    width: min(100% - 48px, 1380px);
}

.gameplays-trailer__card {
    padding: clamp(14px, 1.6vw, 20px);
    background: linear-gradient(145deg, rgba(18, 26, 35, 0.96), rgba(11, 15, 20, 0.98));
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.24);
}

.gameplays-trailer__video,
.gameplays-trailer__actions {
    width: min(100%, 980px);
    margin-inline: auto;
}

.gameplays-trailer__actions {
    margin-top: 14px;
}

.gameplays-trailer__button {
    min-height: 40px;
    padding-inline: 15px;
    font-size: 0.67rem;
}

/* Information remains scannable but behaves as one concise reference panel. */
.gameplays-information__card {
    padding: clamp(10px, 1.25vw, 16px);
}

.gameplays-information__grid,
.gameplays-information__grid--primary {
    gap: 7px;
}

.gameplays-information__item {
    min-height: 0;
    padding: 9px 12px;
    background: rgba(17, 24, 32, 0.56);
}

.gameplays-information__grid--primary .gameplays-information__item {
    border-color: rgba(24, 168, 255, 0.15);
}

.gameplays-information__grid--secondary .gameplays-information__item {
    border-color: rgba(200, 209, 218, 0.08);
    background: rgba(11, 15, 20, 0.42);
}

.gameplays-information__label {
    margin-bottom: 3px;
}

.gameplays-information__divider {
    margin: 9px 0;
    opacity: 0.72;
}

.gameplays-information__chips,
.gameplays-information__pegi-list {
    gap: 5px;
}

.gameplays-information__chips .gameplays-chip {
    min-height: 25px;
    padding: 4px 9px;
}

.gameplays-information__website {
    min-height: 40px;
    padding-inline: 15px;
    font-size: 0.67rem;
}

/* Tighten the narrative flow without collapsing section identity. */
.gameplays-gameplay {
    padding-bottom: clamp(42px, 4.5vw, 64px);
}

.gameplays-highlights {
    padding-top: clamp(40px, 4.5vw, 62px);
    padding-bottom: clamp(42px, 4.5vw, 64px);
}

.gameplays-trailer {
    padding-top: clamp(40px, 4.5vw, 62px);
    padding-bottom: clamp(40px, 4.5vw, 62px);
}

.gameplays-information {
    padding-top: clamp(38px, 4vw, 56px);
}

@media (max-width: 1100px) {
    .gameplays-highlights__grid--many,
    .gameplays-highlights__grid--two {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        max-width: none;
    }

    .gameplays-highlights__grid--one {
        grid-template-columns: minmax(0, 620px);
    }
}

@media (max-width: 680px) {
    .gameplays-highlights__grid--one,
    .gameplays-highlights__grid--two,
    .gameplays-highlights__grid--many {
        grid-template-columns: minmax(0, 1fr);
        max-width: none;
    }

    .gameplays-highlight-card__media {
        min-height: 0;
    }

    .gameplays-highlight-card__body {
        min-height: 0;
        padding: 18px;
    }

    .gameplays-trailer__inner {
        width: min(100% - 24px, 1380px);
    }

    .gameplays-information__card {
        padding: 9px;
    }
}

/* Screenshots gallery */
.gameplays-screenshots {
    padding: clamp(38px, 4vw, 58px) 0 clamp(62px, 6vw, 90px);
    background: #0B0F14;
}

.gameplays-screenshots__inner {
    width: min(100% - 40px, 1380px);
    margin-inline: auto;
}

.gameplays-screenshots__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(14px, 1.5vw, 22px);
}

.gameplays-screenshot {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    padding: 0;
    overflow: hidden;
    border: 1px solid rgba(24, 168, 255, 0.18);
    border-radius: 16px;
    background: #161F29;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.24);
    cursor: pointer;
}

.gameplays-screenshot__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 220ms ease, filter 220ms ease;
}

.gameplays-screenshot:hover,
.gameplays-screenshot:focus-visible {
    border-color: rgba(182, 255, 0, 0.62);
    box-shadow: 0 20px 48px rgba(0, 0, 0, 0.32), 0 0 24px rgba(182, 255, 0, 0.09);
}

.gameplays-screenshot:hover .gameplays-screenshot__image,
.gameplays-screenshot:focus-visible .gameplays-screenshot__image {
    transform: scale(1.035);
    filter: saturate(1.06);
}

.gameplays-lightbox[hidden] { display: none; }

.gameplays-lightbox {
    position: fixed;
    inset: 0;
    z-index: 999999;
    display: grid;
    place-items: center;
    padding: clamp(16px, 3vw, 42px);
}

.gameplays-lightbox__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(3, 7, 11, 0.94);
    backdrop-filter: blur(8px);
}

.gameplays-lightbox__dialog {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    width: min(96vw, 1500px);
    max-height: 92vh;
}

.gameplays-lightbox__figure { margin: 0; min-width: 0; text-align: center; }
.gameplays-lightbox__image { max-width: 100%; max-height: 84vh; object-fit: contain; border-radius: 12px; box-shadow: 0 30px 90px rgba(0,0,0,.7); }
.gameplays-lightbox__caption { margin-top: 10px; color: #C8D1DA; }
.gameplays-lightbox__close,
.gameplays-lightbox__nav {
    border: 1px solid rgba(255,255,255,.18);
    background: rgba(17,24,32,.86);
    color: #fff;
    cursor: pointer;
    transition: border-color 180ms ease, color 180ms ease, transform 180ms ease;
}
.gameplays-lightbox__close:hover,
.gameplays-lightbox__nav:hover { color: #B6FF00; border-color: rgba(182,255,0,.62); transform: scale(1.04); }
.gameplays-lightbox__close { position: absolute; top: -12px; right: 0; z-index: 2; width: 46px; height: 46px; border-radius: 50%; font-size: 30px; line-height: 1; }
.gameplays-lightbox__nav { width: 52px; height: 68px; margin: 0 14px; border-radius: 14px; font-size: 42px; line-height: 1; }
.gameplays-lightbox-open { overflow: hidden; }

@media (max-width: 900px) {
    .gameplays-screenshots__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
    .gameplays-screenshots__inner { width: min(100% - 24px, 1380px); }
    .gameplays-screenshots__grid { grid-template-columns: minmax(0, 1fr); }
    .gameplays-lightbox { padding: 12px; }
    .gameplays-lightbox__dialog { grid-template-columns: 1fr; width: 100%; }
    .gameplays-lightbox__nav { position: absolute; top: 50%; z-index: 2; width: 44px; height: 58px; margin: 0; transform: translateY(-50%); }
    .gameplays-lightbox__nav:hover { transform: translateY(-50%) scale(1.04); }
    .gameplays-lightbox__nav--previous { left: 4px; }
    .gameplays-lightbox__nav--next { right: 4px; }
    .gameplays-lightbox__close { top: 4px; right: 4px; }
}


/* v2.0.8.1 Final Game Page Polish ---------------------------------------- */
/* Existing sections, dimensions and functionality remain unchanged. */
:root {
    --gp-polish-radius: 16px;
    --gp-polish-transition: 180ms ease;
    --gp-polish-shadow: 0 18px 42px rgba(0, 0, 0, 0.26);
    --gp-polish-shadow-hover: 0 24px 54px rgba(0, 0, 0, 0.34), 0 0 24px rgba(182, 255, 0, 0.07);
}

/* Keep Gameplay dominant and reduce only the supporting section headings. */
.gameplays-highlights__heading {
    font-size: clamp(2.2rem, 4.6vw, 4.55rem);
}

.gameplays-trailer__heading,
.gameplays-information__heading,
.gameplays-screenshots .gameplays-section-heading__title {
    font-size: clamp(2.15rem, 4.5vw, 4.4rem);
}

/* One accessible click target for the complete highlight card. */
.gameplays-highlight-card {
    display: flex;
    flex-direction: column;
    color: inherit;
    text-decoration: none;
    transform: translateZ(0);
}

.gameplays-highlight-card:focus-visible {
    outline: 2px solid var(--gp-lime);
    outline-offset: 4px;
}

.gameplays-highlight-card__media,
.gameplays-highlight-card__body {
    width: 100%;
}

.gameplays-highlight-card__media::before {
    content: "";
    position: absolute;
    z-index: 1;
    inset: 0;
    background: rgba(5, 8, 12, 0);
    transition: background var(--gp-polish-transition);
    pointer-events: none;
}

.gameplays-highlight-card:hover,
.gameplays-highlight-card:focus-visible {
    transform: translateY(-3px) scale(1.008);
    box-shadow: var(--gp-polish-shadow-hover);
}

.gameplays-highlight-card:hover .gameplays-highlight-card__media::before,
.gameplays-highlight-card:focus-visible .gameplays-highlight-card__media::before {
    background: rgba(5, 8, 12, 0.12);
}

.gameplays-highlight-card:hover .gameplays-highlight-card__thumbnail,
.gameplays-highlight-card:focus-visible .gameplays-highlight-card__thumbnail {
    transform: scale(1.045);
    filter: brightness(0.86);
}

.gameplays-highlight-card__title {
    display: block;
}

.gameplays-highlight-card__button {
    pointer-events: none;
}

.gameplays-highlight-card:hover .gameplays-highlight-card__button,
.gameplays-highlight-card:focus-visible .gameplays-highlight-card__button {
    transform: translateY(-2px);
    background: var(--gp-lime-hover);
    color: var(--gp-bg);
    box-shadow: 0 10px 24px rgba(182, 255, 0, 0.16);
}

/* Quieter information panel with consistent alignment and lighter borders. */
.gameplays-information__card {
    border-color: rgba(200, 209, 218, 0.1);
    box-shadow: var(--gp-polish-shadow);
}

.gameplays-information__item {
    display: flex;
    min-height: 58px;
    flex-direction: column;
    justify-content: center;
    border-color: rgba(200, 209, 218, 0.075);
    box-shadow: none;
    transition: border-color var(--gp-polish-transition), background var(--gp-polish-transition);
}

.gameplays-information__grid--primary .gameplays-information__item,
.gameplays-information__grid--secondary .gameplays-information__item {
    border-color: rgba(200, 209, 218, 0.075);
}

.gameplays-information__item:hover {
    transform: none;
    border-color: rgba(200, 209, 218, 0.13);
    background: rgba(17, 24, 32, 0.62);
    box-shadow: none;
}

/* Gallery hover polish; lightbox markup and behaviour are untouched. */
.gameplays-screenshot {
    position: relative;
    border-radius: var(--gp-polish-radius);
    box-shadow: var(--gp-polish-shadow);
    transition: transform var(--gp-polish-transition), border-color var(--gp-polish-transition), box-shadow var(--gp-polish-transition);
}

.gameplays-screenshot__overlay {
    position: absolute;
    z-index: 1;
    inset: 0;
    background: rgba(5, 8, 12, 0);
    transition: background 220ms ease;
    pointer-events: none;
}

.gameplays-screenshot__icon {
    position: absolute;
    z-index: 2;
    top: 50%;
    left: 50%;
    display: grid;
    width: 52px;
    height: 52px;
    place-items: center;
    border: 1px solid rgba(182, 255, 0, 0.72);
    border-radius: 50%;
    background: rgba(11, 15, 20, 0.82);
    box-shadow: 0 0 24px rgba(182, 255, 0, 0.14);
    opacity: 0;
    transform: translate(-50%, -46%) scale(0.92);
    transition: opacity 220ms ease, transform 220ms ease, background 220ms ease;
    pointer-events: none;
}

.gameplays-screenshot__icon span {
    position: relative;
    display: block;
    width: 17px;
    height: 17px;
    border: 2px solid var(--gp-lime);
    border-radius: 50%;
}

.gameplays-screenshot__icon span::after {
    content: "";
    position: absolute;
    right: -7px;
    bottom: -5px;
    width: 9px;
    height: 2px;
    border-radius: 2px;
    background: var(--gp-lime);
    transform: rotate(45deg);
    transform-origin: left center;
}

.gameplays-screenshot:hover,
.gameplays-screenshot:focus-visible {
    transform: translateY(-2px);
    box-shadow: var(--gp-polish-shadow-hover);
}

.gameplays-screenshot:hover .gameplays-screenshot__image,
.gameplays-screenshot:focus-visible .gameplays-screenshot__image {
    transform: scale(1.045);
    filter: saturate(1.04) brightness(0.82);
}

.gameplays-screenshot:hover .gameplays-screenshot__overlay,
.gameplays-screenshot:focus-visible .gameplays-screenshot__overlay {
    background: rgba(5, 8, 12, 0.14);
}

.gameplays-screenshot:hover .gameplays-screenshot__icon,
.gameplays-screenshot:focus-visible .gameplays-screenshot__icon {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

@media (max-width: 520px) {
    .gameplays-information__item {
        min-height: 0;
    }

    .gameplays-screenshot__icon {
        width: 46px;
        height: 46px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .gameplays-highlight-card,
    .gameplays-highlight-card__media::before,
    .gameplays-screenshot,
    .gameplays-screenshot__overlay,
    .gameplays-screenshot__icon {
        transition: none;
    }
}

/* Games Archive v2.1.0 */
.gameplays-games-archive {
    min-height: 60vh;
    overflow: visible;
    background: var(--gp-bg);
    color: var(--gp-white);
}

.gameplays-archive-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    border-bottom: 1px solid rgba(182, 255, 0, 0.22);
    background:
        radial-gradient(circle at 78% 20%, rgba(24, 168, 255, 0.17), transparent 34%),
        radial-gradient(circle at 16% 92%, rgba(182, 255, 0, 0.11), transparent 30%),
        linear-gradient(135deg, #111820 0%, #0B0F14 74%);
}

.gameplays-archive-hero::after {
    content: "";
    position: absolute;
    inset: auto 0 0;
    height: 2px;
    background: linear-gradient(90deg, var(--gp-lime), var(--gp-blue) 58%, transparent 92%);
    box-shadow: 0 0 24px rgba(182, 255, 0, 0.2);
}

.gameplays-archive-hero__glow {
    position: absolute;
    inset: 0;
    z-index: -1;
    opacity: 0.3;
    background-image:
        repeating-linear-gradient(112deg, transparent 0 22px, rgba(255,255,255,0.018) 23px, transparent 24px),
        linear-gradient(90deg, transparent 0 49.8%, rgba(24,168,255,0.05) 50%, transparent 50.2%);
}

.gameplays-archive-hero__inner,
.gameplays-games-archive__inner {
    width: min(1460px, calc(100% - 64px));
    margin: 0 auto;
}

.gameplays-archive-hero__inner {
    padding: clamp(80px, 9.5vw, 136px) 0 clamp(56px, 6vw, 84px);
}

.gameplays-archive-hero__eyebrow,
.gameplays-games-empty__eyebrow {
    display: block;
    margin-bottom: 14px;
    color: var(--gp-lime);
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}

.gameplays-archive-hero__title {
    margin: 0;
    color: var(--gp-white);
    font-size: clamp(3.1rem, 7vw, 6.7rem);
    font-weight: 950;
    line-height: 0.92;
    letter-spacing: -0.055em;
}

.gameplays-archive-hero__description {
    max-width: 780px;
    margin: 26px 0 0;
    color: var(--gp-text);
    font-size: clamp(1rem, 1.6vw, 1.22rem);
    line-height: 1.7;
}

.gameplays-games-archive__library {
    padding: clamp(56px, 7vw, 96px) 0 clamp(78px, 9vw, 130px);
}

.gameplays-games-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: clamp(24px, 2.35vw, 38px);
    row-gap: clamp(14px, 1.35vw, 24px);
    align-items: stretch;
}

.gameplays-game-card {
    min-width: 0;
    height: 100%;
}

.gameplays-game-card__link {
    display: flex;
    height: 100%;
    min-height: 100%;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid rgba(200, 209, 218, 0.13);
    border-radius: 16px;
    background: var(--gp-card);
    color: var(--gp-white);
    box-shadow: 0 18px 38px rgba(0, 0, 0, 0.2);
    text-decoration: none;
    transform: translateZ(0);
    transition: transform 220ms ease, border-color 220ms ease, box-shadow 220ms ease, background 220ms ease;
}

.gameplays-game-card__link:hover,
.gameplays-game-card__link:focus-visible {
    color: var(--gp-white);
    border-color: rgba(214, 255, 77, 0.58);
    background: #18232e;
    box-shadow: 0 30px 62px rgba(0, 0, 0, 0.42), 0 0 22px rgba(24, 168, 255, 0.08), 0 0 0 1px rgba(182, 255, 0, 0.08);
    transform: translateY(-4px) scale(1.006);
    text-decoration: none;
}

.gameplays-game-card__link:focus-visible {
    outline: 2px solid var(--gp-lime);
    outline-offset: 4px;
}

.gameplays-game-card__media {
    position: relative;
    overflow: hidden;
    aspect-ratio: 3 / 2;
    flex: 0 0 auto;
    background: linear-gradient(135deg, #111820, #0B0F14);
}

.gameplays-game-card__media--placeholder {
    background:
        radial-gradient(circle at 72% 22%, rgba(24, 168, 255, 0.22), transparent 38%),
        radial-gradient(circle at 22% 82%, rgba(182, 255, 0, 0.13), transparent 34%),
        linear-gradient(135deg, #161F29, #0B0F14);
}

.gameplays-game-card__artwork {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    padding: clamp(6px, 0.7vw, 9px);
    transform: scale(1.001);
    transition: transform 420ms cubic-bezier(.2,.7,.2,1), filter 220ms ease;
}

.gameplays-game-card__media-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(11,15,20,0.02) 42%, rgba(11,15,20,0.7) 100%);
    transition: background 220ms ease, box-shadow 220ms ease;
}

.gameplays-game-card__link:hover .gameplays-game-card__artwork,
.gameplays-game-card__link:focus-visible .gameplays-game-card__artwork {
    transform: scale(1.03);
    filter: saturate(1.04) contrast(1.015);
}

.gameplays-game-card__link:hover .gameplays-game-card__media-overlay,
.gameplays-game-card__link:focus-visible .gameplays-game-card__media-overlay {
    background: linear-gradient(180deg, rgba(182,255,0,0.045) 0%, rgba(11,15,20,0.05) 40%, rgba(11,15,20,0.76) 100%);
    box-shadow: inset 0 -3px 0 rgba(214, 255, 77, 0.72);
}

.gameplays-game-card__year {
    position: absolute;
    right: 14px;
    bottom: 14px;
    min-width: 50px;
    padding: 7px 10px;
    border: 1px solid rgba(255,255,255,0.22);
    border-radius: 999px;
    background: rgba(11,15,20,0.78);
    color: var(--gp-white);
    font-size: 0.72rem;
    font-weight: 900;
    line-height: 1;
    text-align: center;
    backdrop-filter: blur(10px);
}

.gameplays-game-card__content {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    padding: clamp(12px, 1.35vw, 15px);
}

.gameplays-game-card__title {
    display: -webkit-box;
    min-height: 2.36em;
    max-height: 2.36em;
    margin: 0;
    overflow: hidden;
    color: var(--gp-white);
    font-size: clamp(1.12rem, 1.7vw, 1.42rem);
    font-weight: 900;
    line-height: 1.18;
    letter-spacing: -0.025em;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    transition: color 220ms ease;
}

.gameplays-game-card__link:hover .gameplays-game-card__title,
.gameplays-game-card__link:focus-visible .gameplays-game-card__title {
    color: var(--gp-lime-hover);
}

.gameplays-game-card__badges {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.gameplays-game-card__badges--platforms {
    margin-top: 10px;
}

.gameplays-game-card__badge {
    display: inline-flex;
    align-items: center;
    min-height: 25px;
    padding: 5px 8px;
    border-radius: 999px;
    font-size: 0.62rem;
    font-weight: 850;
    line-height: 1.05;
}

.gameplays-game-card__badge--platform {
    border: 1px solid rgba(182,255,0,0.28);
    background: rgba(182,255,0,0.05);
    color: var(--gp-white);
}

.gameplays-game-card__badge--genre {
    min-height: 23px;
    padding: 4px 7px;
    border: 1px solid rgba(139,152,168,0.18);
    background: rgba(139,152,168,0.055);
    color: var(--gp-muted);
    font-size: 0.58rem;
    font-weight: 780;
}

.gameplays-game-card__meta {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    margin-top: auto;
    padding-top: 11px;
}

.gameplays-game-card__pegi-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 6px;
    flex: 0 0 auto;
}

.gameplays-game-card__pegi {
    display: inline-grid;
    min-width: 40px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.22);
    border-radius: 6px;
    background: #fff;
    color: #0B0F14;
    font-size: 0.88rem;
    font-weight: 950;
    line-height: 1;
    text-align: center;
}

.gameplays-game-card__pegi span {
    padding: 3px 4px;
    background: #0B0F14;
    color: #fff;
    font-size: 0.43rem;
    letter-spacing: 0.08em;
}

.gameplays-game-card__pegi {
    padding-bottom: 5px;
}

.gameplays-games-empty {
    padding: clamp(34px, 5vw, 58px);
    border: 1px solid rgba(200,209,218,0.14);
    border-radius: 16px;
    background: var(--gp-card);
    box-shadow: 0 18px 38px rgba(0,0,0,0.2);
}

.gameplays-games-empty__text {
    margin: 0;
    color: var(--gp-white);
    font-size: clamp(1.25rem, 2vw, 1.65rem);
    font-weight: 850;
}

@media (max-width: 1100px) {
    .gameplays-games-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .gameplays-archive-hero__inner,
    .gameplays-games-archive__inner {
        width: min(100% - 32px, 1460px);
    }

    .gameplays-games-grid {
        grid-template-columns: minmax(0, 1fr);
        column-gap: 22px;
        row-gap: 14px;
    }

    .gameplays-game-card__content {
        padding: 14px;
    }

    .gameplays-game-card__meta {
        align-items: flex-start;
        flex-direction: column;
    }

    .gameplays-game-card__pegi-list {
        justify-content: flex-start;
    }
}

@media (prefers-reduced-motion: reduce) {
    .gameplays-game-card__link,
    .gameplays-game-card__artwork,
    .gameplays-game-card__media-overlay,
    .gameplays-game-card__title {
        transition: none;
    }

    .gameplays-game-card__link:hover,
    .gameplays-game-card__link:focus-visible {
        transform: none;
    }
}

/* v2.2.0 Games Archive search, filters and sorting */
.gameplays-archive-controls{display:flex;align-items:flex-end;gap:clamp(.65rem,1.2vw,1rem);flex-wrap:wrap;margin-bottom:1rem;padding:clamp(.85rem,1.5vw,1.15rem);background:#111820;border:1px solid rgba(200,209,218,.12);border-radius:var(--gameplays-radius,16px)}
.gameplays-search-control{flex:1 1 18rem}.gameplays-search-control label,.gameplays-sort-control label,.gameplays-filter-group legend{display:block;margin:0 0 .4rem;color:#c8d1da;font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em}
.gameplays-search-control input,.gameplays-sort-control select{width:100%;min-height:44px;padding:.65rem .8rem;color:#fff;background:#0b0f14;border:1px solid rgba(200,209,218,.18);border-radius:10px;outline:none;transition:border-color .2s ease,box-shadow .2s ease}
.gameplays-search-control input:focus,.gameplays-sort-control select:focus{border-color:#b6ff00;box-shadow:0 0 0 3px rgba(182,255,0,.12)}
.gameplays-filter-group{flex:1 1 12rem;min-width:0;margin:0;padding:0;border:0}.gameplays-filter-options{display:flex;gap:.4rem;flex-wrap:wrap}
.gameplays-filter-option{display:inline-flex;align-items:center;gap:.35rem;min-height:36px;padding:.38rem .55rem;color:#c8d1da;background:#161f29;border:1px solid rgba(200,209,218,.13);border-radius:999px;cursor:pointer;font-size:.78rem;transition:.2s ease}
.gameplays-filter-option:hover{border-color:rgba(182,255,0,.55);color:#fff}.gameplays-filter-option:has(input:checked){color:#0b0f14;background:#b6ff00;border-color:#b6ff00}.gameplays-filter-option input{position:absolute;opacity:0;pointer-events:none}.gameplays-filter-option small{opacity:.65;font-size:.68rem}
.gameplays-sort-control{flex:0 1 12rem}.gameplays-clear-filters{min-height:40px;padding:.55rem .75rem;color:#c8d1da;background:transparent;border:1px solid rgba(200,209,218,.18);border-radius:10px;cursor:pointer}.gameplays-clear-filters:hover{color:#fff;border-color:#18a8ff}
.gameplays-archive-status{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin:0 0 1rem;color:#c8d1da}.gameplays-active-filters{display:flex;gap:.4rem;flex-wrap:wrap}.gameplays-filter-chip{padding:.35rem .55rem;color:#0b0f14;background:#d6ff4d;border:0;border-radius:999px;font-size:.75rem;font-weight:700;cursor:pointer}
.gameplays-games-archive.is-loading .gameplays-games-grid{opacity:.55;pointer-events:none}.gameplays-games-grid{transition:opacity .18s ease}.gameplays-filter-toggle{display:none}
.gameplays-games-empty p{margin:.35rem 0 0;color:#8b98a8}
@media(max-width:1024px){.gameplays-archive-controls{align-items:stretch}.gameplays-search-control{flex-basis:100%}.gameplays-filter-group{flex-basis:calc(50% - .5rem)}}
@media(max-width:767px){.gameplays-filter-toggle{display:inline-flex;align-items:center;justify-content:center;width:100%;min-height:44px;margin-bottom:.75rem;color:#0b0f14;background:#b6ff00;border:0;border-radius:10px;font-weight:800}.gameplays-archive-controls{display:none;position:relative;flex-direction:column;align-items:stretch}.gameplays-archive-controls.is-open{display:flex}.gameplays-filter-group,.gameplays-sort-control{width:100%;flex-basis:auto}.gameplays-filter-options{max-height:12rem;overflow:auto}.gameplays-archive-status{align-items:flex-start;flex-direction:column}}

/* Archive filter dropdown polish ----------------------------------------- */
.gameplays-filter-group{position:relative;flex:1 1 12rem;min-width:0;margin:0;padding:0;border:0}
.gameplays-filter-group__toggle{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"title chevron" "summary chevron";align-items:center;width:100%;min-height:44px;padding:.55rem .75rem;color:#fff;text-align:left;background:#0b0f14;border:1px solid rgba(200,209,218,.18);border-radius:10px;cursor:pointer;transition:border-color .18s ease,box-shadow .18s ease,background .18s ease}
.gameplays-filter-group__toggle:hover,.gameplays-filter-group__toggle:focus-visible{border-color:rgba(182,255,0,.55);box-shadow:0 0 0 3px rgba(182,255,0,.08);outline:none}
.gameplays-filter-group__title{grid-area:title;font-size:.76rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase}
.gameplays-filter-group__summary{grid-area:summary;overflow:hidden;margin-top:.12rem;color:#8b98a8;font-size:.68rem;line-height:1.2;text-overflow:ellipsis;white-space:nowrap}
.gameplays-filter-group__chevron{grid-area:chevron;width:.48rem;height:.48rem;margin-left:.7rem;border-right:2px solid #8b98a8;border-bottom:2px solid #8b98a8;transform:rotate(45deg) translateY(-2px);transition:transform .18s ease,border-color .18s ease}
.gameplays-filter-group.is-open .gameplays-filter-group__chevron{transform:rotate(225deg) translate(-1px,-1px);border-color:#b6ff00}
.gameplays-filter-group.has-active-filters .gameplays-filter-group__toggle{border-color:rgba(182,255,0,.46);background:linear-gradient(145deg,rgba(182,255,0,.075),#0b0f14 62%)}
.gameplays-filter-group.has-active-filters .gameplays-filter-group__summary{color:#d6ff4d}
.gameplays-filter-group__panel{position:absolute;z-index:20;top:calc(100% + .45rem);left:0;width:max(100%,16rem);max-width:min(22rem,85vw);overflow:hidden;padding:.6rem;background:#111820;border:1px solid rgba(200,209,218,.15);border-radius:12px;box-shadow:0 18px 46px rgba(0,0,0,.38);transform-origin:top;animation:gameplays-filter-open .16s ease-out both}
.gameplays-filter-group__panel[hidden]{display:none}
.gameplays-filter-group__panel .gameplays-filter-options{max-height:15rem;overflow:auto;padding:.05rem}
@keyframes gameplays-filter-open{from{opacity:0;transform:translateY(-4px) scaleY(.97)}to{opacity:1;transform:translateY(0) scaleY(1)}}
@media(max-width:767px){.gameplays-filter-group__panel{position:relative;top:auto;left:auto;width:100%;max-width:none;margin-top:.4rem;box-shadow:none}.gameplays-filter-group__toggle{min-height:46px}}
@media(prefers-reduced-motion:reduce){.gameplays-filter-group__panel{animation:none}.gameplays-filter-group__chevron,.gameplays-filter-group__toggle{transition:none}}

/* v2.2.2 Archive Quick Filters & Final Polish ----------------------------- */
.gameplays-quick-views{
    display:flex;
    flex-wrap:wrap;
    gap:.5rem;
    margin:0 0 .75rem;
}
.gameplays-quick-view{
    display:inline-flex;
    min-height:38px;
    align-items:center;
    gap:.45rem;
    padding:.48rem .72rem;
    border:1px solid rgba(200,209,218,.16);
    border-radius:999px;
    background:#161f29;
    color:#c8d1da;
    font-size:.76rem;
    font-weight:800;
    line-height:1;
    cursor:pointer;
    transition:transform .18s ease,border-color .18s ease,background .18s ease,color .18s ease,box-shadow .18s ease;
}
.gameplays-quick-view small{
    display:inline-grid;
    min-width:1.35rem;
    height:1.35rem;
    place-items:center;
    padding:0 .3rem;
    border-radius:999px;
    background:rgba(11,15,20,.7);
    color:#8b98a8;
    font-size:.66rem;
}
.gameplays-quick-view:hover,
.gameplays-quick-view:focus-visible{
    transform:translateY(-1px);
    border-color:rgba(182,255,0,.55);
    color:#fff;
    box-shadow:0 8px 18px rgba(0,0,0,.2),0 0 0 3px rgba(182,255,0,.06);
    outline:none;
}
.gameplays-quick-view.is-active{
    border-color:#b6ff00;
    background:#b6ff00;
    color:#0b0f14;
    box-shadow:0 8px 20px rgba(182,255,0,.12);
}
.gameplays-quick-view.is-active small{
    background:rgba(11,15,20,.14);
    color:#0b0f14;
}
.gameplays-filter-chip{
    display:inline-flex;
    align-items:center;
    gap:.35rem;
    min-height:32px;
    padding:.38rem .62rem;
    border:1px solid #b6ff00;
    border-radius:999px;
    background:#b6ff00;
    color:#0b0f14;
    font-weight:800;
    line-height:1;
    box-shadow:0 6px 16px rgba(182,255,0,.08);
    transition:transform .18s ease,background .18s ease,border-color .18s ease,box-shadow .18s ease;
}
.gameplays-filter-chip:hover,
.gameplays-filter-chip:focus-visible{
    transform:translateY(-1px);
    border-color:#d6ff4d;
    background:#d6ff4d;
    color:#0b0f14;
    box-shadow:0 9px 22px rgba(182,255,0,.16);
    outline:none;
}
@media(max-width:767px){
    .gameplays-quick-views{margin-bottom:.65rem}
    .gameplays-quick-view{flex:1 1 auto;justify-content:center}
}
@media(prefers-reduced-motion:reduce){
    .gameplays-quick-view,.gameplays-filter-chip{transition:none}
}


/* v2.2.3 Archive Final Micro Polish -------------------------------------- */
.gameplays-quick-view-section{
    display:flex;
    align-items:center;
    gap:.7rem;
    flex-wrap:wrap;
    margin:0;
    padding:.72rem clamp(.85rem,1.5vw,1.15rem) 0;
    background:#111820;
    border:1px solid rgba(200,209,218,.12);
    border-bottom:0;
    border-radius:var(--gameplays-radius,16px) var(--gameplays-radius,16px) 0 0;
}
.gameplays-quick-view-section__label{
    flex:0 0 auto;
    color:#8b98a8;
    font-size:.7rem;
    font-weight:800;
    letter-spacing:.1em;
    line-height:1;
    text-transform:uppercase;
}
.gameplays-quick-view-section .gameplays-quick-views{
    flex:1 1 auto;
    margin:0;
}
.gameplays-quick-view-section + .gameplays-filter-toggle + .gameplays-archive-controls,
.gameplays-quick-view-section + .gameplays-archive-controls{
    margin-top:0;
    border-top-left-radius:0;
    border-top-right-radius:0;
}
.gameplays-quick-view small{
    font-variant-numeric:tabular-nums;
}
@media(max-width:767px){
    .gameplays-quick-view-section{
        align-items:flex-start;
        flex-direction:column;
        gap:.55rem;
        padding-bottom:.72rem;
        border-bottom:1px solid rgba(200,209,218,.12);
        border-radius:var(--gameplays-radius,16px);
        margin-bottom:.65rem;
    }
    .gameplays-quick-view-section .gameplays-quick-views{width:100%}
    .gameplays-quick-view-section + .gameplays-filter-toggle + .gameplays-archive-controls{border-radius:var(--gameplays-radius,16px)}
}

/* v2.9.0 Game Catalog UX Improvements ---------------------------------- */
:root{--gameplays-catalog-sticky-offset:112px}
.gameplays-catalog-toolbar{
    position:sticky;
    top:var(--gameplays-catalog-sticky-offset);
    z-index:90;
    margin:0 0 clamp(18px,2vw,28px);
    padding:12px;
    border:1px solid rgba(200,209,218,.14);
    border-radius:16px;
    background:rgba(11,15,20,.96);
    box-shadow:0 8px 22px rgba(0,0,0,.14),0 1px 0 rgba(24,168,255,.08) inset;
    backdrop-filter:blur(16px);
    transition:box-shadow .2s ease,border-color .2s ease,background .2s ease;
}
.gameplays-catalog-sticky-sentinel{height:1px;margin-bottom:-1px;pointer-events:none}
.gameplays-catalog-toolbar.is-stuck{border-color:rgba(200,209,218,.2);box-shadow:0 18px 46px rgba(0,0,0,.34),0 1px 0 rgba(24,168,255,.12) inset}
.gameplays-catalog-toolbar .gameplays-quick-view-section{margin-bottom:.65rem}
.gameplays-catalog-toolbar .gameplays-quick-views{margin-bottom:0}
.gameplays-catalog-toolbar .gameplays-archive-controls{margin-bottom:.65rem;padding:.75rem;background:#111820}
.gameplays-catalog-toolbar .gameplays-archive-status{margin:0;padding:.15rem .2rem 0}
.gameplays-games-archive.is-loading .gameplays-catalog-toolbar{border-color:rgba(24,168,255,.28)}
.gameplays-pagination-wrap{display:flex;justify-content:center;margin-top:clamp(28px,4vw,52px)}
.gameplays-pagination{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;padding:10px;border:1px solid rgba(200,209,218,.13);border-radius:16px;background:#111820;box-shadow:0 18px 38px rgba(0,0,0,.2)}
.gameplays-pagination__pages{display:flex;align-items:center;justify-content:center;gap:6px;flex-wrap:wrap}
.gameplays-pagination a{display:inline-flex;align-items:center;justify-content:center;min-width:42px;min-height:42px;padding:8px 12px;border:1px solid rgba(200,209,218,.15);border-radius:10px;background:#0b0f14;color:#c8d1da;text-decoration:none;font-size:.82rem;font-weight:800;transition:transform .18s ease,border-color .18s ease,background .18s ease,color .18s ease,box-shadow .18s ease}
.gameplays-pagination a:hover,.gameplays-pagination a:focus-visible{border-color:rgba(182,255,0,.55);color:#fff;transform:translateY(-2px);box-shadow:0 10px 24px rgba(0,0,0,.26),0 0 18px rgba(24,168,255,.07);outline:none}
.gameplays-pagination a.is-current{border-color:#b6ff00;background:#b6ff00;color:#0b0f14;box-shadow:0 0 22px rgba(182,255,0,.15)}
.gameplays-pagination a.is-disabled{opacity:.42;pointer-events:none}
.gameplays-pagination__control{min-width:112px!important}
.gameplays-single-game__catalog-return{width:min(1460px,calc(100% - 64px));margin:0 auto;padding:22px 0 0}
.gameplays-catalog-return{display:inline-flex;align-items:center;min-height:42px;padding:9px 14px;border:1px solid rgba(200,209,218,.16);border-radius:10px;background:#111820;color:#c8d1da;text-decoration:none;font-size:.82rem;font-weight:850;transition:transform .18s ease,border-color .18s ease,color .18s ease,box-shadow .18s ease}
.gameplays-catalog-return:hover,.gameplays-catalog-return:focus-visible{border-color:rgba(182,255,0,.55);color:#fff;transform:translateY(-2px);box-shadow:0 12px 28px rgba(0,0,0,.28),0 0 18px rgba(24,168,255,.08);outline:none}
@media(max-width:900px){:root{--gameplays-catalog-sticky-offset:70px}.gameplays-catalog-toolbar{padding:10px}.gameplays-pagination{width:100%}}
@media(max-width:767px){.gameplays-catalog-toolbar{top:var(--gameplays-catalog-sticky-offset);border-radius:13px}.gameplays-catalog-toolbar:has(.gameplays-archive-controls.is-open){max-height:calc(100vh - var(--gameplays-catalog-sticky-offset) - 10px);overflow:auto}.gameplays-catalog-toolbar .gameplays-filter-toggle{margin-bottom:.55rem}.gameplays-catalog-toolbar .gameplays-archive-controls{margin-bottom:.55rem}.gameplays-pagination{gap:8px}.gameplays-pagination__pages{order:3;width:100%}.gameplays-pagination__control{flex:1;min-width:0!important}.gameplays-single-game__catalog-return{width:min(100% - 32px,1460px);padding-top:16px}}
@media(max-width:560px){:root{--gameplays-catalog-sticky-offset:64px}.gameplays-pagination a{min-width:38px;min-height:38px;padding:7px 10px}.gameplays-catalog-toolbar{margin-inline:-4px}}
@media(prefers-reduced-motion:reduce){.gameplays-catalog-toolbar,.gameplays-pagination a,.gameplays-catalog-return{transition:none}.gameplays-pagination a:hover,.gameplays-pagination a:focus-visible,.gameplays-catalog-return:hover,.gameplays-catalog-return:focus-visible{transform:none}}

/* Trailer Intelligence fallback ------------------------------------------ */
.gameplays-trailer__video iframe {
    transition: opacity 160ms ease, visibility 160ms ease;
}

.gameplays-trailer__fallback {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: grid;
    place-items: center;
    overflow: hidden;
    padding: clamp(20px, 4vw, 52px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    background: #090d12;
    transition: opacity 160ms ease, visibility 160ms ease;
}

.gameplays-trailer__fallback-image,
.gameplays-trailer__fallback-shade {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.gameplays-trailer__fallback-image {
    object-fit: cover;
    object-position: center;
    transform: scale(1.015);
}

.gameplays-trailer__fallback-shade {
    background:
        linear-gradient(90deg, rgba(5, 8, 12, 0.94) 0%, rgba(5, 8, 12, 0.78) 50%, rgba(5, 8, 12, 0.62) 100%),
        linear-gradient(180deg, rgba(11, 15, 20, 0.08), rgba(11, 15, 20, 0.76));
}

.gameplays-trailer__fallback-link {
    position: absolute;
    inset: 0;
    z-index: 1;
}

.gameplays-trailer__fallback-content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: min(100%, 680px);
    margin-right: auto;
}

.gameplays-trailer__fallback-play {
    display: grid;
    place-items: center;
    width: clamp(58px, 7vw, 78px);
    height: clamp(58px, 7vw, 78px);
    margin-bottom: clamp(18px, 2.5vw, 28px);
    border: 1px solid rgba(182, 255, 0, 0.82);
    border-radius: 50%;
    background: rgba(182, 255, 0, 0.96);
    color: #0B0F14;
    box-shadow: 0 18px 46px rgba(0, 0, 0, 0.34), 0 0 32px rgba(182, 255, 0, 0.16);
}

.gameplays-trailer__fallback-play svg {
    width: 42%;
    height: 42%;
    fill: currentColor;
    transform: translateX(5%);
}

.gameplays-trailer__fallback-content strong {
    color: var(--gp-white);
    font-size: clamp(1.55rem, 3.2vw, 3rem);
    font-weight: 950;
    line-height: 1;
    letter-spacing: -0.035em;
}

.gameplays-trailer__fallback-content p {
    max-width: 620px;
    margin: clamp(12px, 1.7vw, 18px) 0 clamp(20px, 2.5vw, 28px);
    color: var(--gp-text);
    font-size: clamp(0.92rem, 1.45vw, 1.08rem);
    font-weight: 620;
    line-height: 1.65;
}

.gameplays-trailer__fallback-button {
    pointer-events: auto;
}

.gameplays-trailer__card.is-fallback .gameplays-trailer__video iframe {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.gameplays-trailer__card.is-fallback .gameplays-trailer__fallback {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.gameplays-trailer__card.is-fallback .gameplays-trailer__actions {
    display: none;
}

@media (max-width: 620px) {
    .gameplays-trailer__fallback {
        padding: 12px 14px;
    }

    .gameplays-trailer__fallback-content {
        width: min(100%, 520px);
        justify-content: center;
    }

    .gameplays-trailer__fallback-play {
        width: 38px;
        height: 38px;
        margin-bottom: 8px;
    }

    .gameplays-trailer__fallback-content strong {
        font-size: clamp(1.05rem, 5.2vw, 1.35rem);
    }

    .gameplays-trailer__fallback-content p {
        display: -webkit-box;
        max-width: 100%;
        margin: 6px 0 8px;
        overflow: hidden;
        font-size: clamp(0.72rem, 3.2vw, 0.86rem);
        line-height: 1.35;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }

    .gameplays-trailer__fallback-button {
        min-height: 34px;
        padding: 7px 12px;
        font-size: 0.76rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .gameplays-trailer__video iframe,
    .gameplays-trailer__fallback {
        transition: none;
    }
}


/* v2.9.2 Mobile Sticky Catalog Action Bar ------------------------------- */
.gameplays-catalog-mobile-sentinel{height:1px;margin-bottom:-1px;pointer-events:none}
.gameplays-mobile-catalog-actions,
.gameplays-mobile-catalog-close{display:none}

@media(max-width:767px){
    .gameplays-catalog-toolbar{
        position:relative;
        top:auto;
        z-index:1;
    }
    .gameplays-catalog-toolbar.is-stuck{box-shadow:0 8px 22px rgba(0,0,0,.14),0 1px 0 rgba(24,168,255,.08) inset}
    .gameplays-mobile-catalog-actions{
        position:fixed;
        top:var(--gameplays-catalog-sticky-offset);
        left:12px;
        right:12px;
        z-index:105;
        min-height:56px;
        display:flex;
        align-items:center;
        justify-content:space-between;
        gap:12px;
        padding:8px 10px 8px 14px;
        border:1px solid rgba(200,209,218,.17);
        border-radius:14px;
        background:rgba(11,15,20,.98);
        box-shadow:0 16px 38px rgba(0,0,0,.32),0 1px 0 rgba(24,168,255,.1) inset;
        opacity:0;
        visibility:hidden;
        pointer-events:none;
        transform:translateY(-10px);
        transition:opacity .18s ease,visibility .18s ease,transform .18s ease,border-color .18s ease;
    }
    .gameplays-mobile-catalog-actions.is-visible{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0)}
    .gameplays-mobile-catalog-actions.has-open-panel{border-color:rgba(182,255,0,.35)}
    .gameplays-mobile-catalog-actions>strong{flex:1;min-width:0;color:#fff;font-size:.82rem;font-weight:900;white-space:nowrap}
    .gameplays-mobile-catalog-actions__buttons{display:flex;align-items:center;justify-content:flex-end;gap:7px;flex:0 0 auto}
    .gameplays-mobile-catalog-actions button{
        min-height:38px;
        display:inline-flex;
        align-items:center;
        justify-content:center;
        gap:5px;
        padding:7px 10px;
        border:1px solid rgba(200,209,218,.16);
        border-radius:10px;
        background:#111820;
        color:#c8d1da;
        font:inherit;
        font-size:.75rem;
        font-weight:850;
        cursor:pointer;
        transition:border-color .18s ease,color .18s ease,background .18s ease,box-shadow .18s ease;
    }
    .gameplays-mobile-catalog-actions button:hover,
    .gameplays-mobile-catalog-actions button:focus-visible{border-color:rgba(24,168,255,.55);color:#fff;outline:none}
    .gameplays-mobile-catalog-actions button.is-active{border-color:#b6ff00;background:#b6ff00;color:#0b0f14;box-shadow:0 0 20px rgba(182,255,0,.13)}

    .gameplays-catalog-toolbar.is-mobile-action-open{
        position:fixed;
        top:calc(var(--gameplays-catalog-sticky-offset) + 64px);
        left:12px;
        right:12px;
        z-index:104;
        width:auto;
        max-height:calc(100dvh - var(--gameplays-catalog-sticky-offset) - 76px);
        margin:0;
        overflow:auto;
        border-color:rgba(200,209,218,.2);
        box-shadow:0 22px 52px rgba(0,0,0,.42);
    }
    .gameplays-catalog-toolbar.is-mobile-action-open .gameplays-mobile-catalog-close{
        position:sticky;
        top:0;
        z-index:2;
        margin:0 0 8px auto;
        width:36px;
        height:36px;
        display:flex;
        align-items:center;
        justify-content:center;
        border:1px solid rgba(200,209,218,.18);
        border-radius:10px;
        background:#111820;
        color:#fff;
        font-size:1.4rem;
        line-height:1;
        cursor:pointer;
    }
    .gameplays-catalog-toolbar.is-mobile-action-open .gameplays-quick-view-section,
    .gameplays-catalog-toolbar.is-mobile-action-open .gameplays-filter-toggle,
    .gameplays-catalog-toolbar.is-mobile-action-open .gameplays-archive-status{display:none}
    .gameplays-catalog-toolbar.is-mobile-action-open .gameplays-archive-controls{display:flex;margin:0}
    .gameplays-catalog-toolbar.is-mobile-search-open .gameplays-filter-group,
    .gameplays-catalog-toolbar.is-mobile-search-open .gameplays-sort-control,
    .gameplays-catalog-toolbar.is-mobile-search-open .gameplays-clear-filters{display:none}
    .gameplays-catalog-toolbar.is-mobile-search-open .gameplays-search-control{display:flex;width:100%;flex-basis:100%}
    .gameplays-catalog-toolbar.is-mobile-filters-open .gameplays-search-control{display:none}
    .gameplays-catalog-toolbar.is-mobile-filters-open .gameplays-filter-group,
    .gameplays-catalog-toolbar.is-mobile-filters-open .gameplays-sort-control,
    .gameplays-catalog-toolbar.is-mobile-filters-open .gameplays-clear-filters{display:block}
}
@media(max-width:390px){
    .gameplays-mobile-catalog-actions{left:8px;right:8px;padding-left:11px;gap:7px}
    .gameplays-mobile-catalog-actions__buttons{gap:5px}
    .gameplays-mobile-catalog-actions button{padding-inline:8px;font-size:.7rem}
    .gameplays-catalog-toolbar.is-mobile-action-open{left:8px;right:8px}
}
@media(prefers-reduced-motion:reduce){.gameplays-mobile-catalog-actions{transition:none}}

/* v3.0.1 Family Pages & Shared Content */
.gameplays-family-variants {
    position: relative;
    z-index: 3;
    width: min(100% - 32px, 1440px);
    margin: 12px auto 18px;
}

.gameplays-family-variants__inner {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 14px;
    border: 1px solid rgba(139, 152, 168, 0.2);
    border-radius: 16px;
    background: linear-gradient(180deg, rgba(17, 24, 32, 0.96), rgba(11, 15, 20, 0.94));
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.2);
}

.gameplays-family-variants__label {
    flex: 0 0 auto;
    color: var(--gp-muted, #8b98a8);
    font-size: 0.72rem;
    font-weight: 850;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.gameplays-family-variants__list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.gameplays-family-variants__item {
    display: inline-flex;
    align-items: center;
    min-height: 38px;
    padding: 8px 15px;
    border: 1px solid rgba(139, 152, 168, 0.26);
    border-radius: 999px;
    background: rgba(22, 31, 41, 0.78);
    color: var(--gp-light, #c8d1da);
    font-size: 0.82rem;
    font-weight: 800;
    line-height: 1;
    text-decoration: none;
    transition: transform 180ms ease, border-color 180ms ease, color 180ms ease, background 180ms ease, box-shadow 180ms ease;
}

.gameplays-family-variants__item:hover,
.gameplays-family-variants__item:focus-visible {
    transform: translateY(-2px);
    border-color: rgba(24, 168, 255, 0.62);
    color: #fff;
    box-shadow: 0 10px 22px rgba(24, 168, 255, 0.12);
}

.gameplays-family-variants__item.is-active {
    border-color: #b6ff00;
    background: #b6ff00;
    color: #050801;
    box-shadow: 0 8px 24px rgba(182, 255, 0, 0.16);
}

.gameplays-family-variant-badge {
    display: inline-flex;
    align-items: center;
    width: max-content;
    min-height: 28px;
    margin-bottom: 10px;
    padding: 6px 10px;
    border: 1px solid rgba(24, 168, 255, 0.44);
    border-radius: 999px;
    background: rgba(24, 168, 255, 0.1);
    color: #d9f2ff;
    font-size: 0.7rem;
    font-weight: 850;
    letter-spacing: 0.06em;
    line-height: 1;
    text-transform: uppercase;
}

.gameplays-family-gameplay-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    margin-top: 24px;
}

.gameplays-family-gameplay-card {
    display: flex;
    min-width: 0;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid rgba(139, 152, 168, 0.18);
    border-radius: 16px;
    background: #161f29;
    color: #fff;
    text-decoration: none;
    box-shadow: 0 16px 34px rgba(0, 0, 0, 0.22);
    transition: transform 190ms ease, border-color 190ms ease, box-shadow 190ms ease;
}

.gameplays-family-gameplay-card:hover,
.gameplays-family-gameplay-card:focus-visible {
    transform: translateY(-4px) scale(1.01);
    border-color: rgba(182, 255, 0, 0.55);
    box-shadow: 0 22px 42px rgba(0, 0, 0, 0.34), 0 0 22px rgba(24, 168, 255, 0.08);
}

.gameplays-family-gameplay-card__media {
    position: relative;
    display: block;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #080c11;
}

.gameplays-family-gameplay-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 240ms ease;
}

.gameplays-family-gameplay-card:hover .gameplays-family-gameplay-card__media img {
    transform: scale(1.035);
}

.gameplays-family-gameplay-card__media .gameplays-family-variant-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    margin: 0;
    background: rgba(11, 15, 20, 0.86);
    backdrop-filter: blur(8px);
}

.gameplays-family-gameplay-card__play {
    position: absolute;
    inset: 50% auto auto 50%;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #b6ff00;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.36);
    transform: translate(-50%, -50%);
}

.gameplays-family-gameplay-card__play::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 53%;
    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent;
    border-left: 11px solid #080c11;
    transform: translate(-50%, -50%);
}

.gameplays-family-gameplay-card__body {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 9px;
    padding: 16px;
}

.gameplays-family-gameplay-card__body strong {
    display: -webkit-box;
    overflow: hidden;
    font-size: 0.98rem;
    line-height: 1.35;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.gameplays-family-gameplay-card__body span {
    margin-top: auto;
    color: #b6ff00;
    font-size: 0.76rem;
    font-weight: 800;
}

.gameplays-highlight-card__media .gameplays-family-variant-badge--highlight {
    position: absolute;
    right: 10px;
    bottom: 10px;
    z-index: 3;
    margin: 0;
    background: rgba(11, 15, 20, 0.88);
    backdrop-filter: blur(8px);
}

@media (max-width: 1024px) {
    .gameplays-family-gameplay-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 680px) {
    .gameplays-family-variants {
        width: min(100% - 20px, 1440px);
        margin-top: 8px;
    }

    .gameplays-family-variants__inner {
        align-items: flex-start;
        flex-direction: column;
        gap: 9px;
        padding: 11px;
    }

    .gameplays-family-variants__list {
        width: 100%;
    }

    .gameplays-family-variants__item {
        flex: 1 1 auto;
        justify-content: center;
    }

    .gameplays-family-gameplay-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }
}

/* v3.0.2.2 Family visual polish.
   Family cards inherit every dimension and interaction from normal catalog
   cards. Only the artwork composition inside the existing media box differs. */
.gameplays-game-card__family-cover {
    position: absolute;
    inset: 0;
    display: block;
    overflow: hidden;
    isolation: isolate;
    background:
        radial-gradient(circle at 72% 32%, rgba(24,168,255,.14), transparent 38%),
        radial-gradient(circle at 30% 72%, rgba(182,255,0,.09), transparent 42%),
        linear-gradient(145deg, #151e28 0%, #0b0f14 72%);
}

.gameplays-game-card__family-cover-backdrop {
    position: absolute;
    inset: 0;
    z-index: 0;
    background:
        linear-gradient(115deg, rgba(255,255,255,.035), transparent 34%),
        linear-gradient(180deg, transparent 58%, rgba(5,8,12,.58));
    pointer-events: none;
}

.gameplays-game-card__family-cover-image {
    position: absolute;
    display: block;
    object-fit: contain;
    object-position: center;
    filter: drop-shadow(0 14px 18px rgba(0,0,0,.42));
    transition: transform 420ms cubic-bezier(.2,.7,.2,1), filter 240ms ease;
    will-change: transform;
}

.gameplays-game-card__family-cover-image--primary {
    z-index: 1;
    left: 6%;
    top: 5%;
    width: 66%;
    height: 90%;
    transform: perspective(760px) rotateY(2deg) rotateZ(-1deg);
}

.gameplays-game-card__family-cover-image--secondary {
    z-index: 2;
    right: 4%;
    bottom: 7%;
    width: 48%;
    height: 72%;
    transform-origin: 70% 80%;
    transform: perspective(760px) rotateY(-5deg) rotateZ(3deg);
    filter: drop-shadow(-10px 14px 16px rgba(0,0,0,.48));
}

.gameplays-game-card__family-cover-ground {
    position: absolute;
    z-index: 0;
    left: 12%;
    right: 8%;
    bottom: 2%;
    height: 13%;
    border-radius: 50%;
    background: radial-gradient(ellipse, rgba(0,0,0,.48), transparent 70%);
    filter: blur(7px);
    pointer-events: none;
}

.gameplays-game-card__link:hover .gameplays-game-card__family-cover-image--primary,
.gameplays-game-card__link:focus-visible .gameplays-game-card__family-cover-image--primary {
    transform: perspective(760px) rotateY(1deg) rotateZ(-1deg) translateY(-1.5%) scale(1.025);
    filter: drop-shadow(0 17px 21px rgba(0,0,0,.48)) saturate(1.035);
}

.gameplays-game-card__link:hover .gameplays-game-card__family-cover-image--secondary,
.gameplays-game-card__link:focus-visible .gameplays-game-card__family-cover-image--secondary {
    transform: perspective(760px) rotateY(-4deg) rotateZ(3deg) translateY(-2%) scale(1.035);
    filter: drop-shadow(-12px 17px 19px rgba(0,0,0,.54)) saturate(1.04);
}

@media (max-width: 560px) {
    .gameplays-game-card__family-cover-image--primary {
        left: 4%;
        width: 68%;
    }

    .gameplays-game-card__family-cover-image--secondary {
        right: 2%;
        width: 50%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .gameplays-game-card__family-cover-image {
        transition: none;
    }
}


/* v3.0.3 Title Group identity */
.gameplays-family-variants__item{font-family:inherit;cursor:pointer;appearance:none;-webkit-appearance:none}
.gameplays-title-group__breadcrumb{width:min(100% - 32px,1440px);margin:14px auto 0;display:flex;align-items:center;gap:9px;color:#8b98a8;font-size:.8rem;font-weight:750}
.gameplays-title-group__breadcrumb a{color:#c8d1da;text-decoration:none;transition:color .18s ease}
.gameplays-title-group__breadcrumb a:hover,.gameplays-title-group__breadcrumb a:focus-visible{color:#b6ff00;outline:none}
@media(max-width:680px){.gameplays-title-group__breadcrumb{width:min(100% - 20px,1440px);font-size:.75rem}}


/* v3.2.0 Expansions Framework */
.gameplays-expansion-parent{width:min(100% - 40px,1380px);margin:24px auto 0;display:flex;align-items:center;gap:12px;color:#8b98a8;font-size:.82rem;text-transform:uppercase;letter-spacing:.08em}.gameplays-expansion-parent a{display:inline-flex;align-items:center;min-height:42px;padding:0 16px;border:1px solid rgba(182,255,0,.26);border-radius:12px;background:#111820;color:#fff;text-decoration:none;text-transform:none;letter-spacing:0;font-weight:800;transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease}.gameplays-expansion-parent a:hover{transform:translateY(-2px);border-color:#b6ff00;box-shadow:0 10px 24px rgba(24,168,255,.12)}
.gameplays-expansions{padding:clamp(50px,6vw,88px) 0;background:#0b0f14}.gameplays-expansions__inner{width:min(100% - 40px,1380px);margin:0 auto}.gameplays-expansions__header{margin-bottom:22px}.gameplays-expansions__eyebrow{display:block;color:#b6ff00;font-size:.74rem;font-weight:900;letter-spacing:.13em;text-transform:uppercase;margin-bottom:6px}.gameplays-expansions h2{margin:0;color:#fff;font-size:clamp(1.65rem,3vw,2.35rem);line-height:1.05}.gameplays-expansions__list{display:grid;gap:10px}.gameplays-expansion-row{display:grid;grid-template-columns:64px minmax(0,1fr) auto 28px;align-items:center;gap:16px;min-height:82px;padding:9px 16px 9px 10px;border:1px solid rgba(255,255,255,.08);border-radius:14px;background:linear-gradient(135deg,#161f29,#111820);color:#fff;text-decoration:none;box-shadow:0 10px 28px rgba(0,0,0,.2);transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease}.gameplays-expansion-row:hover{transform:translateY(-2px);border-color:rgba(182,255,0,.48);box-shadow:0 16px 34px rgba(0,0,0,.3),0 0 24px rgba(24,168,255,.08)}.gameplays-expansion-row__cover{width:54px;height:64px;border-radius:8px;overflow:hidden;background:#0b0f14;display:block}.gameplays-expansion-row__cover img{width:100%;height:100%;object-fit:cover}.gameplays-expansion-row__content{display:grid;gap:5px;min-width:0}.gameplays-expansion-row__content strong{font-size:1rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.gameplays-expansion-row__content time{font-size:.82rem;color:#8b98a8}.gameplays-expansion-row__new{padding:5px 9px;border-radius:999px;background:#b6ff00;color:#050806;font-size:.68rem;font-weight:950;letter-spacing:.08em}.gameplays-expansion-row__arrow{color:#18a8ff;font-size:1.2rem}.gameplays-expansions__toggle{margin-top:18px;min-height:44px;padding:0 18px;border:1px solid rgba(182,255,0,.35);border-radius:12px;background:#111820;color:#fff;font:inherit;font-weight:800;cursor:pointer;transition:border-color .2s ease,transform .2s ease}.gameplays-expansions__toggle:hover{border-color:#b6ff00;transform:translateY(-1px)}
@media(max-width:600px){.gameplays-expansion-parent,.gameplays-expansions__inner{width:min(100% - 24px,1380px)}.gameplays-expansion-parent{align-items:flex-start;flex-direction:column}.gameplays-expansion-row{grid-template-columns:52px minmax(0,1fr) auto;gap:11px;padding:8px 11px}.gameplays-expansion-row__cover{width:46px;height:56px}.gameplays-expansion-row__new{grid-column:3;grid-row:1}.gameplays-expansion-row__arrow{display:none}.gameplays-expansion-row__content strong{font-size:.92rem}}