:root {
    color-scheme: dark;
    --bg: #121620;
    --bg-2: #171b27;
    --surface: #1b2130;
    --surface-2: #252c3d;
    --text: #f6f8fc;
    --muted: #a7b0c0;
    --line: rgba(255, 255, 255, 0.1);
    --brand: #e30613;
    --brand-2: #005bbb;
    --radius: 8px;
    --shadow: 0 18px 58px rgba(0, 0, 0, 0.32);
    --content-wide: 1360px;
    --content-reader: 1040px;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    background:
        radial-gradient(circle at 18% 0%, rgba(227, 6, 19, 0.11), transparent 30%),
        linear-gradient(180deg, var(--bg-2) 0%, var(--bg) 340px, #10141d 100%);
    color: var(--text);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    line-height: 1.55;
}

a {
    color: inherit;
    text-decoration: none;
}

img {
    display: block;
    max-width: 100%;
}

.site-header {
    position: sticky;
    top: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 14px clamp(18px, 4vw, 56px);
    background: rgba(18, 22, 32, 0.92);
    border-bottom: 1px solid var(--line);
    backdrop-filter: blur(14px);
}

.site-header::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: -1px;
    left: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--brand), #ffd500 52%, transparent 84%);
    opacity: 0.72;
}

.brand {
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: 800;
}

.brand img {
    width: 42px;
    height: 42px;
    object-fit: contain;
    filter: drop-shadow(0 0 10px rgba(227, 6, 19, 0.18));
}

.main-nav {
    display: flex;
    align-items: center;
    gap: 18px;
    color: #c6ccd8;
    font-size: 14px;
    font-weight: 700;
}

.main-nav a:hover,
.article-meta a:hover,
.site-footer a:hover {
    color: #ffd500;
}

.main-nav .nav-cta {
    min-height: 34px;
    padding: 7px 11px;
    color: #fff;
    background: var(--brand);
    border-radius: 6px;
}

.main-nav .nav-cta:hover {
    color: #fff;
    background: #b9000b;
}

.main-nav .nav-event {
    color: #fff;
    background: #262d3d;
    border-radius: 6px;
    padding: 7px 10px;
}

.hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 520px);
    gap: 36px;
    align-items: end;
    padding: clamp(42px, 7vw, 86px) clamp(18px, 4vw, 56px) 30px;
    background: linear-gradient(135deg, #10151f 0%, #24364f 56%, #e30613 140%);
    color: #fff;
}

.hero-copy {
    max-width: 760px;
}

.eyebrow {
    margin: 0 0 10px;
    color: var(--brand);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0;
    text-transform: uppercase;
}

.hero .eyebrow {
    color: #ffccd0;
}

.hero h1,
.article-hero h1,
.empty-state h1 {
    margin: 0;
    font-size: clamp(38px, 6vw, 76px);
    line-height: 0.95;
    letter-spacing: 0;
}

.hero p {
    max-width: 620px;
    color: rgba(255, 255, 255, 0.82);
    font-size: 18px;
}

.hero-card {
    overflow: hidden;
    display: grid;
    gap: 12px;
    padding: 12px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: var(--radius);
}

.hero-card img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: 6px;
}

.hero-card span,
.article-card span,
.game-strip span {
    color: var(--brand);
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
}

.hero-card strong {
    font-size: 22px;
    line-height: 1.1;
}

.section {
    padding: 42px clamp(18px, 4vw, 56px);
    width: 80%;
    margin: auto;
}

.section-heading a,
.home-section-head a {
    color: #c6ccd8;
}

.section-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    margin-bottom: 18px;
}

.section-heading h2 {
    margin: 0;
    font-size: 28px;
}

.article-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.hardware-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.hardware-card {
    display: grid;
    gap: 8px;
    min-height: 170px;
    padding: 16px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
}

.hardware-card img {
    width: 100%;
    height: 92px;
    object-fit: contain;
}

.hardware-card span {
    color: var(--brand);
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
}

.hardware-card strong {
    font-size: 20px;
    line-height: 1.1;
}

.hardware-card small {
    color: var(--muted);
}

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

.article-card {
    overflow: hidden;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
}

.article-card a {
    display: grid;
    min-height: 100%;
}

.article-card img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    background: var(--surface-2);
}

.article-card div {
    display: grid;
    align-content: start;
    gap: 8px;
    padding: 16px;
}

.article-card h3 {
    margin: 0;
    font-size: 20px;
    line-height: 1.18;
}

