@layer components {
    .game-wall {
        --game-wall-padding: clamp(var(--space-20), 3vw, 2.5rem);

        position: relative;
        isolation: isolate;
        display: grid;
        grid-template-columns: minmax(9rem, 17.5rem) minmax(0, 1fr);
        gap: clamp(var(--space-20), 4vw, 3rem);
        align-items: center;
        min-height: clamp(19rem, 29vw, 27rem);
        margin-top: var(--space-20);
        padding: var(--game-wall-padding);
        overflow: hidden;
        border: 0.0625rem solid rgb(255 255 255 / 18%);
        border-radius: var(--radius-corner);
        color: var(--color-text-inverse);
        background-color: #050b16;
        background-position: center top, center;
        background-repeat: no-repeat;
        background-size: 100% auto, cover;
        box-shadow: 0 1.5rem 4rem rgb(0 0 0 / 24%);
    }

    .game-wall::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 0;
        background:
            linear-gradient(180deg, rgb(5 11 22 / 10%) 0%, rgb(5 11 22 / 16%) 42%, rgb(5 11 22 / 82%) 78%, rgb(5 11 22 / 100%) 100%),
            linear-gradient(90deg, rgb(5 11 22 / 98%) 0%, rgb(8 12 26 / 92%) 22%, rgb(16 10 31 / 68%) 52%, rgb(5 11 22 / 96%) 100%),
            linear-gradient(180deg, rgb(5 11 22 / 76%) 0%, rgb(5 11 22 / 18%) 42%, rgb(5 11 22 / 94%) 100%),
            radial-gradient(circle at 23% 18%, rgb(255 0 190 / 22%), transparent 34%),
            radial-gradient(circle at 68% 20%, rgb(109 62 255 / 18%), transparent 36%);
        pointer-events: none;
    }

    .game-wall::after {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 0;
        border-radius: inherit;
        background:
            linear-gradient(180deg, transparent 0%, transparent 54%, rgb(5 11 22 / 68%) 86%, rgb(5 11 22 / 96%) 100%),
            radial-gradient(ellipse at 54% 38%, transparent 0%, rgb(5 11 22 / 26%) 56%, rgb(5 11 22 / 92%) 100%),
            linear-gradient(90deg, rgb(5 11 22 / 82%) 0%, transparent 24%, transparent 70%, rgb(5 11 22 / 92%) 100%);
        box-shadow: inset 0 0 0 0.0625rem rgb(255 255 255 / 8%);
        pointer-events: none;
    }

    .game-wall--default-image::before {
        background:
            linear-gradient(180deg, rgb(5 11 22 / 6%) 0%, rgb(5 11 22 / 18%) 36%, rgb(5 11 22 / 78%) 64%, rgb(5 11 22 / 100%) 78%, rgb(5 11 22 / 100%) 100%),
            linear-gradient(90deg, rgb(5 11 22 / 98%) 0%, rgb(8 12 26 / 88%) 18%, rgb(16 10 31 / 46%) 50%, rgb(5 11 22 / 96%) 100%),
            radial-gradient(circle at 23% 18%, rgb(255 0 190 / 16%), transparent 34%),
            radial-gradient(circle at 68% 20%, rgb(109 62 255 / 14%), transparent 36%);
    }

    .game-wall--default-image::after {
        background:
            linear-gradient(180deg, transparent 0%, transparent 34%, rgb(5 11 22 / 66%) 58%, rgb(5 11 22 / 98%) 72%, rgb(5 11 22 / 100%) 100%),
            radial-gradient(ellipse at 52% 28%, transparent 0%, rgb(5 11 22 / 20%) 44%, rgb(5 11 22 / 90%) 88%),
            linear-gradient(90deg, rgb(5 11 22 / 86%) 0%, transparent 24%, transparent 68%, rgb(5 11 22 / 94%) 100%);
    }

    .game-wall__media,
    .game-wall-information,
    .game-wall-series,
    .game__edit {
        position: relative;
        z-index: 1;
    }

    .game-wall__media {
        min-width: 0;
    }

    .game-wall-packshot {
        position: relative;
        width: min(100%, 17.5rem);
        aspect-ratio: 1;
        overflow: hidden;
        border: 0.0625rem solid color-mix(in srgb, var(--color-brand-primary) 64%, var(--color-white) 20%);
        border-radius: var(--radius-corner);
        background: var(--color-media-placeholder-bg);
        box-shadow:
            0 1.1rem 2.6rem rgb(0 0 0 / 36%),
            0 0 2rem color-mix(in srgb, var(--color-brand-primary) 28%, transparent);
    }

    .game-wall-packshot--award-winner {
        border-color: #d4af37;
        box-shadow:
            0 1.1rem 2.6rem rgb(0 0 0 / 40%),
            0 0 0 0.1875rem rgb(132 96 15 / 86%),
            0 0 2.4rem rgb(212 175 55 / 34%);
    }

    .game-wall-packshot__image {
        display: block;
        width: 100%;
        height: 100%;
        border-radius: inherit;
        object-fit: cover;
    }

    .game-wall-award-badge {
        position: absolute;
        right: auto;
        bottom: var(--space-12);
        left: var(--space-12);
        z-index: 4;
        display: inline-flex;
        gap: var(--space-6);
        align-items: center;
        max-width: calc(100% - (var(--space-12) * 2));
        min-height: 2.25rem;
        padding: 0 var(--space-12);
        overflow: hidden;
        border: 0.125rem solid;
        border-radius: var(--radius-round);
        font-size: var(--text-xs);
        font-weight: var(--font-weight-extrabold);
        line-height: var(--leading-none);
        text-decoration: none;
        text-transform: uppercase;
        box-shadow: 0 0.65rem 1.4rem rgb(0 0 0 / 32%);
        transition: transform 0.16s ease, box-shadow 0.16s ease, filter 0.16s ease;
    }

    .game-wall-award-badge:hover,
    .game-wall-award-badge:focus-visible {
        transform: translateY(-0.0625rem);
        box-shadow: 0 0.9rem 1.8rem rgb(0 0 0 / 36%);
        filter: brightness(1.04);
    }

    .game-wall-award-badge--winner {
        border-color: #80600f;
        color: var(--color-text-inverse);
        background: linear-gradient(135deg, #80600f 0%, #b88a18 45%, #d4af37 100%);
    }

    .game-wall-award-badge--nominee {
        border-color: #5f6670;
        color: #07111f;
        background: linear-gradient(135deg, #eef1f5 0%, #c6ccd4 52%, #aeb6c0 100%);
    }

    .game-wall-award-badge__icon.svg-sprite {
        position: static;
        display: block;
        flex: 0 0 auto;
        width: 0.95rem;
        height: 0.95rem;
        overflow: visible;
        fill: currentColor;
    }

    .game-wall-award-badge span {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .game-wall-favorite.heart,
    .game-wall-favorite.heart:hover,
    .game-wall-favorite.heart:focus-visible,
    .game-wall-favorite.heart.active,
    .game-wall-favorite.heart.select {
        position: absolute;
        top: var(--space-12);
        right: var(--space-12);
        z-index: 4;
        display: grid;
        place-items: center;
        width: 3.25rem;
        height: 3.25rem;
        min-height: 0;
        margin: 0;
        padding: 0;
        border: 0.0625rem solid rgb(255 255 255 / 34%);
        border-radius: var(--radius-round);
        color: var(--color-text-inverse);
        background: rgb(5 9 18 / 30%);
        box-shadow: 0 0.7rem 1.5rem rgb(0 0 0 / 30%);
        backdrop-filter: blur(0.35rem);
        transform: none;
    }

    .game-wall-favorite.heart::before,
    .game-wall-favorite.heart:hover::before,
    .game-wall-favorite.heart:focus-visible::before,
    .game-wall-favorite.heart.active::before,
    .game-wall-favorite.heart.select::before {
        content: none;
        display: none;
    }

    .game-wall-favorite__icon.svg-sprite {
        grid-area: 1 / 1;
        position: static;
        display: block;
        width: 1.75rem;
        height: 1.75rem;
        overflow: visible;
        fill: currentColor;
        transition: opacity 0.18s ease, transform 0.18s ease;
    }

    .game-wall-favorite__icon.game-wall-favorite__icon--solid,
    .game-wall-favorite.heart.select .game-wall-favorite__icon--regular,
    .game-wall-favorite.heart.active .game-wall-favorite__icon--regular,
    .game-wall-favorite.heart:not(.disabled):not(:disabled):hover .game-wall-favorite__icon--regular,
    .game-wall-favorite.heart:not(.disabled):not(:disabled):focus-visible .game-wall-favorite__icon--regular {
        display: none;
    }

    .game-wall-favorite.heart.select .game-wall-favorite__icon--solid,
    .game-wall-favorite.heart.active .game-wall-favorite__icon--solid,
    .game-wall-favorite.heart:not(.disabled):not(:disabled):hover .game-wall-favorite__icon--solid,
    .game-wall-favorite.heart:not(.disabled):not(:disabled):focus-visible .game-wall-favorite__icon--solid {
        display: block;
    }

    .game-wall-favorite.heart.select,
    .game-wall-favorite.heart.active {
        color: var(--color-brand-primary);
    }

    .game-wall-favorite.heart:not(.disabled):not(:disabled):hover,
    .game-wall-favorite.heart:not(.disabled):not(:disabled):focus-visible {
        border-color: rgb(255 255 255 / 56%);
        background: rgb(5 9 18 / 44%);
    }

    .game-wall-favorite.heart:not(.disabled):not(:disabled):hover .game-wall-favorite__icon,
    .game-wall-favorite.heart:not(.disabled):not(:disabled):focus-visible .game-wall-favorite__icon {
        transform: scale(1.05);
    }

    .game-wall-inloggen {
        display: none;
    }

    .game-wall-inloggen.show {
        position: absolute;
        inset: auto var(--space-12) var(--space-12) var(--space-12);
        z-index: 5;
        display: block;
        padding: var(--space-12);
        border: 0.0625rem solid rgb(255 255 255 / 18%);
        border-radius: var(--radius-corner);
        color: var(--color-text-inverse);
        background: rgb(6 13 28 / 88%);
        box-shadow: 0 0.75rem 2rem rgb(0 0 0 / 32%);
        backdrop-filter: blur(0.4rem);
    }

    .game-wall-inloggen p {
        margin: 0;
        font-size: var(--text-sm);
        font-weight: var(--font-weight-bold);
        line-height: var(--leading-body);
    }

    .game-wall-information {
        display: grid;
        gap: clamp(var(--space-18), 2.5vw, var(--space-28));
        min-width: 0;
        max-width: 62rem;
    }

    .game-wall-information-header h1 {
        margin: 0;
        color: var(--color-text-inverse);
        font-size: var(--text-4xl);
        line-height: 0.95;
        letter-spacing: 0;
        overflow-wrap: anywhere;
        text-shadow: 0 0.65rem 1.75rem rgb(0 0 0 / 32%);
    }

    .game-wall-information-details {
        display: grid;
        gap: clamp(var(--space-18), 2.3vw, var(--space-28));
    }

    .game-wall-meta {
        --game-wall-meta-gap: clamp(var(--space-20), 3vw, 3.5rem);

        display: grid;
        column-gap: var(--game-wall-meta-gap);
        row-gap: var(--space-18);
        min-width: 0;
    }

    .game-wall-meta--primary {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }

    .game-wall-meta--secondary {
        grid-template-columns: minmax(8rem, 0.85fr) minmax(9rem, 1fr) minmax(12rem, 1.35fr);
        padding-top: clamp(var(--space-18), 2.3vw, var(--space-26));
        border-top: 0.0625rem solid rgb(255 255 255 / 28%);
    }

    .game-wall-meta--support {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        padding-top: var(--space-18);
        border-top: 0.0625rem solid rgb(255 255 255 / 18%);
    }

    .game-wall-meta__item {
        position: relative;
        display: grid;
        align-content: start;
        gap: var(--space-8);
        min-width: 0;
    }

    .game-wall-meta__item + .game-wall-meta__item::before {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        left: calc(var(--game-wall-meta-gap) / -2);
        width: 0.0625rem;
        background: rgb(255 255 255 / 28%);
        transform: translateX(-50%);
        pointer-events: none;
    }

    .game-wall-meta__label,
    .game-wall-meta__value,
    .game-wall-meta__empty {
        margin: 0;
    }

    .game-wall-meta__label {
        color: rgb(255 255 255 / 82%);
        font-size: var(--text-sm);
        line-height: var(--leading-none);
    }

    .game-wall-meta__value,
    .game-wall-meta__empty {
        color: rgb(255 255 255 / 93%);
        font-size: var(--text-md);
        font-weight: var(--font-weight-bold);
        line-height: 1.35;
    }

    .game-wall-meta__value a {
        color: var(--color-text-inverse);
    }

    .game-wall-meta__item.releasedate .game-wall-meta__value {
        white-space: nowrap;
    }

    .game-wall-right-details-platforms,
    .game-wall-tags,
    .game-wall-score {
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-8);
        align-items: center;
        min-width: 0;
    }

    .game-wall .game-platform {
        min-width: 3.15rem;
        max-width: none;
        min-height: 2rem;
        padding: 0 var(--space-12);
        aspect-ratio: auto;
        border-radius: var(--radius-round);
        color: var(--color-text-inverse);
        box-shadow: 0 0.45rem 1.1rem rgb(0 0 0 / 24%);
    }

    .game-wall-tag {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 2rem;
        padding: 0 var(--space-12);
        border-radius: var(--radius-round);
        color: var(--color-text-inverse);
        background: rgb(255 255 255 / 26%);
        font-size: var(--text-xs);
        font-weight: var(--font-weight-bold);
        line-height: 1;
        white-space: nowrap;
    }

    .game-wall-score .post-rs-stars {
        display: inline-flex;
        gap: 0.1rem;
        align-items: center;
        color: var(--color-text-inverse);
    }

    .game-wall-score .review-score-star.svg-sprite {
        position: static;
        display: block;
        width: 1.35rem;
        height: 1.35rem;
        overflow: visible;
        fill: currentColor;
    }

    .game-wall-score__number {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 2rem;
        padding: 0 var(--space-12);
        border-radius: var(--radius-round);
        color: var(--color-text-inverse);
        background: rgb(255 255 255 / 18%);
        font-size: var(--text-sm);
        font-weight: var(--font-weight-extrabold);
        line-height: 1;
    }

    .game-wall-community-score {
        display: grid;
        gap: var(--space-8);
        margin-top: var(--space-12);
        padding-top: var(--space-14);
        border-top: 0.0625rem solid rgb(255 255 255 / 16%);
    }

    .game-wall-community-score__value {
        gap: var(--space-8);
    }

    .community-rating {
        display: inline-flex;
        align-items: center;
        gap: 0.1rem;
        color: color-mix(in srgb, var(--color-brand-primary) 88%, var(--color-white) 12%);
    }

    .community-rating__star {
        position: relative;
        display: grid;
        place-items: center;
        width: 1.35rem;
        height: 1.35rem;
        min-height: 0;
        padding: 0;
        border: 0;
        border-radius: 0;
        color: inherit;
        background: transparent;
        cursor: pointer;
        transition: color 0.16s ease, opacity 0.16s ease, transform 0.16s ease;
    }

    .community-rating__star:hover,
    .community-rating__star:focus-visible {
        color: var(--color-brand-primary);
        transform: translateY(-0.0625rem);
        outline: none;
    }

    .community-rating__star:focus-visible {
        filter: drop-shadow(0 0 0.35rem color-mix(in srgb, var(--color-brand-primary) 48%, transparent));
    }

    .community-rating__icon.svg-sprite {
        grid-area: 1 / 1;
        position: static;
        display: block;
        width: 1.35rem;
        height: 1.35rem;
        overflow: visible;
        fill: currentColor;
    }

    .community-rating__icon--empty {
        color: rgb(255 255 255 / 42%);
    }

    .community-rating__icon--fill {
        clip-path: inset(0 calc(100% - var(--community-star-fill, 0%)) 0 0);
    }

    .game-wall-community-score.is-disabled .community-rating {
        color: rgb(255 255 255 / 58%);
    }

    .game-wall-community-score.is-disabled .community-rating__star {
        cursor: default;
        opacity: 0.78;
        transform: none;
    }

    .community-rating-remove {
        display: inline-grid;
        place-items: center;
        width: 2rem;
        height: 2rem;
        min-height: 2rem;
        padding: 0;
        border: 0;
        border-radius: var(--radius-round);
        color: rgb(255 255 255 / 82%);
        background: rgb(255 255 255 / 14%);
        cursor: pointer;
        transition: color 0.16s ease, background-color 0.16s ease, transform 0.16s ease;
    }

    .community-rating-remove:hover,
    .community-rating-remove:focus-visible {
        color: var(--color-text-inverse);
        background: rgb(255 255 255 / 22%);
        outline: none;
        transform: translateY(-0.0625rem);
    }

    .community-rating-remove[hidden] {
        display: none;
    }

    .community-rating-remove__icon.svg-sprite {
        position: static;
        display: block;
        width: 0.72rem;
        height: 0.72rem;
        overflow: visible;
        fill: currentColor;
    }

    .game-wall-community-score__message {
        min-height: 1rem;
        margin: 0;
        color: rgb(255 255 255 / 64%);
        font-size: var(--text-xs);
        font-weight: var(--font-weight-bold);
        line-height: 1.25;
    }

    .game-wall-community-score__message:empty {
        display: none;
    }

    .game__edit {
        position: absolute;
        top: var(--game-wall-padding);
        right: var(--game-wall-padding);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: var(--space-8);
        min-height: 2.75rem;
        padding: 0 var(--space-16);
        border: 0.0625rem solid rgb(255 255 255 / 24%);
        border-radius: var(--radius-corner);
        color: var(--color-text-inverse);
        background: rgb(5 9 18 / 32%);
        font-size: var(--text-base);
        font-weight: var(--font-weight-bold);
        line-height: var(--leading-none);
        text-decoration: none;
        white-space: nowrap;
        box-shadow: 0 0.7rem 1.5rem rgb(0 0 0 / 30%);
        backdrop-filter: blur(0.35rem);
        opacity: 0.82;
        transition: opacity 0.16s ease, transform 0.16s ease, background-color 0.16s ease, border-color 0.16s ease;
    }

    .game__edit:hover,
    .game__edit:focus-visible {
        border-color: rgb(255 255 255 / 42%);
        opacity: 1;
        transform: translateY(-0.0625rem);
        background: rgb(5 9 18 / 48%);
    }

    .game__edit-icon.svg-sprite {
        position: static;
        display: block;
        width: 1rem;
        height: 1rem;
        overflow: visible;
        fill: currentColor;
    }

    .game__edit-label {
        display: inline-block;
    }

    .game-wall-series {
        grid-column: 1 / -1;
        display: grid;
        gap: clamp(var(--space-16), 2.2vw, var(--space-24));
        padding-top: clamp(var(--space-18), 2.4vw, var(--space-28));
        border-top: 0.0625rem solid rgb(255 255 255 / 20%);
        color: var(--color-text-inverse);
    }

    .game-wall--default-image .game-wall-series {
        margin-right: calc(var(--game-wall-padding) * -1);
        margin-bottom: calc(var(--game-wall-padding) * -1);
        margin-left: calc(var(--game-wall-padding) * -1);
        padding-right: var(--game-wall-padding);
        padding-bottom: var(--game-wall-padding);
        padding-left: var(--game-wall-padding);
        background: linear-gradient(180deg, rgb(5 11 22 / 0%) 0%, rgb(5 11 22 / 92%) var(--space-24), rgb(5 11 22 / 100%) var(--space-40), rgb(5 11 22 / 100%) 100%);
    }

    .game-wall-series__header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--space-12);
        min-width: 0;
    }

    .game-wall-series__title {
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-8);
        align-items: baseline;
        margin: 0;
        color: rgb(255 255 255 / 84%);
        font-size: var(--text-md);
        line-height: var(--leading-none);
    }

    .game-wall-series-link {
        color: var(--color-text-inverse);
        text-decoration: none;
    }

    .game-wall-series-link:hover,
    .game-wall-series-link:focus-visible {
        text-decoration: underline;
        text-underline-offset: 0.18em;
    }

    .game-wall-series__meta {
        color: rgb(255 255 255 / 58%);
        font-size: var(--text-sm);
        font-weight: var(--font-weight-bold);
        line-height: var(--leading-none);
        white-space: nowrap;
    }

    .game-wall-series__meta-icon.svg-sprite {
        position: static;
        display: inline-block;
        width: 0.78em;
        height: 0.78em;
        margin-right: 0.18rem;
        overflow: visible;
        color: rgb(255 255 255 / 70%);
        fill: currentColor;
        vertical-align: -0.06em;
    }

    .game-wall-series-group {
        display: grid;
        gap: var(--space-10);
        min-width: 0;
    }

    .game-wall-series-group__label {
        margin: 0;
        color: rgb(255 255 255 / 72%);
        font-size: var(--text-xs);
        line-height: var(--leading-none);
        text-transform: uppercase;
    }

    .game-wall-series-strip {
        display: flex;
        gap: var(--space-12);
        min-width: 0;
        overflow-x: auto;
        padding-bottom: var(--space-2);
        scrollbar-width: none;
    }

    .game-wall-series-strip::-webkit-scrollbar {
        display: none;
    }

    .game-wall-series-card {
        flex: 0 0 clamp(4.75rem, 7vw, 6rem);
        display: grid;
        gap: var(--space-8);
        min-width: 0;
        color: var(--color-text-inverse);
        text-decoration: none;
        opacity: 0.86;
        transition: opacity 0.16s ease, transform 0.16s ease;
    }

    .game-wall-series-card:hover,
    .game-wall-series-card:focus-visible {
        opacity: 1;
        transform: translateY(-0.125rem);
    }

    .game-wall-series-card__image {
        display: block;
        width: 100%;
        aspect-ratio: 1;
        border: 0.0625rem solid rgb(255 255 255 / 18%);
        border-radius: var(--radius-corner-m);
        background: var(--color-media-placeholder-bg);
        object-fit: cover;
        box-shadow: 0 0.65rem 1.3rem rgb(0 0 0 / 24%);
    }

    .game-wall-series-card--upcoming .game-wall-series-card__image {
        border-color: color-mix(in srgb, var(--color-brand-primary) 58%, var(--color-white) 16%);
    }

    .game-wall-series-card__title {
        overflow: hidden;
        color: rgb(255 255 255 / 82%);
        font-size: var(--text-xs);
        font-weight: var(--font-weight-bold);
        line-height: 1.15;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .game-wall-series-timeline {
        position: relative;
        min-width: 0;
        margin-top: var(--space-2);
    }

    .game-wall-series-timeline__viewport {
        min-width: 0;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-behavior: smooth;
        scrollbar-width: none;
    }

    .game-wall-series-timeline__viewport::-webkit-scrollbar {
        display: none;
    }

    .game-wall-series-timeline__list {
        position: relative;
        display: flex;
        gap: 0;
        width: max-content;
        min-width: 100%;
        margin: 0;
        padding: var(--space-10) 0 0;
        list-style: none;
    }

    .game-wall-series-timeline__list::before {
        content: "";
        position: absolute;
        top: calc(var(--space-10) + 0.42rem);
        right: 0;
        left: 0;
        height: 0.125rem;
        background: rgb(255 255 255 / 24%);
    }

    .game-wall-series-timeline__item {
        position: relative;
        flex: 0 0 clamp(8.5rem, 15vw, 13rem);
        min-width: 0;
        padding-right: var(--space-16);
    }

    .game-wall-series-timeline__link {
        display: grid;
        gap: var(--space-8);
        color: var(--color-text-inverse);
        text-decoration: none;
    }

    .game-wall-series-timeline__dot {
        position: relative;
        z-index: 1;
        display: block;
        width: 0.95rem;
        height: 0.95rem;
        border: 0.125rem solid rgb(255 255 255 / 68%);
        border-radius: var(--radius-round);
        background: rgb(7 10 19 / 86%);
        box-shadow: 0 0 0 0.35rem rgb(7 10 19 / 56%);
    }

    .game-wall-series-timeline__copy {
        display: grid;
        gap: var(--space-4);
        min-width: 0;
    }

    .game-wall-series-timeline__name {
        overflow: hidden;
        color: rgb(255 255 255 / 88%);
        font-size: var(--text-xs);
        font-weight: var(--font-weight-bold);
        line-height: 1.15;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .game-wall-series-timeline__date {
        color: rgb(255 255 255 / 62%);
        font-size: var(--text-xs);
        font-weight: var(--font-weight-bold);
        line-height: 1;
    }

    .game-wall-series-timeline__item.is-current .game-wall-series-timeline__dot {
        border-color: var(--color-brand-primary);
        background: var(--color-brand-primary);
    }

    .game-wall-series-timeline__item.is-current .game-wall-series-timeline__name,
    .game-wall-series-timeline__item.is-current .game-wall-series-timeline__date {
        color: var(--color-brand-primary);
    }

    .game-wall-series-timeline__next {
        position: absolute;
        top: 0;
        right: 0;
        display: none;
        place-items: center;
        width: 2.4rem;
        height: 2.4rem;
        min-height: 0;
        padding: 0;
        border: 0.0625rem solid rgb(255 255 255 / 26%);
        border-radius: var(--radius-round);
        color: var(--color-text-inverse);
        background: rgb(5 9 18 / 62%);
        box-shadow: 0 0.75rem 1.5rem rgb(0 0 0 / 28%);
        backdrop-filter: blur(0.35rem);
        cursor: pointer;
    }

    .game-wall-series-timeline.has-overflow .game-wall-series-timeline__next {
        display: grid;
    }

    .game-wall-series-timeline.is-at-end .game-wall-series-timeline__next {
        opacity: 0;
        pointer-events: none;
    }

    .game-wall-series-timeline__next .svg-sprite {
        position: static;
        display: block;
        width: 0.85rem;
        height: 0.85rem;
        overflow: visible;
        fill: currentColor;
    }

    .game-wall-series {
        gap: var(--space-12);
        padding-top: var(--space-14);
    }

    .game-wall-series__title {
        font-size: var(--text-sm);
    }

    .game-wall-series-rail {
        --game-wall-series-cover-size: clamp(4.25rem, 5.4vw, 5.65rem);
        --game-wall-series-item-width: clamp(7rem, 10vw, 9rem);
        --game-wall-series-top-space: var(--space-8);

        position: relative;
        min-width: 0;
    }

    .game-wall-series-rail__viewport {
        min-width: 0;
        overflow-x: auto;
        overflow-y: hidden;
        padding-top: var(--game-wall-series-top-space);
        padding-right: 3rem;
        scroll-behavior: smooth;
        scrollbar-width: none;
    }

    .game-wall-series-rail__viewport::-webkit-scrollbar {
        display: none;
    }

    .game-wall-series-rail__list {
        position: relative;
        display: flex;
        gap: var(--space-10);
        width: max-content;
        min-width: 100%;
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .game-wall-series-rail__list::before {
        content: "";
        position: absolute;
        top: calc(var(--game-wall-series-cover-size) + var(--space-10) + 0.38rem);
        right: 0;
        left: 0;
        z-index: 0;
        height: 0.1875rem;
        border-radius: var(--radius-round);
        background: rgb(255 255 255 / 34%);
    }

    .game-wall-series-rail__item {
        position: relative;
        flex: 0 0 var(--game-wall-series-item-width);
        display: grid;
        justify-items: center;
        gap: var(--space-8);
        min-width: 0;
        z-index: 1;
    }

    .game-wall-series-rail .game-wall-series-card {
        position: relative;
        display: block;
        width: var(--game-wall-series-cover-size);
        aspect-ratio: 1;
        min-width: 0;
        color: var(--color-text-inverse);
        text-decoration: none;
    }

    .game-wall-series-rail .game-wall-series-card__image {
        width: 100%;
        height: 100%;
        border-color: rgb(255 255 255 / 20%);
    }

    .game-wall-series-card--current .game-wall-series-card__image {
        border-color: rgb(255 255 255 / 94%);
        box-shadow:
            0 0.65rem 1.3rem rgb(0 0 0 / 26%),
            0 0 0 0.125rem rgb(255 255 255 / 70%);
    }

    .game-wall-series-rail__item.has-award-nominee .game-wall-series-card__image {
        border-color: #8f9aa6;
        box-shadow:
            0 0.65rem 1.3rem rgb(0 0 0 / 26%),
            0 0 0 0.125rem rgb(143 154 166 / 88%),
            0 0 1.2rem rgb(143 154 166 / 22%);
    }

    .game-wall-series-rail__item.has-award-winner .game-wall-series-card__image {
        border-color: #d4af37;
        box-shadow:
            0 0.65rem 1.3rem rgb(0 0 0 / 28%),
            0 0 0 0.125rem rgb(132 96 15 / 90%),
            0 0 1.45rem rgb(212 175 55 / 34%);
    }

    .game-wall-series-rail__item.is-upcoming .game-wall-series-card__image {
        border-color: color-mix(in srgb, var(--color-brand-primary) 58%, var(--color-white) 16%);
    }

    .game-wall-series-rail__item.is-current .game-wall-series-card__image,
    .game-wall-series-rail__item.has-award-nominee.is-current .game-wall-series-card__image,
    .game-wall-series-rail__item.has-award-winner.is-current .game-wall-series-card__image {
        border-color: var(--color-brand-primary);
        box-shadow:
            0 0.65rem 1.3rem rgb(0 0 0 / 30%),
            0 0 0 0.15625rem color-mix(in srgb, var(--color-brand-primary) 92%, var(--color-white) 8%),
            0 0 1.55rem color-mix(in srgb, var(--color-brand-primary) 46%, transparent);
    }

    .game-wall-series-card__badge {
        position: absolute;
        top: var(--space-4);
        right: var(--space-4);
        max-width: calc(100% - var(--space-8));
        padding: 0.24rem var(--space-6);
        overflow: hidden;
        border-radius: var(--radius-round);
        color: var(--color-text-inverse);
        background: rgb(5 9 18 / 72%);
        font-size: 0.625rem;
        font-weight: var(--font-weight-extrabold);
        line-height: 1;
        text-overflow: ellipsis;
        text-transform: uppercase;
        white-space: nowrap;
        backdrop-filter: blur(0.28rem);
    }

    .game-wall-series-rail__timeline {
        position: relative;
        z-index: 1;
        display: grid;
        justify-items: center;
        gap: var(--space-6);
        width: 100%;
        min-width: 0;
        color: var(--color-text-inverse);
        text-align: center;
        text-decoration: none;
    }

    .game-wall-series-rail__dot {
        display: block;
        width: 0.85rem;
        height: 0.85rem;
        border: 0.125rem solid rgb(255 255 255 / 68%);
        border-radius: var(--radius-round);
        background: rgb(7 10 19 / 88%);
        box-shadow: 0 0 0 0.28rem rgb(7 10 19 / 54%);
    }

    .game-wall-series-rail__copy {
        display: grid;
        gap: var(--space-4);
        width: 100%;
        min-width: 0;
    }

    .game-wall-series-rail__name {
        display: -webkit-box;
        overflow: hidden;
        min-height: 2.24em;
        color: rgb(255 255 255 / 86%);
        font-size: var(--text-xs);
        font-weight: var(--font-weight-bold);
        line-height: 1.12;
        text-overflow: ellipsis;
        overflow-wrap: anywhere;
        white-space: normal;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }

    .game-wall-series-rail__review-icon.svg-sprite {
        position: static;
        display: inline-block;
        width: 0.68em;
        height: 0.68em;
        margin-right: 0.18rem;
        overflow: visible;
        color: rgb(255 255 255 / 54%);
        fill: currentColor;
        vertical-align: -0.05em;
    }

    .game-wall-series-rail__date {
        display: inline-flex;
        gap: var(--space-4);
        align-items: center;
        justify-content: center;
        color: rgb(255 255 255 / 62%);
        font-size: var(--text-xs);
        font-weight: var(--font-weight-bold);
        line-height: 1;
    }

    .game-wall-series-rail__award-icon.svg-sprite {
        position: static;
        display: block;
        flex: 0 0 auto;
        width: 0.8em;
        height: 0.8em;
        overflow: visible;
        fill: currentColor;
    }

    .game-wall-series-rail__award-icon--nominee.svg-sprite {
        color: #9aa6b2;
    }

    .game-wall-series-rail__award-icon--winner.svg-sprite {
        color: #d4af37;
    }

    .game-wall-series-rail__item.is-current .game-wall-series-rail__dot {
        border-color: var(--color-brand-primary);
        background: var(--color-brand-primary);
    }

    .game-wall-series-rail__item.is-current .game-wall-series-rail__name,
    .game-wall-series-rail__item.is-current .game-wall-series-rail__date {
        color: var(--color-brand-primary);
    }

    .game-wall-series-rail__item.has-award-nominee.is-current .game-wall-series-rail__name,
    .game-wall-series-rail__item.has-award-nominee.is-current .game-wall-series-rail__date {
        color: var(--color-brand-primary);
    }

    .game-wall-series-rail__item.has-award-winner.is-current .game-wall-series-rail__name,
    .game-wall-series-rail__item.has-award-winner.is-current .game-wall-series-rail__date {
        color: var(--color-brand-primary);
    }

    .game-wall-series-rail__item.is-upcoming .game-wall-series-rail__dot {
        border-color: color-mix(in srgb, var(--color-brand-primary) 70%, var(--color-white) 12%);
    }

    .game-wall-series-rail__prev,
    .game-wall-series-rail__next {
        position: absolute;
        top: calc(var(--game-wall-series-top-space) + ((var(--game-wall-series-cover-size) - 2.25rem) / 2));
        z-index: 2;
        display: none;
        place-items: center;
        width: 2.25rem;
        height: 2.25rem;
        min-height: 0;
        padding: 0;
        border: 0.0625rem solid rgb(255 255 255 / 26%);
        border-radius: var(--radius-round);
        color: var(--color-text-inverse);
        background: rgb(5 9 18 / 72%);
        box-shadow: 0 0.75rem 1.5rem rgb(0 0 0 / 28%);
        backdrop-filter: blur(0.35rem);
        cursor: pointer;
    }

    .game-wall-series-rail__prev {
        left: 0;
    }

    .game-wall-series-rail__next {
        right: 0;
    }

    .game-wall-series-rail.has-overflow .game-wall-series-rail__prev,
    .game-wall-series-rail.has-overflow .game-wall-series-rail__next {
        display: grid;
    }

    .game-wall-series-rail.is-at-start .game-wall-series-rail__prev,
    .game-wall-series-rail.is-at-end .game-wall-series-rail__next {
        opacity: 0;
        pointer-events: none;
    }

    .game-wall-series-rail__prev .svg-sprite,
    .game-wall-series-rail__next .svg-sprite {
        position: static;
        display: block;
        width: 0.78rem;
        height: 0.78rem;
        overflow: visible;
        fill: currentColor;
    }

    .game-information-header {
        margin-bottom: var(--space-16);
        padding-bottom: var(--space-16);
        border-bottom: 1px solid var(--color-bg-surface-alt);
    }

    .game-information-summery {
        display: flex;
        flex-direction: column;
        row-gap: var(--space-20);
    }

    .game-content-listing {
        min-width: 0;
    }

    @media (min-width: 1200px) {
        .game-content-listing--full {
            grid-column: 1 / -1;
        }
    }

    .game-content-listing__header {
        margin-bottom: var(--space-20);
    }

    .game-content-filters {
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-12);
        align-items: end;
        width: 100%;
    }

    .game-content-filters__field {
        display: grid;
        flex: 1 1 12rem;
        gap: var(--space-6);
        min-width: min(100%, 12rem);
        max-width: 18rem;
    }

    .game-content-filters__label {
        color: var(--color-text-subtle);
        font-size: var(--text-xs);
        font-weight: var(--font-weight-extrabold);
        line-height: var(--leading-none);
        text-transform: uppercase;
    }

    .game-content-filters__select {
        position: relative;
        display: block;
    }

    .game-content-filters__select select {
        width: 100%;
        min-height: 2.75rem;
        padding: 0 var(--space-40) 0 var(--space-12);
        border: 0.0625rem solid var(--color-border);
        border-radius: var(--radius-corner);
        color: var(--color-heading);
        background: var(--color-card-bg);
        font: inherit;
        font-size: var(--text-sm);
        font-weight: var(--font-weight-bold);
        line-height: var(--leading-none);
        appearance: none;
        cursor: pointer;
    }

    .game-content-filters__select select:hover,
    .game-content-filters__select select:focus-visible {
        border-color: var(--color-brand-primary);
        outline: none;
    }

    .game-content-filters__chevron.svg-sprite {
        position: absolute;
        top: 50%;
        right: var(--space-14);
        width: 0.75rem;
        height: 0.75rem;
        color: var(--color-text-subtle);
        fill: currentColor;
        transform: translateY(-50%);
        pointer-events: none;
    }

    .game-content-filters__reset {
        display: inline-flex;
        gap: var(--space-8);
        align-items: center;
        justify-content: center;
        min-height: 2.75rem;
        padding: 0 var(--space-14);
        border: 0.0625rem solid var(--color-border);
        border-radius: var(--radius-corner);
        color: var(--color-text);
        background: var(--color-bg-surface);
        font-size: var(--text-sm);
        font-weight: var(--font-weight-bold);
        line-height: var(--leading-none);
        cursor: pointer;
    }

    .game-content-filters__reset:hover,
    .game-content-filters__reset:focus-visible {
        border-color: var(--color-brand-primary);
        color: var(--color-heading);
        outline: none;
    }

    .game-content-filters__reset[hidden] {
        display: none;
    }

    .game-content-filters__reset-icon.svg-sprite {
        position: static;
        display: block;
        width: 0.8rem;
        height: 0.8rem;
        fill: currentColor;
    }

    .game-content-sidebar {
        align-self: start;
    }

    .game-content-sidebar__panel {
        position: sticky;
        top: var(--space-24);
        display: grid;
        gap: var(--space-10);
        padding: var(--space-24);
        border: 0.0625rem solid var(--color-card-border);
        border-radius: var(--radius-24, 1.5rem);
        background:
            radial-gradient(circle at 18% 0%, color-mix(in srgb, var(--color-brand-primary) 24%, transparent) 0%, transparent 42%),
            var(--color-card-bg);
        box-shadow: 0 0.75rem 1.75rem var(--color-black-alpha-08);
    }

    .game-content-sidebar .game-content-filters {
        display: grid;
        align-items: stretch;
        gap: var(--space-14);
    }

    .game-content-sidebar .game-content-filters__field {
        max-width: none;
    }

    .game-content-sidebar .game-content-filters__reset {
        justify-self: start;
    }

    .game-content-sidebar__eyebrow {
        color: var(--color-link);
        font-size: var(--text-xs);
        font-weight: var(--font-weight-extrabold);
        line-height: var(--leading-none);
        text-transform: uppercase;
    }

    .game-content-sidebar__title {
        margin: 0;
        color: var(--color-heading);
        font-size: var(--text-lg);
        font-weight: var(--font-weight-extrabold);
        line-height: var(--leading-title);
    }

    .game-content-sidebar__text {
        margin: 0;
        color: var(--color-text);
        font-size: var(--text-sm);
        line-height: var(--leading-reading);
    }

    @media (max-width: 74rem) {
        .game-wall {
            grid-template-columns: minmax(8rem, 14rem) minmax(0, 1fr);
        }

        .game-wall-meta--primary {
            grid-template-columns: repeat(3, minmax(0, 1fr));
        }

        .game-wall-meta--primary .game-wall-meta__item:nth-child(4)::before {
            display: none;
        }

        .game-wall-meta--secondary {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        .game-wall-meta--secondary .score {
            grid-column: 1 / -1;
        }

        .game-wall-meta--secondary .score::before {
            display: none;
        }
    }

    @media (max-width: 48rem) {
        .game-wall {
            --game-wall-padding: var(--space-16);

            grid-template-columns: 1fr;
            gap: var(--space-20);
            min-height: 0;
            background-position: center top, center;
            background-size: 100% auto, cover;
        }

        .game-wall::before {
            background:
                linear-gradient(180deg, rgb(5 11 22 / 78%) 0%, rgb(18 12 34 / 58%) 36%, rgb(5 11 22 / 86%) 72%, rgb(5 11 22 / 100%) 100%),
                linear-gradient(90deg, rgb(5 11 22 / 92%) 0%, rgb(5 11 22 / 32%) 50%, rgb(5 11 22 / 92%) 100%),
                radial-gradient(circle at 18% 10%, rgb(255 0 190 / 18%), transparent 36%);
        }

        .game-wall--default-image::before {
            background:
                linear-gradient(180deg, rgb(5 11 22 / 58%) 0%, rgb(18 12 34 / 52%) 28%, rgb(5 11 22 / 90%) 58%, rgb(5 11 22 / 100%) 74%, rgb(5 11 22 / 100%) 100%),
                linear-gradient(90deg, rgb(5 11 22 / 94%) 0%, rgb(5 11 22 / 38%) 50%, rgb(5 11 22 / 94%) 100%),
                radial-gradient(circle at 18% 10%, rgb(255 0 190 / 14%), transparent 36%);
        }

        .game-wall__media {
            width: min(13rem, 68vw);
        }

        .game-wall-packshot {
            width: 100%;
        }

        .game-wall-information-header h1 {
            font-size: var(--text-4xl);
        }

        .game-wall-meta--primary,
        .game-wall-meta--secondary,
        .game-wall-meta--support {
            grid-template-columns: 1fr;
            gap: var(--space-14);
            padding-top: var(--space-16);
            border-top: 0.0625rem solid rgb(255 255 255 / 20%);
        }

        .game-wall-meta--primary {
            padding-top: 0;
            border-top: 0;
        }

        .game-wall-meta__item,
        .game-wall-meta--primary .game-wall-meta__item:nth-child(4),
        .game-wall-meta--secondary .score {
            padding: 0;
        }

        .game-wall-meta__item {
            gap: var(--space-6);
        }

        .game-wall-meta__item + .game-wall-meta__item::before {
            display: none;
        }

        .game-content-filters__field,
        .game-content-filters__reset {
            max-width: none;
        }

        .game__edit {
            width: 2.75rem;
            height: 2.75rem;
            min-height: 2.75rem;
            padding: 0;
            border-radius: var(--radius-round);
        }

        .game__edit-label {
            display: none;
        }
    }

    @media (max-width: 30rem) {
        .game-wall-favorite.heart,
        .game-wall-favorite.heart:hover,
        .game-wall-favorite.heart:focus-visible,
        .game-wall-favorite.heart.active,
        .game-wall-favorite.heart.select {
            width: 2.75rem;
            height: 2.75rem;
        }

        .game-wall-favorite__icon.svg-sprite {
            width: 1.35rem;
            height: 1.35rem;
        }

        .game-wall-score .review-score-star.svg-sprite {
            width: 1.1rem;
            height: 1.1rem;
        }

        .community-rating__star,
        .community-rating__icon.svg-sprite {
            width: 1.1rem;
            height: 1.1rem;
        }
    }
}