: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 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-lime);
}

.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: 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__header-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 12px;
}

.gameplays-gameplay__explore-button {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: 0 18px;
    border: 1px solid rgba(24, 168, 255, 0.64);
    border-radius: 10px;
    background: rgba(24, 168, 255, 0.07);
    color: var(--gp-white);
    font-size: 0.8rem;
    font-weight: 900;
    letter-spacing: 0.055em;
    line-height: 1;
    text-decoration: none;
    text-transform: uppercase;
    white-space: nowrap;
    box-shadow: 0 10px 28px rgba(24, 168, 255, 0.08);
    transition: transform 170ms ease, border-color 170ms ease, background 170ms ease, box-shadow 170ms ease;
}

.gameplays-gameplay__explore-button:hover,
.gameplays-gameplay__explore-button:focus-visible {
    transform: translateY(-2px);
    border-color: var(--gp-blue);
    background: rgba(24, 168, 255, 0.13);
    color: var(--gp-white);
    box-shadow: 0 14px 34px rgba(24, 168, 255, 0.16);
}

.gameplays-gameplay__explore-button:focus-visible {
    outline: 2px solid var(--gp-blue);
    outline-offset: 3px;
}

.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);
}

.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-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;
    }

    .gameplays-gameplay__header-actions {
        width: 100%;
        justify-content: flex-start;
    }
}

@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%;
    }

    .gameplays-gameplay__header-actions {
        gap: 10px;
    }

    .gameplays-gameplay__explore-button {
        order: -1;
        width: 100%;
        min-height: 50px;
        padding-inline: 16px;
    }
}

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


/* Official Trailer -------------------------------------------------------- */
.gameplays-trailer {
    position: relative;
    padding: clamp(64px, 7vw, 108px) 0 clamp(78px, 8vw, 124px);
    background: var(--gp-bg);
}

.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);
}

.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: 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: var(--gp-bg);
}

.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: var(--gp-bg);
}

.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;
    max-width: calc(100% - 28px);
    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;
    white-space: nowrap;
    backdrop-filter: blur(10px);
}

.gameplays-game-card__release-date {
    font-variant-numeric: tabular-nums;
}


.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{--gameplays-filter-options-max-height:15rem;max-height:none;overflow:visible;padding:.05rem;align-content:flex-start}
.gameplays-filter-group__panel .gameplays-filter-options.is-scrollable{max-height:var(--gameplays-filter-options-max-height);overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;scrollbar-gutter:stable}
@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);
}

button.gameplays-family-gameplay-card[data-gameplays-full-selector] {
    width: 100%;
    padding: 0;
    cursor: pointer;
    font: inherit;
    text-align: left;
    appearance: none;
}

.gameplays-family-gameplay-card[data-gameplays-full-selector].is-active {
    border-color: rgba(182, 255, 0, 0.72);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.28), 0 0 0 1px rgba(182, 255, 0, 0.1), 0 0 24px rgba(24, 168, 255, 0.08);
}

.gameplays-family-gameplay-card[data-gameplays-full-selector].is-active .gameplays-family-gameplay-card__body strong {
    color: #b6ff00;
}

.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;
    }
}

/* Family cover presentation. The outer media box keeps the normal cover
   dimensions; two complete member covers are contained in equal halves. */