.article-card p {
    display: -webkit-box;
    overflow: hidden;
    margin: 0;
    color: var(--muted);
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

.article-page {
    max-width: var(--content-wide);
    margin: 0 auto;
    padding: 38px clamp(18px, 4vw, 48px) 64px;
    width: 80%;
    margin: auto;
}

.article-edit-shortcut {
    position: fixed;
    right: 22px;
    bottom: 22px;
    z-index: 80;
    display: inline-flex;
    align-items: center;
    min-height: 42px;
    padding: 0 15px;
    color: #fff;
    background: #e30613;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 6px;
    box-shadow: 0 16px 42px rgba(0, 0, 0, 0.32);
    font-size: 13px;
    font-weight: 950;
}

.article-edit-shortcut:hover {
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 18px 48px rgba(227, 6, 19, 0.28);
}

.listing-hero,
.game-page {
    padding: 42px clamp(18px, 4vw, 56px) 10px;
    width: 80%;
    margin: auto;
}

.listing-hero h1,
.game-hero h1 {
    max-width: 900px;
    margin: 0;
    font-size: clamp(36px, 6vw, 64px);
    line-height: 1;
}

.listing-hero p,
.game-hero p {
    max-width: 760px;
    color: var(--muted);
}

.game-hero {
    display: grid;
    grid-template-columns: minmax(260px, 420px) minmax(0, 1fr);
    gap: 28px;
    align-items: start;
}

.game-hero > img {
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    background: var(--surface-2);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

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

.facts div {
    padding: 12px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
}

.facts dt {
    color: var(--muted);
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
}

.facts dd {
    margin: 2px 0 0;
    font-weight: 800;
}

.article-hero {
    display: grid;
    gap: 18px;
    max-width: var(--content-reader);
    margin: 0 auto;
}

.article-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    color: var(--muted);
    font-size: 14px;
    font-weight: 700;
}

.article-hero p {
    max-width: 820px;
    margin: 0;
    color: var(--muted);
    font-size: 19px;
}

.article-hero > img {
    width: 100%;
    max-height: 560px;
    object-fit: cover;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.game-strip,
.chapter-list,
.tag-list {
    max-width: var(--content-reader);
    margin: 28px auto;
    padding: 18px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
}

.game-strip {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}

.game-strip a {
    font-weight: 900;
}

.article-game-card {
    display: grid;
    grid-template-columns: minmax(220px, 320px) minmax(0, 1fr);
    gap: 24px;
    max-width: var(--content-reader);
    margin: 46px auto 10px;
    padding: clamp(18px, 3vw, 28px);
    color: #fff;
    background:
        radial-gradient(circle at 0% 0%, rgba(227, 6, 19, 0.12), transparent 32%),
        linear-gradient(135deg, #11151c 0%, #171c26 62%, #1f1115 100%);
    border: 1px solid var(--line);
    border-left: 4px solid var(--brand);
    border-radius: 12px;
    box-shadow: var(--shadow);
}

.article-game-card-cover {
    position: relative;
    overflow: hidden;
    align-self: start;
    display: block;
    min-height: 220px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--radius);
}

.article-game-card-cover img {
    width: 100%;
    height: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    transition: transform 180ms ease, filter 180ms ease;
}

.article-game-card-cover span {
    position: absolute;
    right: 12px;
    bottom: 12px;
    padding: 7px 10px;
    color: #11151c;
    background: #ffd500;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
}

.article-game-card-cover:hover img {
    filter: brightness(1.08);
    transform: scale(1.025);
}

.article-game-card-body {
    display: grid;
    gap: 18px;
    min-width: 0;
}

.article-game-card-head {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 18px;
}

.article-game-card-head h2 {
    margin: 0;
    font-size: clamp(26px, 4vw, 42px);
    line-height: 1.05;
}

.article-game-card-head h2 a:hover,
.article-game-actions a:hover {
    color: #ffd500;
}

.article-game-score {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 96px;
    height: 96px;
    color: #fff;
    background: var(--brand);
    border: 3px solid #ffd500;
    border-radius: 50%;
    box-shadow: 0 14px 34px rgba(227, 6, 19, 0.32);
    text-align: center;
}

.article-game-score strong {
    font-size: 28px;
    line-height: 0.9;
}

.article-game-score span {
    margin-top: -6px;
    font-weight: 900;
}

.article-game-score small {
    max-width: 68px;
    margin-top: -4px;
    color: rgba(255, 255, 255, 0.82);
    font-size: 10px;
    font-weight: 900;
    line-height: 1.1;
    text-transform: uppercase;
}

.article-game-facts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin: 0;
}

.article-game-facts div {
    min-width: 0;
    padding: 12px;
    background: rgba(255, 255, 255, 0.055);
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 7px;
}

.article-game-facts dt {
    color: var(--muted);
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
}

.article-game-facts dd {
    overflow-wrap: anywhere;
    margin: 3px 0 0;
    font-weight: 900;
}

.article-game-description {
    margin: 0;
    color: rgba(255, 255, 255, 0.78);
}

.article-game-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.article-game-actions a {
    display: inline-flex;
    align-items: center;
    min-height: 38px;
    padding: 0 12px;
    color: #fff;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 6px;
    font-size: 13px;
    font-weight: 900;
}

.article-game-actions .article-game-primary {
    color: #11151c;
    background: #ffd500;
    border-color: #ffd500;
}

.chapter-list {
    display: grid;
    gap: 10px;
}

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

.tag-list a {
    padding: 8px 10px;
    color: #fff;
    background: var(--surface-2);
    border-radius: 999px;
    font-size: 14px;
    font-weight: 900;
}

.chapter-list h2 {
    margin: 0 0 6px;
}

.chapter-list a {
    display: flex;
    gap: 12px;
    align-items: center;
    padding: 10px;
    background: var(--surface-2);
    border-radius: 6px;
    font-weight: 800;
}

.chapter-list span {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    color: #fff;
    background: var(--brand-2);
    border-radius: 50%;
    font-size: 13px;
}

.dossier-chapters {
    max-width: var(--content-reader);
    margin: 42px auto 10px;
    padding: clamp(18px, 3vw, 28px);
    color: #fff;
    background:
        radial-gradient(circle at 18% 0%, rgba(255, 213, 0, 0.08), transparent 30%),
        linear-gradient(135deg, #11151c 0%, #151b24 62%, #251116 100%);
    border: 1px solid var(--line);
    border-left: 4px solid var(--brand);
    border-radius: 12px;
    box-shadow: var(--shadow);
}

.dossier-chapters-head {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 18px;
}

.dossier-chapters-head h2 {
    margin: 0;
    font-size: clamp(26px, 4vw, 38px);
    line-height: 1;
}

.dossier-chapters-head span {
    color: #ffd500;
    font-size: 13px;
    font-weight: 900;
    text-transform: uppercase;
}

.dossier-chapter-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.dossier-chapter-card {
    overflow: hidden;
    min-width: 0;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius);
}

.dossier-chapter-card a {
    display: grid;
    min-height: 100%;
    color: inherit;
}

.dossier-chapter-card img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    background: var(--surface-2);
}

.dossier-chapter-card div {
    display: grid;
    gap: 8px;
    padding: 15px;
}

.chapter-number {
    width: fit-content;
    padding: 5px 8px;
    color: #11151c;
    background: #ffd500;
    border-radius: 5px;
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
}

.dossier-chapter-card h3 {
    margin: 0;
    font-size: 19px;
    line-height: 1.16;
}

.dossier-chapter-card p {
    display: -webkit-box;
    overflow: hidden;
    margin: 0;
    color: rgba(255, 255, 255, 0.72);
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

.chapter-top-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    max-width: var(--content-reader);
    margin: 0 auto 18px;
    color: var(--muted);
    font-size: 14px;
    font-weight: 900;
}

.chapter-top-nav a,
.chapter-mini-summary .dossier-chapters-head a {
    color: #ffd500;
}

.chapter-pager {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    max-width: var(--content-reader);
    margin: 44px auto 24px;
}

.chapter-pager-card {
    display: grid;
    gap: 8px;
    min-height: 122px;
    padding: 18px;
    color: #fff;
    background:
        radial-gradient(circle at 0% 0%, rgba(227, 6, 19, 0.14), transparent 34%),
        var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
}

.chapter-pager-next {
    text-align: right;
}

.chapter-pager-card span {
    color: #ffd500;
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
}

.chapter-pager-card strong {
    align-self: end;
    font-size: 20px;
    line-height: 1.14;
}

.chapter-pager-card.is-disabled {
    color: rgba(255, 255, 255, 0.48);
    background: rgba(255, 255, 255, 0.04);
}

.chapter-mini-summary {
    margin: 0 0 10px;
    padding: clamp(18px, 3vw, 26px);
    background: #11151c;
    border: 1px solid var(--line);
    border-radius: 12px;
}

.chapter-mini-summary ol {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.chapter-mini-summary li a {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    min-height: 54px;
    padding: 10px;
    color: #dfe5f0;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 6px;
    font-weight: 800;
}

.chapter-mini-summary li span {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    color: #11151c;
    background: #ffd500;
    border-radius: 50%;
    font-size: 12px;
    font-weight: 900;
}

.chapter-mini-summary li.is-current a {
    border-color: rgba(227, 6, 19, 0.7);
    box-shadow: inset 3px 0 0 var(--brand);
}

.legacy-content {
    width: 100%;
    margin-top: 34px;
    color: rgba(255, 255, 255, 0.86);
    font-size: 18px;
    line-height: 1.75;
}

.legacy-content .content-section {
    margin: 1px 0;
}

.legacy-content > * {
    max-width: var(--content-reader);
    margin-right: auto;
    margin-left: auto;
}

.legacy-content > .content-section,
.legacy-content > .content-section-v2,
.legacy-content > .gallery-slider,
.legacy-content > .gallery-carousel,
.legacy-content > .gallery-masonry,
.legacy-content > .gallery-container,
.legacy-content > .layout-grid {
    max-width: 100%;
}

.legacy-content > .content-section-v2[data-columns="1"] {
    max-width: var(--content-reader);
    margin-right: auto;
    margin-left: auto;
}

.legacy-content > .content-section-v2[data-columns="2"],
.legacy-content > .content-section-v2[data-columns="3"],
.legacy-content > .content-section-v2[data-columns="4"],
.legacy-content > .content-section-v2[data-columns="5"] {
    max-width: 100%;
    margin-right: auto;
    margin-left: auto;
}

.legacy-content .content-columns {
    display: grid;
    gap: 24px;
}

.legacy-content .content-columns[data-columns="2"] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.legacy-content .content-columns[data-columns="3"] {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.legacy-content .content-columns[data-columns="4"],
.legacy-content .content-columns[data-columns="5"] {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.legacy-content .content-section-v2 {
    margin-top: 42px;
    margin-bottom: 42px;
}

.legacy-content .content-section-v2 .content-columns {
    align-items: start;
    gap: clamp(20px, 3vw, 34px);
}

.legacy-content .content-section-v2 .content-columns[data-columns="4"],
.legacy-content .content-section-v2 .content-columns[data-columns="5"] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.legacy-content .content-section-v2.section-cascade-title {
    margin-bottom: 18px;
}

.legacy-content .content-section-v2.section-cascade-title + .section-cascade {
    margin-top: 18px;
}

.legacy-content .content-section-v2.section-cascade-title .content-module-heading {
    max-width: 920px;
    margin-right: auto;
    margin-left: auto;
    text-align: center;
}

.legacy-content .content-section-v2.section-cascade {
    max-width: var(--content-reader);
    margin-right: auto;
    margin-left: auto;
}

.legacy-content .content-section-v2.section-cascade .content-columns[data-columns="2"] {
    align-items: start;
    gap: clamp(24px, 4vw, 46px);
}

.legacy-content .content-section-v2.section-cascade .content-column {
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.legacy-content .content-section-v2.section-cascade .content-column:nth-child(2) {
    padding-top: clamp(30px, 4vw, 58px);
}

.legacy-content .content-section-v2.section-cascade .content-module {
    margin-top: 0;
    margin-bottom: 0;
}

.legacy-content .content-section-v2.section-cascade .content-module-text {
    font-size: 17px;
    line-height: 1.72;
}

.legacy-content .content-section-v2.section-cascade .content-module-text p:last-child {
    margin-bottom: 0;
}

.legacy-content .content-section-v2.section-cascade .content-module-image {
    overflow: hidden;
    border-radius: var(--radius);
}

.legacy-content .content-section-v2.section-cascade .content-module-image img {
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

.legacy-content p {
    margin: 0 auto 1.15em;
    color: #dce4f1;
}

.legacy-content li,
.legacy-content blockquote,
.legacy-content td,
.legacy-content th,
.legacy-content figcaption {
    color: #dce4f1;
}

.legacy-content p *,
.legacy-content li *,
.legacy-content blockquote *,
.legacy-content td *,
.legacy-content th *,
.legacy-content figcaption * {
    color: inherit !important;
}

.legacy-content h2,
.legacy-content h3,
.legacy-content h4,
.legacy-content h5,
.legacy-content h6 {
    margin: 1.8em auto 0.75em;
    color: #f6f8fc;
    line-height: 1.12;
}

.legacy-content .content-section,
.legacy-content .content-column,
.legacy-content .content-module,
.legacy-content .text-content,
.legacy-content .text-module,
.legacy-content .module-text,
.legacy-content .wysiwyg,
.legacy-content .article-content {
    color: #dce4f1;
}

.legacy-content .content-section-v2 .content-module-text {
    font-size: 18px;
    line-height: 1.78;
}

.legacy-content .content-section-v2[data-columns="1"] .content-module-text {
    max-width: 920px;
    margin-right: auto;
    margin-left: auto;
}

.legacy-content .content-section-v2[data-columns="1"] .content-module-heading,
.legacy-content .content-section-v2[data-columns="1"] .content-module-separator,
.legacy-content .content-section-v2[data-columns="1"] .content-module-button {
    max-width: 920px;
    margin-right: auto;
    margin-left: auto;
}

.legacy-content .content-section-v2[data-columns="1"] .content-module-image,
.legacy-content .content-section-v2[data-columns="1"] .content-module-gallery-v2,
.legacy-content .content-section-v2[data-columns="1"] .content-module-embed,
.legacy-content .content-section-v2[data-columns="1"] .content-module-conclusion {
    max-width: var(--content-reader);
    margin-right: auto;
    margin-left: auto;
}

.legacy-content .content-section :where(p, li, blockquote, td, th, figcaption),
.legacy-content .content-column :where(p, li, blockquote, td, th, figcaption),
.legacy-content .content-module :where(p, li, blockquote, td, th, figcaption),
.legacy-content .text-content :where(p, li, blockquote, td, th, figcaption),
.legacy-content .text-module :where(p, li, blockquote, td, th, figcaption),
.legacy-content .module-text :where(p, li, blockquote, td, th, figcaption),
.legacy-content .wysiwyg :where(p, li, blockquote, td, th, figcaption),
.legacy-content .article-content :where(p, li, blockquote, td, th, figcaption) {
    color: inherit !important;
}

.legacy-content img {
    display: block;
    max-width: 100%;
    height: auto;
    border-radius: var(--radius);
}

.legacy-content a {
    color: #ffd500;
}

.legacy-content iframe {
    width: 100%;
    height: 100%;
    border: 0;
}

.legacy-content .video-container {
    width: 100% !important;
    max-width: var(--content-reader);
    aspect-ratio: 16 / 9;
    height: auto !important;
    margin: 28px auto;
    overflow: hidden;
    background: #000;
    border-radius: var(--radius);
}

.legacy-content .content-module {
    min-width: 0;
}

.legacy-content .content-section-v2 .content-module {
    margin-bottom: 22px;
}

.legacy-content .content-section-v2 .content-module-heading h2,
.legacy-content .content-section-v2 .content-module-heading h3 {
    margin-top: 0;
}

.legacy-content .content-section-v2 .is-neon-heading h2,
.legacy-content .content-section-v2 .is-neon-heading h3 {
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke: 1.2px currentColor;
    text-shadow:
        0 0 8px currentColor,
        0 0 18px rgba(255, 212, 0, 0.28);
}

.legacy-content .content-section-v2 .content-module-image {
    margin: 0 0 24px;
    max-width: 100%;
}

.legacy-content .content-section-v2 .content-module-image img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--radius);
}

.legacy-content .content-section-v2 .content-module-image.border-soft {
    background: rgba(255, 255, 255, 0.045);
    border: 1px solid rgba(255, 255, 255, 0.14);
    box-shadow: 0 20px 48px rgba(0, 0, 0, 0.22);
}

.legacy-content .content-section-v2 .content-module-image.border-neon {
    background: rgba(227, 6, 19, 0.08);
    border: 1px solid rgba(255, 212, 0, 0.72);
    box-shadow:
        0 0 0 1px rgba(227, 6, 19, 0.22),
        0 0 22px rgba(255, 212, 0, 0.18);
}

.legacy-content .content-section-v2 .content-module-image figcaption {
    margin-top: 8px;
    color: var(--muted);
    font-size: 14px;
}

.legacy-content .content-section-v2 .content-module-quote {
    margin: 0 0 22px;
    padding: 18px 20px;
    color: var(--ink);
    background: var(--panel);
    border-left: 4px solid var(--brand);
    border-radius: var(--radius);
}

.legacy-content .content-section-v2 .content-module-button {
    --button-color: var(--brand);
    --button-neon: #d72cff;
    --button-glow: 3;
    display: flex;
    width: fit-content;
    margin-top: 22px;
    margin-bottom: 22px;
}

.legacy-content .content-section-v2 .content-module-button.button-center {
    margin-right: auto;
    margin-left: auto;
}

.legacy-content .content-section-v2 .content-module-button.button-right {
    margin-left: auto;
}

.legacy-content .content-section-v2 .content-module-button a {
    position: relative;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: 0 18px;
    color: #fff;
    background: var(--button-color);
    border: 1px solid var(--button-color);
    border-radius: 6px;
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.2);
    font-size: 15px;
    font-weight: 950;
    line-height: 1.1;
    transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease, background 160ms ease, color 160ms ease;
}

.legacy-content .content-section-v2 .content-module-button a:hover {
    color: #fff;
    transform: translateY(-1px);
}

.legacy-content .content-section-v2 .content-module-button.button-belgian a {
    color: #11151c;
    background: linear-gradient(90deg, var(--brand) 0 46%, #ffd500 46% 100%);
    border-color: rgba(255, 213, 0, 0.7);
    box-shadow: 0 16px 38px rgba(227, 6, 19, 0.24);
}

.legacy-content .content-section-v2 .content-module-button.button-belgian a:hover {
    color: #11151c;
    box-shadow: 0 20px 44px rgba(255, 213, 0, 0.2);
}

.legacy-content .content-section-v2 .content-module-button.button-ghost a {
    color: var(--button-color);
    background: transparent;
    border-color: color-mix(in srgb, var(--button-color) 78%, #ffffff 22%);
}

.legacy-content .content-section-v2 .content-module-button.button-dark a {
    color: #fff;
    background:
        radial-gradient(circle at 0% 0%, rgba(255, 255, 255, 0.08), transparent 34%),
        #11151c;
    border-color: rgba(255, 255, 255, 0.16);
}

.legacy-content .content-section-v2 .content-module-button.button-terminal a {
    color: #35ff7f;
    background: #08120d;
    border-color: rgba(53, 255, 127, 0.55);
    box-shadow: 0 0 0 1px rgba(53, 255, 127, 0.12), 0 0 22px rgba(53, 255, 127, 0.14);
    font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
}

.legacy-content .content-section-v2 .content-module-button.button-terminal a::before {
    content: "> ";
}

.legacy-content .content-section-v2 .content-module-button.button-neon a {
    color: #fff;
    background: transparent;
    border-color: var(--button-neon);
    box-shadow:
        0 0 calc(var(--button-glow) * 4px) color-mix(in srgb, var(--button-neon) 64%, transparent),
        inset 0 0 calc(var(--button-glow) * 3px) color-mix(in srgb, var(--button-neon) 35%, transparent);
    text-shadow: 0 0 calc(var(--button-glow) * 4px) var(--button-neon);
}

.legacy-content .content-section-v2 .content-module-button.button-neon a:hover {
    background: color-mix(in srgb, var(--button-neon) 12%, transparent);
    box-shadow:
        0 0 calc(var(--button-glow) * 7px) var(--button-neon),
        0 0 calc(var(--button-glow) * 16px) color-mix(in srgb, var(--button-neon) 56%, transparent),
        inset 0 0 calc(var(--button-glow) * 4px) color-mix(in srgb, var(--button-neon) 42%, transparent);
}

.legacy-content .content-section-v2 .content-module-button.button-text-outline a {
    color: transparent;
    -webkit-text-stroke: 0.8px var(--button-neon);
    text-shadow:
        0 0 calc(var(--button-glow) * 4px) var(--button-neon),
        0 0 calc(var(--button-glow) * 9px) color-mix(in srgb, var(--button-neon) 60%, transparent);
}

.legacy-content .content-module-separator {
    --separator-width: 100%;
    --separator-color: #d72cff;
    --separator-glow: 3;
    display: flex;
    align-items: center;
    width: var(--separator-width);
    min-height: 22px;
}

.legacy-content .content-module-separator.separator-small {
    margin: 18px 0;
}

.legacy-content .content-module-separator.separator-medium {
    margin: 32px 0;
}

.legacy-content .content-module-separator.separator-large {
    margin: 52px 0;
}

.legacy-content .content-module-separator.separator-left {
    margin-right: auto;
}

.legacy-content .content-module-separator.separator-center {
    margin-right: auto;
    margin-left: auto;
}

.legacy-content .content-module-separator.separator-right {
    margin-left: auto;
}

.legacy-content .content-module-separator::before,
.legacy-content .content-module-separator::after {
    content: "";
    display: block;
    height: 2px;
    min-width: 24px;
    flex: 1;
    background: rgba(255, 255, 255, 0.22);
}

.legacy-content .content-module-separator span {
    display: none;
    flex: 0 0 auto;
    margin: 0 12px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
}

.legacy-content .content-module-separator span:not(:empty) {
    display: inline-flex;
}

.legacy-content .separator-belgian::before,
.legacy-content .separator-belgian::after {
    background: linear-gradient(90deg, var(--brand), #ffd500);
}

.legacy-content .separator-soft::before,
.legacy-content .separator-soft::after {
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.34), transparent);
}

.legacy-content .separator-double::before,
.legacy-content .separator-double::after {
    height: 5px;
    background:
        linear-gradient(rgba(255, 255, 255, 0.26), rgba(255, 255, 255, 0.26)) top / 100% 1px no-repeat,
        linear-gradient(rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.18)) bottom / 100% 1px no-repeat;
}

.legacy-content .separator-dotted::before,
.legacy-content .separator-dotted::after {
    height: 0;
    background: transparent;
    border-top: 2px dotted rgba(255, 255, 255, 0.36);
}

.legacy-content .separator-neon::before,
.legacy-content .separator-neon::after {
    height: 3px;
    background: var(--separator-color);
    border-radius: 999px;
    box-shadow:
        0 0 calc(var(--separator-glow) * 5px) var(--separator-color),
        0 0 calc(var(--separator-glow) * 12px) var(--separator-color);
}

.legacy-content .separator-neon span {
    color: var(--separator-color);
    text-shadow: 0 0 calc(var(--separator-glow) * 4px) var(--separator-color);
}

.legacy-content .content-section-v2.has-column-dividers .content-columns > .content-column + .content-column {
    position: relative;
}

.legacy-content .content-section-v2.has-column-dividers .content-columns > .content-column + .content-column::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: -11px;
    width: 1px;
    background: rgba(255, 255, 255, 0.16);
}

.legacy-content .content-section-v2.column-divider-soft .content-columns > .content-column + .content-column::before {
    background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.28), transparent);
}