.gameplays-family-cover {
    position:absolute;
    inset:0;
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    overflow:hidden;
    isolation:isolate;
    background:
        radial-gradient(circle at 18% 28%,rgba(182,255,0,.08),transparent 40%),
        radial-gradient(circle at 82% 72%,rgba(24,168,255,.12),transparent 42%),
        linear-gradient(145deg,#151e28 0%,#0b0f14 72%);
}
.gameplays-family-cover__panel {
    position:relative;
    min-width:0;
    overflow:hidden;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:4%;
}
.gameplays-family-cover__panel--primary {
    border-right:1px solid rgba(255,255,255,.08);
}
.gameplays-family-cover .gameplays-family-cover__image {
    display:block;
    width:100%;
    height:100%;
    object-fit:contain;
    object-position:center;
    aspect-ratio:auto;
    padding:0;
    border-radius:0;
    box-shadow:none;
    clip-path:none;
    filter:drop-shadow(0 10px 14px rgba(0,0,0,.42));
}


/* 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:flex-start;gap:22px;color:#8b98a8;font-size:.82rem;text-transform:uppercase;letter-spacing:.08em}.gameplays-expansion-parent__relation,.gameplays-expansion-parent__series{display:grid;gap:7px}.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-expansion-parent__series strong{color:#fff;text-transform:none;letter-spacing:0;font-size:.95rem}
.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;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.gameplays-expansion-row{position:relative;display:grid;grid-template-columns:72px minmax(0,1fr) auto auto;align-items:center;gap:15px;min-height:102px;padding:9px 16px 9px 10px;border:1px solid rgba(255,255,255,.13);border-radius:15px;background:linear-gradient(135deg,#19232e 0%,#131b24 100%);color:#fff;text-decoration:none;box-shadow:0 12px 30px rgba(0,0,0,.26),inset 0 1px 0 rgba(255,255,255,.025);overflow:hidden;transition:transform .2s ease,background-color .2s ease,border-color .2s ease,box-shadow .2s ease}.gameplays-expansion-row::after{content:"";position:absolute;inset:auto 0 0;height:2px;background:linear-gradient(90deg,transparent,rgba(24,168,255,.38),rgba(182,255,0,.72),transparent);opacity:.35;transition:opacity .22s ease}.gameplays-expansion-row:hover,.gameplays-expansion-row:focus-visible{transform:translateY(-2px);border-color:rgba(182,255,0,.68);background:linear-gradient(135deg,#1b2834 0%,#15212b 100%);box-shadow:0 18px 40px rgba(0,0,0,.36),0 0 24px rgba(182,255,0,.07)}.gameplays-expansion-row:hover::after,.gameplays-expansion-row:focus-visible::after{opacity:.9}.gameplays-expansion-row:focus-visible{outline:2px solid #18a8ff;outline-offset:3px}.gameplays-expansion-row__cover{width:72px;height:84px;border-radius:9px;overflow:hidden;background:#0b0f14;display:block;box-shadow:0 8px 18px rgba(0,0,0,.32)}.gameplays-expansion-row__cover img{width:100%;height:100%;object-fit:cover;transition:transform .28s ease}.gameplays-expansion-row:hover .gameplays-expansion-row__cover img{transform:scale(1.035)}.gameplays-expansion-row__content{display:grid;gap:9px;min-width:0}.gameplays-expansion-row__content strong{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:2;font-size:1.04rem;line-height:1.28;text-overflow:ellipsis;letter-spacing:-.01em}.gameplays-expansion-row__release{display:grid;gap:2px}.gameplays-expansion-row__release>span{font-size:.66rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#667484}.gameplays-expansion-row__release time{font-size:.82rem;color:#aeb8c3;font-weight:600}.gameplays-expansion-row__new{align-self:start;margin-top:3px;padding:5px 9px;border-radius:999px;background:#b6ff00;color:#050806;font-size:.66rem;font-weight:950;letter-spacing:.08em;box-shadow:0 0 20px rgba(182,255,0,.24)}.gameplays-expansion-row__arrow{color:#18a8ff;font-size:1.28rem;font-weight:800;transition:transform .22s ease,color .22s ease}.gameplays-expansion-row:hover .gameplays-expansion-row__arrow{transform:translateX(3px);color:#b6ff00}.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:900px){.gameplays-expansions__list{grid-template-columns:1fr}}
@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;gap:14px}.gameplays-expansion-row{grid-template-columns:62px minmax(0,1fr) auto;gap:12px;min-height:94px;padding:8px 11px 8px 8px}.gameplays-expansion-row__cover{width:62px;height:76px}.gameplays-expansion-row__new{grid-column:3;grid-row:1;align-self:start;margin-top:0}.gameplays-expansion-row__arrow{grid-column:3;grid-row:2;justify-self:end;align-self:end}.gameplays-expansion-row__content strong{font-size:.92rem}.gameplays-expansion-row__release time{font-size:.76rem}}


/* v3.3.2.5 Mobile Games Catalog UX & Search Redesign -------------------- */
.gameplays-mobile-catalog-primary{display:none}
@media(max-width:767px){
    .gameplays-catalog-toolbar{
        position:relative;
        top:auto;
        z-index:2;
        display:flex;
        flex-direction:column;
        gap:10px;
        margin:0 0 18px;
        padding:12px;
        overflow:visible;
        border-radius:14px;
        background:#0b0f14;
        backdrop-filter:none;
    }
    .gameplays-catalog-toolbar.is-stuck,
    .gameplays-catalog-toolbar.is-mobile-action-open{
        position:relative;
        top:auto;
        left:auto;
        right:auto;
        z-index:2;
        width:auto;
        max-height:none;
        margin:0 0 18px;
        overflow:visible;
        box-shadow:0 10px 28px rgba(0,0,0,.22),0 1px 0 rgba(24,168,255,.08) inset;
    }
    .gameplays-mobile-catalog-primary{display:block;order:1}
    .gameplays-mobile-search-control{display:flex;flex-direction:column;gap:6px}
    .gameplays-mobile-search-control>label{margin:0;color:#fff;font-size:.76rem;font-weight:850;letter-spacing:.07em;text-transform:uppercase}
    .gameplays-mobile-search-control__field{display:flex;align-items:center;gap:9px;min-height:46px;padding:0 12px;border:1px solid rgba(200,209,218,.2);border-radius:11px;background:#111820;transition:border-color .18s ease,box-shadow .18s ease,background .18s ease}
    .gameplays-mobile-search-control__field:focus-within{border-color:#b6ff00;background:#0d131a;box-shadow:0 0 0 3px rgba(182,255,0,.11)}
    .gameplays-mobile-search-control__field>span{flex:0 0 auto;color:#8b98a8;font-size:.92rem}
    .gameplays-mobile-search-control__field input{min-width:0;width:100%;height:44px;padding:0;border:0!important;outline:0!important;background:transparent!important;color:#fff!important;font:inherit;font-size:16px;box-shadow:none!important;-webkit-appearance:none;appearance:none}
    .gameplays-mobile-search-control__field input::placeholder{color:#738091;opacity:1}
    .gameplays-filter-toggle{order:2;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:8px;width:100%;min-height:44px;margin:0;padding:9px 12px;color:#fff;text-align:left;background:#111820;border:1px solid rgba(200,209,218,.18);border-radius:11px;font-size:.8rem;font-weight:850;cursor:pointer;transition:border-color .18s ease,background .18s ease,box-shadow .18s ease}
    .gameplays-filter-toggle:hover,.gameplays-filter-toggle:focus-visible{border-color:rgba(24,168,255,.55);background:#141e28;outline:none;box-shadow:0 0 0 3px rgba(24,168,255,.08)}
    .gameplays-filter-toggle[aria-expanded="true"]{border-color:rgba(182,255,0,.58);background:linear-gradient(145deg,rgba(182,255,0,.08),#111820 62%)}
    .gameplays-filter-toggle__chevron{width:8px;height:8px;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-toggle[aria-expanded="true"] .gameplays-filter-toggle__chevron{border-color:#b6ff00;transform:rotate(225deg) translate(-1px,-1px)}
    .gameplays-quick-view-section{order:3;display:none;margin:0;padding:10px;border:1px solid rgba(200,209,218,.12);border-radius:11px;background:#111820}
    .gameplays-catalog-toolbar.is-mobile-filters-expanded .gameplays-quick-view-section{display:block}
    .gameplays-catalog-toolbar .gameplays-quick-view-section{margin-bottom:0}
    .gameplays-quick-view-section__label{display:block;margin-bottom:8px}
    .gameplays-catalog-toolbar .gameplays-quick-views{gap:6px;margin:0}
    .gameplays-quick-view{min-height:36px;padding:7px 10px;font-size:.72rem}
    .gameplays-archive-controls{order:4;display:none;position:static;flex-direction:column;align-items:stretch;gap:8px;width:100%;margin:0!important;padding:10px!important;overflow:visible;background:#111820;border-radius:11px}
    .gameplays-archive-controls.is-open{display:flex}
    .gameplays-archive-controls .gameplays-search-control{display:none!important}
    .gameplays-filter-group,.gameplays-sort-control{width:100%;flex:0 0 auto}
    .gameplays-filter-group__panel{position:relative;top:auto;left:auto;width:100%;max-width:none;margin-top:6px;box-shadow:none}
    .gameplays-filter-options{--gameplays-filter-options-max-height:220px;max-height:none;overflow:visible;-webkit-overflow-scrolling:touch}
    .gameplays-clear-filters{width:100%}
    .gameplays-archive-status{order:5;margin:0;padding:2px 1px 0;gap:7px}
    .gameplays-archive-status>strong{font-size:.78rem}
    .gameplays-active-filters{gap:5px}
    .gameplays-filter-chip{min-height:29px;padding:5px 8px;font-size:.69rem}
    .gameplays-mobile-catalog-actions,.gameplays-mobile-catalog-close,.gameplays-catalog-mobile-sentinel{display:none!important}
    .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,
    .gameplays-catalog-toolbar.is-mobile-filters-open .gameplays-search-control{display:initial}
}
@media(max-width:480px){
    .gameplays-catalog-toolbar{margin-inline:-2px;padding:10px}
    .gameplays-quick-view{flex:1 1 calc(50% - 6px);justify-content:space-between}
}
@media(orientation:landscape) and (max-width:900px){
    .gameplays-filter-options{--gameplays-filter-options-max-height:145px}
}
@media(prefers-reduced-motion:reduce){
    .gameplays-mobile-search-control__field,.gameplays-filter-toggle,.gameplays-filter-toggle__chevron{transition:none}
}


/* v3.3.3.0 Game Page Brand Identity -------------------------------------- */
/* Central brand element: reserved exclusively for primary section headings. */
.gameplays-brand-section-header {
    position: relative;
}

.gameplays-brand-brush {
    --gp-brand-brush-image: none;
    position: relative;
    display: inline-grid;
    place-items: center;
    width: max-content;
    max-width: 100%;
    min-height: clamp(60px, 5.8vw, 76px);
    margin: 0;
    padding: .34em 1.28em .27em;
    isolation: isolate;
    color: #050709 !important;
    font-size: clamp(1.5rem, 2.7vw, 2.65rem);
    font-weight: 950;
    line-height: 1;
    letter-spacing: -.035em;
    white-space: nowrap;
}

.gameplays-brand-brush::before {
    content: "";
    position: absolute;
    inset: -13% -7%;
    z-index: -1;
    background-image: var(--gp-brand-brush-image);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
}

.gameplays-brand-brush > span {
    color: #050709 !important;
}

/* Preserve the established section rhythm while replacing only the heading UI. */
.gameplays-gameplay__header,
.gameplays-highlights__header,
.gameplays-trailer__header,
.gameplays-information__header,
.gameplays-screenshots .gameplays-section-heading,
.gameplays-expansions__header {
    min-width: 0;
}

@media (max-width: 700px) {
    .gameplays-brand-brush {
        min-height: 52px;
        padding-inline: 1em;
        font-size: clamp(1.12rem, 5.7vw, 1.72rem);
        letter-spacing: -.04em;
    }
}

@media (max-width: 390px) {
    .gameplays-brand-brush {
        padding-inline: .78em;
        font-size: clamp(.98rem, 5.15vw, 1.3rem);
    }
}

/* v3.3.3.6 Hero Ambient Light Correction ------------------------------- */
/* Keep the Game Page as one continuous surface. Only the Hero background
   directly behind the cover receives an electric-blue ambient light source. */
/* Preserve the successful Hero metadata treatment. */
.gameplays-hero__meta {
    position: relative;
    border-top-color: transparent;
}

.gameplays-hero__meta::before {
    content: "";
    position: absolute;
    left: -1%;
    right: 3%;
    top: -2px;
    height: 4px;
    pointer-events: none;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(182, 255, 0, 0.08) 8%,
        rgba(182, 255, 0, 0.31) 22%,
        rgba(182, 255, 0, 0.22) 68%,
        rgba(182, 255, 0, 0.07) 91%,
        transparent 100%
    );
    filter: blur(1.15px);
    box-shadow: 0 0 18px rgba(182, 255, 0, 0.14), 0 0 38px rgba(182, 255, 0, 0.075);
    opacity: .86;
}

.gameplays-hero__meta::after {
    content: "";
    position: absolute;
    left: -3%;
    right: 0;
    bottom: -23px;
    height: 6px;
    pointer-events: none;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(24, 168, 255, 0.075) 6%,
        rgba(24, 168, 255, 0.29) 23%,
        rgba(24, 168, 255, 0.21) 68%,
        rgba(24, 168, 255, 0.065) 94%,
        transparent 100%
    );
    filter: blur(1.4px);
    box-shadow: 0 0 21px rgba(24, 168, 255, 0.15), 0 0 44px rgba(24, 168, 255, 0.08);
    opacity: .88;
}

/* v3.3.3.6 hotfix: content sections use only their neutral surfaces and
   structural shadows. All section-level coloured gradients and ambient light
   effects are removed; the Hero remains untouched. */
.gameplays-gameplay__card {
    box-shadow: 0 34px 80px rgba(0, 0, 0, 0.38);
    filter: none;
}

.gameplays-highlight-card {
    box-shadow: 0 22px 48px rgba(0, 0, 0, 0.26);
    filter: none;
}

.gameplays-trailer__card {
    box-shadow: 0 30px 74px rgba(0, 0, 0, 0.34);
    filter: none;
}

.gameplays-information__card {
    box-shadow: var(--gp-polish-shadow);
    filter: none;
}

/* Preserve the established Gallery heading-to-content spacing. */
.gameplays-screenshots .gameplays-section-heading {
    margin-bottom: clamp(24px, 3vw, 34px);
}

@media (max-width: 700px) {
.gameplays-hero__meta::before {
        left: -1%;
        right: 2%;
        height: 3px;
        filter: blur(1px);
        opacity: .78;
    }

    .gameplays-hero__meta::after {
        left: -2%;
        right: 0;
        bottom: -18px;
        height: 4.5px;
        filter: blur(1.15px);
        opacity: .78;
    }

    .gameplays-gameplay__card,
    .gameplays-highlight-card,
    .gameplays-trailer__card,
    .gameplays-information__card {
        filter: none;
    }
}


/* v3.3.3.6 Unified Game Page Background ---------------------------------
 * Keep the Hero untouched. All public Game Page sections below the Hero sit
 * on one shared canvas owned by .gameplays-single-game. Cards retain their
 * existing backgrounds, borders and shadows.
 */
.gameplays-single-game {
    background: var(--gp-bg);
}

.gameplays-single-game .gameplays-gameplay,
.gameplays-single-game .gameplays-highlights,
.gameplays-single-game .gameplays-trailer,
.gameplays-single-game .gameplays-information,
.gameplays-single-game .gameplays-screenshots,
.gameplays-single-game .gameplays-expansions,
.gameplays-single-game .gameplays-major-dlc {
    background: transparent;
    background-image: none;
}


/* v3.3.3.8 Unified Background Architecture Fix --------------------------
 * The complete post-Hero content is owned by one shared canvas, matching
 * the homepage architecture. Individual sections remain transparent.
 */
.gameplays-single-game__content-canvas {
    position: relative;
    background: var(--gp-bg);
}

/* v3.3.3.9 Card Ambient Cleanup ------------------------------------------
 * Remove the remaining decorative pseudo-element light/accent layers from
 * post-Hero content cards. Card surfaces, borders, radii, shadows, layout,
 * spacing and interaction states remain unchanged.
 */
.gameplays-single-game__content-canvas .gameplays-gameplay__card::before,
.gameplays-single-game__content-canvas .gameplays-trailer__card::before,
.gameplays-single-game__content-canvas .gameplays-information__card::before {
    content: none;
    display: none;
}

/* v3.3.4.0 Hero Depth & Card Cleanup -------------------------------------
 * Keep post-Hero card surfaces free from decorative ambient layers.
 * Reuse the existing dedicated Hero background layer as a very restrained
 * electric-blue light source behind the cover; the cover itself is unchanged.
 */
.gameplays-single-game__content-canvas .gameplays-gameplay__card::before,
.gameplays-single-game__content-canvas .gameplays-gameplay__card::after,
.gameplays-single-game__content-canvas .gameplays-highlight-card::before,
.gameplays-single-game__content-canvas .gameplays-highlight-card::after {
    content: none;
    display: none;
}
@media (max-width: 700px) {
}


/* v3.3.4.3 Hero Cover Ambient Light (Wrapper Only) ----------------------
 * The ambient light belongs exclusively to the cover wrapper.
 * No Hero background, overlay or cover-image styling is changed.
 */
.gameplays-hero__cover::before {
    content: "";
    position: absolute;
    inset: 3px;
    z-index: -1;
    pointer-events: none;
    border-radius: 6px;
    background: transparent;
    box-shadow:
        0 0 20px 5px rgba(24, 168, 255, 0.34),
        0 0 38px 9px rgba(24, 168, 255, 0.16);
    opacity: 1;
}

/* Privacy-first YouTube click-to-load ------------------------------------ */
.gameplays-video-preview,
.gameplays-trailer__preview,
.gameplays-highlight-card__preview {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: block;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border: 0;
    padding: 0;
    background: #090d12;
    color: inherit;
    cursor: pointer;
    text-decoration: none;
}

.gameplays-video-preview__image,
.gameplays-video-preview__shade,
.gameplays-trailer__preview-image,
.gameplays-trailer__preview-shade {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.gameplays-video-preview__image,
.gameplays-trailer__preview-image {
    object-fit: cover;
    object-position: center;
}

.gameplays-video-preview__shade,
.gameplays-trailer__preview-shade {
    background: linear-gradient(180deg, rgba(5, 8, 12, 0.08), rgba(5, 8, 12, 0.34));
}

.gameplays-video-preview__play {
    position: absolute;
    z-index: 2;
    top: 50%;
    left: 50%;
    display: grid;
    width: clamp(58px, 7vw, 78px);
    height: clamp(58px, 7vw, 78px);
    place-items: center;
    border: 1px solid rgba(182, 255, 0, 0.82);
    border-radius: 50%;
    background: rgba(182, 255, 0, 0.96);
    box-shadow: 0 18px 46px rgba(0, 0, 0, 0.34), 0 0 32px rgba(182, 255, 0, 0.16);
    transform: translate(-50%, -50%);
}

.gameplays-video-preview__play span {
    display: block;
    width: 0;
    height: 0;
    margin-left: 5px;
    border-top: 9px solid transparent;
    border-bottom: 9px solid transparent;
    border-left: 15px solid #0b0f14;
}

.gameplays-video-preview:focus-visible,
.gameplays-trailer__preview:focus-visible,
.gameplays-highlight-card__preview:focus-visible {
    outline: 2px solid var(--gp-lime);
    outline-offset: -4px;
}

.gameplays-trailer__preview-play {
    position: absolute;
    z-index: 2;
    top: 50%;
    left: 50%;
    margin: 0;
    transform: translate(-50%, -50%);
}

.gameplays-highlight-card__preview {
    background: var(--gp-bg);
}

.gameplays-highlight-card__media iframe {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

.gameplays-highlight-card__media.is-video-loaded::before,
.gameplays-highlight-card__media.is-video-loaded::after {
    display: none;
}

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

@media (max-width: 620px) {
    .gameplays-video-preview__play {
        width: 44px;
        height: 44px;
    }

    .gameplays-video-preview__play span {
        margin-left: 4px;
        border-top-width: 7px;
        border-bottom-width: 7px;
        border-left-width: 12px;
    }
}

/* v3.3.5.12 Games Archive Browser-Robust Layout ------------------------- */
/* Real DOM wrappers replace the v3.3.5.10/11 display:contents test approach. */
.gameplays-catalog-layout,
.gameplays-catalog-sidebar,
.gameplays-catalog-results {
    min-width: 0;
}

@media (min-width: 768px) {
    .gameplays-games-archive__inner {
        display: block;
    }

    .gameplays-catalog-sticky-sentinel {
        display: none;
    }

    .gameplays-catalog-toolbar,
    .gameplays-catalog-toolbar.is-stuck {
        position: static;
        top: auto;
        z-index: auto;
        display: block;
        width: auto;
        max-height: none;
        margin: 0 0 clamp(18px, 2vw, 26px);
        padding: 0;
        overflow: visible;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
        backdrop-filter: none;
    }

    .gameplays-catalog-toolbar .gameplays-mobile-catalog-close,
    .gameplays-catalog-toolbar .gameplays-mobile-catalog-primary,
    .gameplays-catalog-toolbar .gameplays-filter-toggle {
        display: none !important;
    }

    .gameplays-catalog-toolbar .gameplays-quick-view-section {
        display: flex;
        margin: 0;
        padding: .8rem clamp(.9rem, 1.5vw, 1.2rem);
        border: 1px solid rgba(200,209,218,.12);
        border-radius: var(--gameplays-radius, 16px);
        background: #111820;
    }

    .gameplays-catalog-layout {
        display: grid;
        grid-template-columns: 280px minmax(0, 1fr);
        gap: clamp(26px, 2.4vw, 36px);
        align-items: start;
    }

    .gameplays-catalog-sidebar {
        display: flex;
        flex-direction: column;
        gap: 10px;
        padding: 16px;
        border: 1px solid rgba(200,209,218,.12);
        border-radius: 16px;
        background: #111820;
    }

    .gameplays-catalog-sidebar .gameplays-archive-controls {
        display: flex;
        position: static;
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
        width: 100%;
        margin: 0;
        padding: 0;
        overflow: visible;
        border: 0;
        border-radius: 0;
        background: transparent;
    }

    .gameplays-catalog-sidebar .gameplays-search-control,
    .gameplays-catalog-sidebar .gameplays-filter-group {
        width: 100%;
        min-width: 0;
        flex: 0 0 auto;
    }

    .gameplays-catalog-sidebar .gameplays-filter-group__panel {
        position: relative;
        top: auto;
        left: auto;
        width: 100%;
        max-width: none;
        margin-top: 6px;
        box-shadow: none;
    }

    .gameplays-catalog-sidebar .gameplays-clear-filters {
        width: 100%;
        margin-top: 2px;
    }

    .gameplays-catalog-sidebar > .gameplays-active-filters {
        display: flex;
        width: 100%;
        gap: 6px;
        flex-wrap: wrap;
        margin-top: 2px;
    }

    .gameplays-catalog-results {
        display: flex;
        min-width: 0;
        flex-direction: column;
    }

    .gameplays-catalog-results .gameplays-archive-status {
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
        flex-direction: row;
        gap: 18px;
        width: 100%;
        margin: 0 0 16px;
        padding: 0;
    }

    .gameplays-catalog-results .gameplays-archive-status > strong {
        min-width: 0;
        padding-bottom: 11px;
        color: #fff;
        font-size: clamp(1rem, 1.35vw, 1.18rem);
        font-weight: 900;
    }

    .gameplays-catalog-results .gameplays-sort-control {
        flex: 0 0 min(230px, 42%);
        width: min(230px, 42%);
    }

    .gameplays-catalog-results .gameplays-games-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        column-gap: clamp(18px, 1.6vw, 26px);
    }
}

@media (min-width: 980px) and (max-width: 1319px) {
    .gameplays-catalog-layout {
        grid-template-columns: 240px minmax(0, 1fr);
        gap: 26px;
    }

    .gameplays-catalog-results .gameplays-games-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        column-gap: 20px;
    }
}

@media (min-width: 768px) and (max-width: 979px) {
    .gameplays-catalog-layout {
        grid-template-columns: 220px minmax(0, 1fr);
        gap: 20px;
    }

    .gameplays-catalog-sidebar {
        gap: 8px;
        padding: 13px;
    }

    .gameplays-catalog-sidebar .gameplays-archive-controls {
        gap: 10px;
    }

    .gameplays-catalog-results .gameplays-archive-status {
        gap: 12px;
    }

    .gameplays-catalog-results .gameplays-sort-control {
        flex-basis: min(205px, 46%);
        width: min(205px, 46%);
    }

    .gameplays-catalog-results .gameplays-games-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 18px;
    }
}

@media (max-width: 767px) {
    .gameplays-games-archive__inner,
    .gameplays-catalog-layout {
        display: block;
    }

    .gameplays-catalog-toolbar {
        display: flex;
    }

    .gameplays-catalog-sidebar {
        display: block;
        width: 100%;
        margin: 0 0 10px;
        padding: 0;
        border: 0;
        background: transparent;
    }

    .gameplays-catalog-sidebar .gameplays-archive-controls {
        width: 100%;
        margin: 0 !important;
    }

    .gameplays-catalog-sidebar > .gameplays-active-filters {
        display: flex;
        width: 100%;
        gap: 5px;
        flex-wrap: wrap;
        margin: 8px 1px 0;
    }

    .gameplays-catalog-results .gameplays-archive-status {
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
        flex-direction: row;
        gap: 10px;
        width: 100%;
        margin: 0 0 12px;
        padding: 2px 1px 0;
    }

    .gameplays-catalog-results .gameplays-archive-status > strong {
        flex: 1 1 auto;
        min-width: 0;
        padding-bottom: 10px;
        font-size: .78rem;
    }

    .gameplays-catalog-results .gameplays-sort-control {
        flex: 0 1 48%;
        width: min(48%, 190px);
    }

    .gameplays-catalog-results .gameplays-sort-control label {
        margin-bottom: .3rem;
    }

    .gameplays-catalog-results .gameplays-games-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 12px;
        row-gap: 14px;
    }
}

/* v3.3.5.15 Games Archive Desktop Sticky Finalization */
@media (min-width: 1320px) {
  .gameplays-catalog-sidebar {
    position: sticky;
    top: 96px;
    align-self: start;
    max-height: calc(100vh - 116px);
    overflow: visible;
  }

  .gameplays-catalog-sidebar .gameplays-archive-controls {
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
  }

  .admin-bar .gameplays-catalog-sidebar {
    top: 128px;
    max-height: calc(100vh - 148px);
  }
}
/* v3.3.7.1 Gameplay Highlight vertical presentation ----------------------- */
.gameplays-highlights__grid {
    grid-template-columns: repeat(3, minmax(0, 240px));
    justify-content: start;
    gap: clamp(16px, 2vw, 24px);
}

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

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

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

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

/* Phase 3D — logged-in Games Catalog personal layer. Guest cards retain the
   existing card structure because this footer is rendered only for members. */
.gameplays-game-card--member {
    display: flex;
    height: 100%;
    flex-direction: column;
    overflow: hidden;
    border-radius: 16px;
    background: var(--gp-card);
    box-shadow: 0 18px 38px rgba(0, 0, 0, 0.2);
    transform: translateZ(0);
    transition: transform 220ms ease, box-shadow 220ms ease;
}
.gameplays-game-card--member .gameplays-game-card__link {
    height: auto;
    min-height: 0;
    flex: 1 1 auto;
    border-radius: 16px 16px 0 0;
    box-shadow: none;
    transform: none;
}
.gameplays-game-card--member .gameplays-game-card__link:hover,
.gameplays-game-card--member .gameplays-game-card__link:focus-visible { transform: none; }
.gameplays-game-card--member:has(.gameplays-game-card__link:hover),
.gameplays-game-card--member:has(.gameplays-game-card__link:focus-visible) {
    transform: translateY(-4px) scale(1.006);
    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);
}
.gameplays-game-card__member-footer {
    flex: 0 0 auto;
    padding: 8px 9px 9px;
    border: 1px solid rgba(200, 209, 218, 0.13);
    border-top: 0;
    border-radius: 0 0 16px 16px;
    background: #111820;
}
.gameplays-game-card__mgb-button {
    display: inline-flex;
    width: 100%;
    min-height: 36px;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 7px 9px;
    border: 1px solid rgba(200, 209, 218, 0.2);
    border-radius: 9px;
    background: #0b0f14;
    color: #c8d1da;
    font-size: .72rem;
    font-weight: 850;
    line-height: 1.2;
    cursor: pointer;
    transition: border-color .18s ease, background .18s ease, color .18s ease, box-shadow .18s ease;
}
.gameplays-game-card__mgb-button:hover,
.gameplays-game-card__mgb-button:focus-visible {
    border-color: rgba(24,168,255,.58);
    color: #fff;
    outline: none;
    box-shadow: 0 0 0 3px rgba(24,168,255,.08);
}
.gameplays-game-card__mgb-button.is-active {
    border-color: rgba(182,255,0,.62);
    background: rgba(182,255,0,.08);
    color: var(--gp-lime, #b6ff00);
}
.gameplays-game-card__mgb-button.is-active:hover,
.gameplays-game-card__mgb-button.is-active:focus-visible { border-color: var(--gp-lime, #b6ff00); color: #d6ff4d; }
.gameplays-game-card__mgb-button.is-loading { opacity: .58; cursor: progress; }
.gameplays-catalog-mgb-bridge > [data-single-mgb-contexts],
.gameplays-catalog-mgb-bridge > [data-single-mgb-actions],
.gameplays-catalog-mgb-bridge > [data-single-mgb-state] { display: none !important; }
@media(max-width:767px){
    .gameplays-game-card__member-footer { padding: 7px; }
    .gameplays-game-card__mgb-button { min-height: 40px; padding-inline: 6px; font-size: .68rem; }
}
@media(prefers-reduced-motion:reduce){
    .gameplays-game-card--member,
    .gameplays-game-card__mgb-button { transition: none; }
    .gameplays-game-card--member:has(.gameplays-game-card__link:hover),
    .gameplays-game-card--member:has(.gameplays-game-card__link:focus-visible) { transform: none; }
}

/* v3.3.11.49 Single Game Brand System Alignment -------------------------
 * Scope: public Single Game / Expansion detail architecture only.
 * Shared brush CSS/assets remain available for Gameplay Page, Contact and
 * other contexts that still use the central brand-brush component.
 */
.gameplays-single-game-section-heading {
    display: grid;
    min-width: 0;
    gap: 0;
}

.gameplays-single-game-section-heading__marker {
    display: block;
    width: 92px;
    height: 3px;
    margin: 0 0 14px;
    background: linear-gradient(90deg, var(--gp-lime), var(--gp-blue));
    pointer-events: none;
}

.gameplays-single-game-section-heading > .gameplays-single-game-section-heading__title {
    max-width: 100%;
    margin: 0;
    color: var(--gp-white);
    font-size: clamp(1.72rem, 2.75vw, 2.9rem);
    font-weight: 950;
    line-height: .98;
    letter-spacing: -.04em;
    text-transform: uppercase;
    text-wrap: balance;
}

.gameplays-single-game-section-heading__accent {
    color: var(--gp-lime);
}

/* Gameplay keeps its existing secondary status label beside the grouped
 * marker/title without changing the section's flex/header architecture. */
.gameplays-gameplay__header > .gameplays-single-game-section-heading {
    flex: 1 1 auto;
}

/* Highlights gains one presentation-only section panel. The existing grid,
 * item-count classes, 9:16 cards, links and interaction remain untouched. */
.gameplays-single-game .gameplays-highlights__panel {
    box-sizing: border-box;
    width: 100%;
    padding: 24px;
    border: 1px solid rgba(200, 209, 218, .13);
    border-radius: 16px;
    background: rgba(17, 24, 32, .78);
    box-shadow: 0 18px 42px rgba(0, 0, 0, .2);
}

/* When exactly one Highlight is available, keep the existing card markup and
 * sizing, but let the grid itself occupy the panel width and center its single
 * fixed-width track. This makes the positioning authoritative even when older
 * Highlights rules keep justify-content:start on the generic grid. */
.gameplays-single-game .gameplays-highlights__grid--one {
    width: 100%;
    max-width: none;
    margin-inline: 0;
    grid-template-columns: minmax(0, min(300px, 100%));
    justify-content: center;
}

@media (max-width: 940px) {
    .gameplays-single-game .gameplays-highlights__grid--one {
        grid-template-columns: minmax(0, min(275px, 100%));
    }
}

@media (max-width: 700px) {
    .gameplays-single-game-section-heading__marker {
        width: 66px;
    }

    .gameplays-single-game-section-heading > .gameplays-single-game-section-heading__title {
        font-size: clamp(1.5rem, 7vw, 2rem);
        line-height: 1.02;
    }

    .gameplays-single-game .gameplays-highlights__panel {
        padding: 16px;
        border-radius: 14px;
    }
}

/* v3.3.11.69 Games Archive Accepted Compact Desktop Controls ------------- */
/*
 * Canonicalize the pre-v3.3.11.68 accepted desktop presentation with fresh
 * package assets: the sidebar stays independent, while Quick View and Sort
 * share one compact results-column controls row above the card grid. The DOM,
 * filter/quick-view/sort state and mobile Catalog flow remain unchanged.
 */
@media (min-width: 768px) {
    .gameplays-games-archive__inner {
        position: relative;
        --gameplays-catalog-sidebar-width: 280px;
        --gameplays-catalog-layout-gap: clamp(26px, 2.4vw, 36px);
        --gameplays-catalog-sort-width: 230px;
        --gameplays-catalog-controls-gap: 18px;
    }

    .gameplays-catalog-toolbar,
    .gameplays-catalog-toolbar.is-stuck {
        width: auto;
        margin: 0 0 16px calc(var(--gameplays-catalog-sidebar-width) + var(--gameplays-catalog-layout-gap));
    }

    .gameplays-catalog-toolbar .gameplays-quick-view-section {
        box-sizing: border-box;
        width: calc(100% - var(--gameplays-catalog-sort-width) - var(--gameplays-catalog-controls-gap));
        min-width: 0;
    }

    .gameplays-catalog-results .gameplays-archive-status {
        position: absolute;
        top: 0;
        right: 0;
        z-index: 1;
        display: block;
        width: var(--gameplays-catalog-sort-width);
        margin: 0;
        padding: 0;
    }

    .gameplays-catalog-results .gameplays-archive-status__counter {
        position: absolute !important;
        width: 1px !important;
        height: 1px !important;
        margin: -1px !important;
        padding: 0 !important;
        overflow: hidden !important;
        clip: rect(0 0 0 0) !important;
        clip-path: inset(50%) !important;
        white-space: nowrap !important;
        border: 0 !important;
    }

    .gameplays-catalog-results .gameplays-sort-control {
        width: 100%;
        max-width: none;
        flex: none;
    }
}

@media (min-width: 980px) and (max-width: 1319px) {
    .gameplays-games-archive__inner {
        --gameplays-catalog-sidebar-width: 240px;
        --gameplays-catalog-layout-gap: 26px;
    }
}

@media (min-width: 768px) and (max-width: 979px) {
    .gameplays-games-archive__inner {
        --gameplays-catalog-sidebar-width: 220px;
        --gameplays-catalog-layout-gap: 20px;
        --gameplays-catalog-sort-width: 205px;
        --gameplays-catalog-controls-gap: 12px;
    }
}

/* v3.3.11.70 Games Archive Accepted Mobile Sticky Catalog Actions -------- */
/*
 * Re-enable the existing v2.9.2 sticky actionbar runtime/presentation after
 * the later v3.3.2.5 mobile redesign disabled its DOM. Only bridge the current
 * v3.3.5.12 sidebar wrapper; Search/Filters state stays in canonical .67 JS.
 */
@media (max-width: 767px) {
    .gameplays-catalog-mobile-sentinel {
        display: block !important;
    }

    .gameplays-mobile-catalog-actions {
        display: flex !important;
    }

    /* The current filter panel is no longer a toolbar descendant. Keep the
     * existing JS state classes and expose only the close control in the fixed
     * toolbar shell while the existing sidebar panel is presented below it. */
    .gameplays-catalog-toolbar.is-mobile-action-open {
        position: fixed !important;
        top: calc(var(--gameplays-catalog-sticky-offset) + 64px) !important;
        right: 22px !important;
        left: auto !important;
        z-index: 108 !important;
        display: block !important;
        width: 38px !important;
        height: 38px !important;
        max-height: 38px !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    .gameplays-catalog-toolbar.is-mobile-action-open > :not(.gameplays-mobile-catalog-close) {
        display: none !important;
    }

    .gameplays-catalog-toolbar.is-mobile-action-open .gameplays-mobile-catalog-close {
        position: static !important;
        display: flex !important;
        margin: 0 !important;
    }

    .gameplays-games-archive__inner:has(.gameplays-catalog-toolbar.is-mobile-action-open)
        .gameplays-catalog-sidebar .gameplays-archive-controls.is-open {
        position: fixed;
        top: calc(var(--gameplays-catalog-sticky-offset) + 64px);
        left: 12px;
        right: 12px;
        z-index: 107;
        display: flex !important;
        width: auto;
        max-height: calc(100dvh - var(--gameplays-catalog-sticky-offset) - 76px);
        margin: 0 !important;
        padding: 52px 12px 12px !important;
        overflow: auto;
        border: 1px solid rgba(200,209,218,.2);
        border-radius: 14px;
        background: rgba(11,15,20,.99);
        box-shadow: 0 22px 52px rgba(0,0,0,.42);
    }

    .gameplays-games-archive__inner:has(.gameplays-catalog-toolbar.is-mobile-search-open)
        .gameplays-catalog-sidebar .gameplays-archive-controls.is-open .gameplays-filter-group,
    .gameplays-games-archive__inner:has(.gameplays-catalog-toolbar.is-mobile-search-open)
        .gameplays-catalog-sidebar .gameplays-archive-controls.is-open .gameplays-clear-filters {
        display: none !important;
    }

    .gameplays-games-archive__inner:has(.gameplays-catalog-toolbar.is-mobile-search-open)
        .gameplays-catalog-sidebar .gameplays-archive-controls.is-open .gameplays-search-control {
        display: flex !important;
        width: 100%;
        flex-basis: 100%;
    }

    .gameplays-games-archive__inner:has(.gameplays-catalog-toolbar.is-mobile-filters-open)
        .gameplays-catalog-sidebar .gameplays-archive-controls.is-open .gameplays-search-control {
        display: none !important;
    }

    .gameplays-games-archive__inner:has(.gameplays-catalog-toolbar.is-mobile-filters-open)
        .gameplays-catalog-sidebar .gameplays-archive-controls.is-open .gameplays-filter-group,
    .gameplays-games-archive__inner:has(.gameplays-catalog-toolbar.is-mobile-filters-open)
        .gameplays-catalog-sidebar .gameplays-archive-controls.is-open .gameplays-clear-filters {
        display: block !important;
    }
}

@media (max-width: 390px) {
    .gameplays-catalog-toolbar.is-mobile-action-open {
        right: 18px !important;
    }

    .gameplays-games-archive__inner:has(.gameplays-catalog-toolbar.is-mobile-action-open)
        .gameplays-catalog-sidebar .gameplays-archive-controls.is-open {
        left: 8px;
        right: 8px;
    }
}