.legacy-content .content-section-v2.column-divider-belgian .content-columns > .content-column + .content-column::before {
    width: 2px;
    background: linear-gradient(180deg, var(--brand), #ffd500);
}

.legacy-content .content-section-v2.column-divider-neon .content-columns > .content-column + .content-column::before {
    width: 2px;
    background: var(--column-divider-color, #d72cff);
    box-shadow:
        0 0 calc(var(--column-divider-glow, 3) * 5px) var(--column-divider-color, #d72cff),
        0 0 calc(var(--column-divider-glow, 3) * 12px) var(--column-divider-color, #d72cff);
}

.legacy-content .content-module-conclusion {
    display: grid;
    gap: 24px;
    margin: 42px 0;
    padding: clamp(18px, 3vw, 30px);
    color: #fff;
    background:
        radial-gradient(circle at 0% 0%, rgba(227, 6, 19, 0.14), transparent 30%),
        linear-gradient(135deg, #11151c 0%, #151b24 64%, #211217 100%);
    border: 1px solid var(--line);
    border-top: 3px solid var(--brand);
    border-bottom: 3px solid #ffd500;
    border-radius: 12px;
    box-shadow: var(--shadow);
}

.legacy-content .content-module-conclusion > header {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 20px;
}

.legacy-content .content-module-conclusion h2,
.legacy-content .content-module-conclusion h3 {
    margin: 0;
}

.legacy-content .content-module-conclusion h2 {
    font-size: clamp(28px, 4vw, 44px);
    line-height: 1;
}

.review-score {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 104px;
    height: 104px;
    color: #fff;
    background: var(--brand);
    border: 3px solid #ffd500;
    border-radius: 50%;
    box-shadow: 0 16px 42px rgba(227, 6, 19, 0.35);
    text-align: center;
}

.review-score strong {
    font-size: 34px;
    line-height: 0.92;
}

.review-score span {
    margin-top: -7px;
    font-weight: 900;
}

.review-score small {
    max-width: 76px;
    margin-top: -4px;
    color: rgba(255, 255, 255, 0.82);
    font-size: 10px;
    font-weight: 900;
    line-height: 1.1;
    text-transform: uppercase;
}

.review-score.is-provisional {
    opacity: 0.74;
    background: rgba(227, 6, 19, 0.72);
    border-style: dashed;
    box-shadow: 0 0 0 8px rgba(255, 213, 0, 0.06);
}

.review-points {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
    padding-top: 22px;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.review-points section {
    min-width: 0;
}

.review-points h3 {
    margin-bottom: 14px;
    font-size: 24px;
}

.review-list {
    display: grid;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 16px;
}

.review-list li {
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr);
    gap: 8px;
    align-items: start;
}

.review-list span {
    font-weight: 900;
}

.review-list-positive {
    color: #47d36f;
}

.review-list-negative {
    color: #f1a33a;
}

.review-verdict {
    display: grid;
    gap: 20px;
    padding-top: 22px;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.review-verdict.has-badge {
    grid-template-columns: minmax(0, 1fr) minmax(160px, 240px);
    align-items: center;
}

.review-verdict p {
    margin: 0 0 1em;
    color: rgba(255, 255, 255, 0.86);
}

.review-verdict p:last-child {
    margin-bottom: 0;
}

.review-badge {
    display: grid;
    place-items: center;
    margin: 0;
}

.review-badge img {
    width: min(220px, 100%);
    height: auto;
    filter: drop-shadow(0 18px 28px rgba(0, 0, 0, 0.35));
}

.legacy-content .content-section-v2 .content-module-embed {
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: var(--radius);
}

.legacy-content .content-section-v2 .content-module-embed iframe {
    width: 100%;
    height: 100%;
    border: 0;
}

.legacy-content .content-module-gallery-v2 {
    display: grid;
    gap: 14px;
    margin: 34px 0;
}

.legacy-content .gallery-v2[data-columns="2"] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.legacy-content .gallery-v2[data-columns="3"] {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.legacy-content .gallery-v2[data-columns="4"] {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.legacy-content .gallery-v2-featured {
    grid-template-columns: 1.35fr 1fr 1fr;
}

.legacy-content .gallery-v2-featured .gallery-v2-item:first-child {
    grid-row: span 2;
}

.legacy-content .gallery-v2-item {
    position: relative;
    overflow: hidden;
    margin: 0;
    border: 1px solid rgba(255, 255, 255, 0.11);
    border-radius: 8px;
    background: rgba(18, 26, 42, 0.78);
}

.legacy-content .gallery-v2-open {
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: zoom-in;
}

.legacy-content .gallery-v2-item img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    transition: transform 180ms ease, filter 180ms ease;
}

.legacy-content .gallery-v2-featured .gallery-v2-item:first-child img {
    height: 100%;
    min-height: 435px;
}

.legacy-content .gallery-v2-item:hover img {
    filter: brightness(1.08);
    transform: scale(1.025);
}

.legacy-content .gallery-v2-item figcaption {
    padding: 10px 12px;
    color: rgba(242, 246, 255, 0.74);
    font-size: 0.86rem;
    line-height: 1.45;
}

.gallery-v2-lightbox {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: none;
    place-items: center;
    padding: 28px;
    background: rgba(5, 8, 15, 0.9);
}

.gallery-v2-lightbox.is-open {
    display: grid;
}

.gallery-v2-lightbox-inner {
    position: relative;
    display: grid;
    gap: 14px;
    width: min(1120px, 100%);
}

.gallery-v2-lightbox img {
    display: block;
    max-width: 100%;
    max-height: 78vh;
    margin: 0 auto;
    border-radius: 10px;
    box-shadow: 0 28px 80px rgba(0, 0, 0, 0.55);
}

.gallery-v2-lightbox-caption {
    color: rgba(242, 246, 255, 0.84);
    text-align: center;
}

.gallery-v2-lightbox button {
    min-width: 44px;
    min-height: 44px;
    color: #fff;
    background: rgba(18, 26, 42, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 999px;
    cursor: pointer;
}

.gallery-v2-lightbox-close,
.gallery-v2-lightbox-prev,
.gallery-v2-lightbox-next {
    position: absolute;
}

.gallery-v2-lightbox-close {
    top: -16px;
    right: -16px;
}

.gallery-v2-lightbox-prev,
.gallery-v2-lightbox-next {
    top: 50%;
    transform: translateY(-50%);
}

.gallery-v2-lightbox-prev {
    left: -20px;
}

.gallery-v2-lightbox-next {
    right: -20px;
}

.legacy-content .gallery-item,
.legacy-content .gallery-image {
    min-width: 0;
}

.gallery-slider,
.gallery-carousel,
.gallery-masonry,
.gallery-container {
    clear: both;
    display: grid;
    gap: 14px;
    width: 100%;
    max-width: 100%;
    margin: 30px auto;
    position: relative;
}

.slider-track,
.carousel-track,
.gallery-masonry,
.gallery-container,
.layout-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.gallery-masonry .gallery-item {
    position: static !important;
    left: auto !important;
    top: auto !important;
    width: auto !important;
    height: auto !important;
    overflow: hidden;
}

.gallery-masonry .gallery-item:only-child {
    grid-column: 1 / -1;
}

.gallery-image img,
.gallery-item img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    background: var(--surface-2);
}

.gallery-caption,
.slider-caption,
.carousel-caption {
    padding: 8px 0;
    color: var(--muted);
    font-size: 14px;
}

.enhanced-lightbox-modal {
    position: fixed;
    inset: 0;
    z-index: 3000;
    display: none;
    place-items: center;
    padding: 24px;
    background: rgba(2, 6, 14, 0.88);
}

.enhanced-lightbox-modal.active {
    display: grid;
}

.enhanced-lightbox-content {
    position: relative;
    display: grid;
    place-items: center;
    width: min(1100px, 100%);
    max-height: 88vh;
}

.enhanced-lightbox-image {
    display: block;
    max-width: 100%;
    max-height: 78vh;
    object-fit: contain;
    border-radius: var(--radius);
    box-shadow: 0 28px 90px rgba(0, 0, 0, 0.5);
}

.enhanced-lightbox-close,
.enhanced-lightbox-nav {
    position: absolute;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    color: #fff;
    background: rgba(17, 21, 28, 0.92);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 999px;
    cursor: pointer;
}

.enhanced-lightbox-close {
    top: -12px;
    right: -12px;
}

.enhanced-lightbox-prev,
.enhanced-lightbox-next {
    top: 50%;
    transform: translateY(-50%);
}

.enhanced-lightbox-prev {
    left: -18px;
}

.enhanced-lightbox-next {
    right: -18px;
}

.enhanced-lightbox-caption {
    width: min(760px, 100%);
    margin-top: 12px;
    color: rgba(255, 255, 255, 0.78);
    text-align: center;
}

.slider-nav,
.slider-counter,
.carousel-prev,
.carousel-next,
.carousel-counter,
.lightbox-overlay {
    display: none;
}

.empty-state {
    display: grid;
    place-items: start;
    gap: 14px;
    min-height: 58vh;
    padding: clamp(42px, 7vw, 86px) clamp(18px, 4vw, 56px);
}

.empty-state.compact {
    min-height: auto;
    padding: 24px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
}

.legal-content {
    display: grid;
    gap: 16px;
    max-width: 900px;
    margin: 0 auto 64px;
    padding: 0 clamp(18px, 4vw, 56px);
}

.legal-section {
    padding: 18px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
}

.legal-section h2 {
    margin: 0 0 8px;
}

.legal-section p {
    margin: 0;
    color: var(--muted);
}

.button {
    display: inline-flex;
    align-items: center;
    min-height: 42px;
    padding: 0 16px;
    color: #fff;
    background: var(--brand);
    border-radius: 6px;
    font-weight: 900;
}

.home-featured,
.home-section {
    width: min(100%, var(--content-wide));
    margin: 0 auto;
    padding: clamp(24px, 4vw, 54px) clamp(18px, 4vw, 48px);
}

.home-featured {
    margin-top: 28px;
    padding-top: clamp(36px, 5vw, 72px);
    padding-bottom: clamp(34px, 5vw, 70px);
    color: #fff;
    background:
        radial-gradient(circle at 18% 12%, rgba(227, 6, 19, 0.18), transparent 28%),
        linear-gradient(135deg, #11151c 0%, #151b24 58%, #271016 100%);
    border: 1px solid var(--line);
    border-bottom: 3px solid #ffd500;
    border-radius: 12px;
    box-shadow: var(--shadow);
}

.belgian-section {
    padding-top: clamp(32px, 5vw, 64px);
}

.home-featured .eyebrow,
.home-featured .home-section-head a {
    color: #ffd500;
}

.home-section-head {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 20px;
}

.home-section-head h1,
.home-section-head h2 {
    margin: 0;
    font-size: clamp(28px, 4vw, 46px);
    line-height: 1;
}

.home-section-head a {
    font-size: 14px;
    font-weight: 900;
}

.home-section-head a:hover {
    color: #ffd500;
}

.featured-mosaic {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    grid-auto-rows: minmax(188px, auto);
    gap: 12px;
}

.feature-card,
.home-card,
.test-card {
    overflow: hidden;
    min-width: 0;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: 0 12px 34px rgba(20, 28, 42, 0.08);
}

.home-featured .feature-card {
    border-color: rgba(255, 255, 255, 0.18);
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.24);
}

.feature-card a,
.home-card a,
.test-card a {
    position: relative;
    display: grid;
    min-height: 100%;
    color: inherit;
}

.feature-card img,
.test-card img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.feature-card a::after,
.test-card a::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(9, 12, 18, 0.08), rgba(9, 12, 18, 0.86));
}

.feature-card div,
.test-card div {
    position: relative;
    z-index: 1;
    align-self: end;
    display: grid;
    gap: 8px;
    padding: 18px;
    color: #fff;
}

.feature-card h3,
.home-card h3,
.test-card h3 {
    margin: 0;
    font-size: 20px;
    line-height: 1.14;
}

.feature-card p,
.home-card p {
    display: -webkit-box;
    overflow: hidden;
    margin: 0;
    color: var(--muted);
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

.feature-card p,
.feature-card small,
.test-card small {
    color: rgba(255, 255, 255, 0.78);
}

.feature-card-1 {
    grid-column: span 4;
    grid-row: span 2;
    min-height: 450px;
}

.feature-card-2,
.feature-card-3 {
    grid-column: span 2;
}

.feature-card-4,
.feature-card-5,
.feature-card-6 {
    grid-column: span 2;
    min-height: 232px;
}

.feature-card-1 h3 {
    max-width: 860px;
    font-size: clamp(28px, 4vw, 42px);
}

.card-kicker {
    width: fit-content;
    padding: 5px 8px;
    color: #fff;
    background: var(--brand);
    border-radius: 5px;
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
}

.feature-card .card-kicker,
.test-card .card-kicker,
.dark-card .card-kicker {
    color: #fff;
    background: var(--brand);
}

.latest-grid,
.triptych-grid,
.dossier-grid {
    display: grid;
    gap: 18px;
}

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

.latest-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px 28px;
}

.news-list-item {
    min-width: 0;
}

.news-list-item a {
    display: grid;
    grid-template-columns: 128px minmax(0, 1fr);
    gap: 16px;
    align-items: center;
    min-height: 128px;
    color: inherit;
}

.news-list-item img {
    width: 128px;
    height: 128px;
    object-fit: cover;
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: var(--radius);
}

.news-list-item div {
    display: grid;
    gap: 8px;
    min-width: 0;
}

.news-list-item h3 {
    margin: 0;
    font-size: clamp(18px, 1.8vw, 23px);
    line-height: 1.18;
}

.news-list-item small {
    color: var(--muted);
    font-size: 13px;
    font-weight: 800;
}

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

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

.home-card img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    background: var(--surface-2);
}

.home-card div {
    display: grid;
    gap: 9px;
    padding: 15px;
}

.latest-grid .home-card div {
    min-height: 190px;
}

.home-card small {
    color: var(--muted);
    font-size: 13px;
    font-weight: 800;
}

.dark-card {
    background: #11151c;
    border-color: #252b36;
}

.dark-card div {
    color: #fff;
}

.dark-card small,
.dark-card p {
    color: rgba(255, 255, 255, 0.74);
}

.belgian-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(320px, 0.85fr);
    gap: 16px;
}

.belgian-card {
    background: var(--surface);
}

.belgian-card .card-kicker {
    color: #11151c;
    background: #ffd500;
}

.belgian-card-main {
    grid-row: span 3;
}

.belgian-card-main h3 {
    font-size: clamp(26px, 3vw, 36px);
}

.belgian-card-main img {
    aspect-ratio: 16 / 10;
}

.belgian-card:not(.belgian-card-main) a {
    grid-template-columns: 168px minmax(0, 1fr);
}

.belgian-card:not(.belgian-card-main) img {
    height: 100%;
    aspect-ratio: auto;
}

.belgian-card:not(.belgian-card-main) p {
    display: none;
}

.tests-section {
    background: #11151c;
    color: #fff;
    border-top: 3px solid var(--brand);
    border-bottom: 3px solid #ffd500;
    border-radius: var(--radius);
}

.tests-section .home-section-head a,
.tests-section .eyebrow {
    color: #ffd500;
}

.tests-layout {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.test-card {
    min-height: 190px;
    border-color: rgba(255, 255, 255, 0.14);
}

.test-card-large {
    grid-column: span 2;
    grid-row: span 2;
    min-height: 392px;
}

.test-card-large h3 {
    font-size: clamp(24px, 3vw, 36px);
}

.score-badge {
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 58px;
    height: 58px;
    color: #ffd500;
    background: #b41018;
    border: 3px solid #fff;
    border-radius: 50%;
    font-size: 20px;
    line-height: 1;
}

.dossier-card img {
    aspect-ratio: 21 / 9;
}

.site-footer {
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: minmax(240px, 1.2fr) minmax(160px, 0.8fr) minmax(180px, 0.8fr);
    gap: 28px;
    padding: 40px clamp(18px, 7vw, 90px);
    color: rgba(255, 255, 255, 0.72);
    background: #11151c;
    border-top: 3px solid var(--brand);
}

.has-footer-animation .site-footer::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg, transparent 0%, rgba(227, 6, 19, 0.16) 42%, rgba(255, 213, 0, 0.16) 50%, transparent 62%);
    transform: translateX(-100%);
    animation: belgianFooterSweep 9s ease-in-out infinite;
    pointer-events: none;
}

.footer-brand,
.footer-nav {
    position: relative;
    z-index: 1;
}

.footer-brand {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr);
    gap: 14px;
    align-items: start;
}

.footer-brand img {
    width: 58px;
}

.footer-brand strong {
    display: block;
    color: #ffd500;
    font-weight: 900;
    text-transform: uppercase;
}

.footer-brand p {
    max-width: 420px;
    margin: 6px 0 0;
}

.footer-nav {
    display: grid;
    gap: 8px;
}

.footer-nav a {
    width: fit-content;
}

.sr-only {
    position: absolute;
    overflow: hidden;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    clip: rect(0, 0, 0, 0);
}

.home-search-section {
    display: grid;
    grid-template-columns: minmax(220px, 0.7fr) minmax(320px, 1.3fr);
    gap: 28px;
    align-items: center;
    width: min(var(--content-wide), calc(100% - 36px));
    margin: 0 auto;
    padding: 26px clamp(18px, 3vw, 34px);
    background:
        radial-gradient(circle at 100% 0%, rgba(227, 6, 19, 0.18), transparent 36%),
        rgba(27, 33, 48, 0.76);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.2);
}

.home-search-section h2 {
    margin: 0;
    font-size: clamp(26px, 3vw, 38px);
    line-height: 1;
}

.home-search {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
}

.home-search input {
    min-height: 50px;
    width: 100%;
    padding: 0 16px;
    color: var(--text);
    background: #10151f;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 6px;
    font: inherit;
}

.home-search input:focus {
    outline: 2px solid rgba(255, 213, 0, 0.5);
    outline-offset: 2px;
}

.home-search button,
.load-more-button {
    min-height: 50px;
    padding: 0 18px;
    color: #fff;
    background: var(--brand);
    border: 0;
    border-radius: 6px;
    box-shadow: 0 16px 36px rgba(227, 6, 19, 0.24);
    font: inherit;
    font-weight: 950;
    cursor: pointer;
}

.home-search button:hover,
.load-more-button:hover {
    background: #b9000b;
}

.home-search-results {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    left: 0;
    z-index: 6;
    display: none;
    overflow: hidden;
    background: #10151f;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.home-search-results.is-open {
    display: grid;
}

.home-search-results > p {
    margin: 0;
    padding: 16px;
    color: var(--muted);
}

.home-search-result {
    display: grid;
    grid-template-columns: 86px minmax(0, 1fr);
    gap: 12px;
    padding: 10px;
    border-bottom: 1px solid var(--line);
}

.home-search-result:hover {
    background: rgba(255, 255, 255, 0.05);
}

.home-search-result:last-child {
    border-bottom: 0;
}

.home-search-result img {
    width: 86px;
    height: 58px;
    object-fit: cover;
    background: var(--surface-2);
    border-radius: 5px;
}

.home-search-result span {
    display: grid;
    gap: 4px;
    align-content: center;
}

.home-search-result small {
    color: var(--brand);
    font-size: 11px;
    font-weight: 950;
    text-transform: uppercase;
}

.home-search-result strong {
    overflow: hidden;
    font-size: 15px;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.listing-hero,
.listing-section {
    width: min(var(--content-wide), calc(100% - 36px));
    margin-right: auto;
    margin-left: auto;
    padding-right: 0;
    padding-left: 0;
}

.listing-hero {
    position: relative;
    overflow: hidden;
    margin-top: 34px;
    padding: clamp(34px, 5vw, 60px);
    background:
        radial-gradient(circle at 8% 0%, rgba(227, 6, 19, 0.18), transparent 36%),
        linear-gradient(135deg, rgba(27, 33, 48, 0.98), rgba(16, 20, 29, 0.84));
    border: 1px solid var(--line);
    border-radius: var(--radius);
}

.listing-hero h1 {
    max-width: 980px;
}

.listing-hero-belgian {
    border-top: 3px solid #111;
    border-right: 3px solid #ffd500;
    border-left: 3px solid var(--brand);
}

.belgian-touch {
    position: absolute;
    right: clamp(18px, 4vw, 54px);
    bottom: clamp(18px, 4vw, 40px);
    display: grid;
    grid-template-columns: repeat(3, 18px);
    height: 96px;
    overflow: hidden;
    border-radius: 999px;
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.28);
}

.belgian-touch span:nth-child(1) {
    background: #050505;
}

.belgian-touch span:nth-child(2) {
    background: #ffd500;
}

.belgian-touch span:nth-child(3) {
    background: var(--brand);
}

.listing-section {
    padding-top: 28px;
}

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

.listing-card {
    position: relative;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.035), transparent 48%),
        var(--surface);
    box-shadow: 0 20px 56px rgba(0, 0, 0, 0.16);
    transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

.listing-card:hover {
    transform: translateY(-3px);
    border-color: rgba(255, 213, 0, 0.34);
    box-shadow: 0 24px 68px rgba(0, 0, 0, 0.28);
}

.listing-card figure {
    position: relative;
    overflow: hidden;
    margin: 0;
}

.listing-card figure::after {
    content: "";
    position: absolute;
    inset: auto 0 0;
    height: 42%;
    background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.64));
    pointer-events: none;
}

.listing-card small {
    color: var(--muted);
    font-size: 13px;
    font-weight: 850;
}

.listing-score {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 58px;
    height: 58px;
    color: #ffd500;
    background: #b41018;
    border: 3px solid #fff;
    border-radius: 50%;
    box-shadow: 0 10px 28px rgba(227, 6, 19, 0.35);
    font-size: 20px;
    line-height: 1;
}

.listing-more {
    display: flex;
    justify-content: center;
    margin-top: 30px;
}

.load-more-button.is-loading {
    opacity: 0.74;
    cursor: progress;
}

@keyframes belgianFooterSweep {
    0%,
    68% {
        transform: translateX(-100%);
    }

    100% {
        transform: translateX(100%);
    }
}

@media (max-width: 900px) {
    .site-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .main-nav {
        width: 100%;
        overflow-x: auto;
        padding-bottom: 4px;
    }

    .main-nav a {
        flex: 0 0 auto;
    }

    .hero,
    .article-grid,
    .featured-grid,
    .hardware-grid,
    .game-hero,
    .article-game-card,
    .facts,
    .article-game-facts,
    .review-points,
    .review-verdict.has-badge,
    .legacy-content .content-columns[data-columns],
    .legacy-content .gallery-v2[data-columns],
    .legacy-content .gallery-v2-featured {
        grid-template-columns: 1fr;
    }

    .legacy-content .gallery-v2-featured .gallery-v2-item:first-child {
        grid-row: auto;
    }

    .legacy-content .gallery-v2-featured .gallery-v2-item:first-child img {
        min-height: 0;
    }

    .legacy-content .content-section-v2.has-column-dividers .content-columns > .content-column + .content-column::before {
        display: none;
    }

    .legacy-content .content-section-v2.section-cascade .content-column:nth-child(2) {
        padding-top: 0;
    }

    .hero h1,
    .article-hero h1,
    .empty-state h1 {
        font-size: 42px;
    }

    .slider-track,
    .carousel-track,
    .gallery-masonry,
    .gallery-container,
    .layout-grid,
    .dossier-chapter-grid,
    .chapter-pager,
    .chapter-mini-summary ol,
    .featured-mosaic,
    .belgian-layout,
    .latest-grid,
    .latest-list,
    .triptych-grid,
    .dossier-grid,
    .home-search-section,
    .tests-layout,
    .site-footer {
        grid-template-columns: 1fr;
    }

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

    .home-search {
        grid-template-columns: 1fr;
    }

    .belgian-touch {
        position: static;
        width: fit-content;
        height: 42px;
        margin-top: 22px;
    }

    .article-edit-shortcut {
        right: 14px;
        bottom: 14px;
    }

    .home-section-head {
        align-items: start;
        flex-direction: column;
    }

    .dossier-chapters-head {
        align-items: start;
        flex-direction: column;
    }

    .chapter-top-nav {
        align-items: start;
        flex-direction: column;
    }

    .article-game-card-head {
        flex-direction: column;
    }

    .legacy-content .content-module-conclusion > header {
        flex-direction: column;
    }

    .article-game-score {
        width: 82px;
        height: 82px;
    }

    .review-score {
        width: 86px;
        height: 86px;
    }

    .chapter-pager-next {
        text-align: left;
    }

    .news-list-item a {
        grid-template-columns: 112px minmax(0, 1fr);
        min-height: 112px;
    }

    .news-list-item img {
        width: 112px;
        height: 112px;
    }

    .feature-card,
    .feature-card-1,
    .feature-card-2,
    .feature-card-3,
    .feature-card-4,
    .feature-card-5,
    .feature-card-6,
    .test-card,
    .test-card-large {
        grid-column: auto;
        grid-row: auto;
        min-height: 260px;
    }

    .feature-card-1 h3,
    .test-card-large h3 {
        font-size: 26px;
    }

    .tests-section {
        width: 100%;
        border-radius: 0;
    }
}

@media (max-width: 640px) {
    .site-header {
        padding-inline: 14px;
    }

    .brand span {
        font-size: 15px;
    }

    .home-featured,
    .home-section {
        padding-inline: 14px;
    }

    .home-featured {
        margin-top: 0;
        border-radius: 0;
    }

    .feature-card,
    .feature-card-1,
    .feature-card-2,
    .feature-card-3,
    .feature-card-4,
    .feature-card-5,
    .feature-card-6,
    .test-card,
    .test-card-large {
        min-height: 230px;
    }

    .home-card div,
    .feature-card div,
    .test-card div {
        padding: 13px;
    }

    .home-card h3,
    .feature-card h3,
    .test-card h3 {
        font-size: 19px;
    }

    .news-list-item a {
        grid-template-columns: 96px minmax(0, 1fr);
        gap: 12px;
        min-height: 96px;
    }

    .news-list-item img {
        width: 96px;
        height: 96px;
    }

    .news-list-item h3 {
        font-size: 17px;
    }

    .belgian-card:not(.belgian-card-main) a {
        grid-template-columns: 1fr;
    }

    .belgian-card:not(.belgian-card-main) img {
        height: auto;
        aspect-ratio: 16 / 9;
    }

    .score-badge {
        width: 48px;
        height: 48px;
        font-size: 17px;
    }

    .listing-hero,
    .listing-section,
    .home-search-section {
        width: calc(100% - 28px);
    }

    .listing-hero {
        margin-top: 18px;
        padding: 24px 18px;
    }

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

    .listing-score {
        width: 50px;
        height: 50px;
        font-size: 17px;
    }

    .home-search-result strong {
        white-space: normal;
    }

    .footer-brand {
        grid-template-columns: 44px minmax(0, 1fr);
    }

    .footer-brand img {
        width: 44px;
    }
}