/* ANT Top Games shelf + Y8 editorial panel */
.top-games-section {
    position: relative;
    overflow: hidden;
    padding: clamp(34px, 4.5vw, 62px) clamp(16px, 3.4vw, 56px) clamp(40px, 5vw, 72px);
    border-top: 1px solid #26373d;
    border-bottom: 1px solid #23353c;
    background:
        radial-gradient(circle at 10% 0, rgba(51, 207, 229, .12), transparent 30%),
        radial-gradient(circle at 88% 100%, rgba(255, 152, 70, .09), transparent 28%),
        repeating-linear-gradient(90deg, rgba(255, 255, 255, .018) 0 1px, transparent 1px 8px),
        #091216;
    color: #e9f7fa;
}

.top-games-section::before {
    position: absolute;
    inset: 13px 16px auto;
    height: 1px;
    background: linear-gradient(90deg, #ff9846, rgba(255,255,255,.1) 22%, rgba(255,255,255,.1) 78%, #42cfe3);
    content: "";
}

.top-games-heading {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    width: min(100%, var(--page-max));
    gap: 30px;
    margin: 0 auto 24px;
}

.top-games-heading .section-kicker {
    margin: 0 0 10px;
    color: #8fa3aa;
    font-family: var(--font-mono);
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .1em;
}

.top-games-heading .section-kicker span {
    border-color: rgba(66, 207, 227, .28);
    background: rgba(40, 121, 139, .16);
    color: #68e6f6;
}

.top-games-heading h2 {
    margin: 0;
    color: #f5feff;
    font-size: clamp(2rem, 3.8vw, 4.2rem);
    font-weight: 650;
    letter-spacing: -.06em;
    line-height: .9;
}

.top-games-heading > div > p:last-child {
    max-width: 70ch;
    margin: 13px 0 0;
    color: #8da1a8;
    font-size: .92rem;
    line-height: 1.55;
}

.top-games-all {
    display: grid;
    grid-template-columns: auto 42px;
    align-items: stretch;
    min-width: 245px;
    min-height: 46px;
    overflow: hidden;
    border: 1px solid #566a72;
    border-radius: 2px;
    background: #101c21;
    color: #eaffff;
    font-family: var(--font-mono);
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .07em;
    transition: border-color .2s ease, transform .2s ease, background-color .2s ease;
}

.top-games-all span { display: grid; place-items: center start; padding-inline: 14px; }
.top-games-all b { display: grid; place-items: center; border-left: 1px solid rgba(255,255,255,.12); background: #d96f31; font-size: 1rem; }
.top-games-all:hover { transform: translateY(-2px); border-color: #68e6f6; background: #15313a; }
.top-games-all:hover b { background: #078ba7; }

.top-games-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    width: min(100%, var(--page-max));
    gap: 9px;
    margin-inline: auto;
}

.top-game-card {
    position: relative;
    display: grid;
    grid-template-columns: minmax(108px, 39%) minmax(0, 1fr);
    min-height: 122px;
    overflow: hidden;
    border: 1px solid #2f444c;
    border-radius: 2px;
    background: #101a1f;
    box-shadow: 0 8px 22px rgba(0,0,0,.12);
    transition: transform .24s var(--ease), border-color .24s ease, box-shadow .24s ease;
}

.top-game-card::after {
    position: absolute;
    inset: 0;
    height: 2px;
    background: linear-gradient(90deg, #ff9846 0 28%, #3acfe4 28% 100%);
    content: "";
    pointer-events: none;
    transform: scaleX(1);
    transform-origin: left center;
}

.top-game-card:hover {
    z-index: 2;
    transform: translateY(-4px);
    border-color: #4fcfe0;
    box-shadow: 0 16px 30px rgba(0,0,0,.26), 0 0 0 1px rgba(79,207,224,.08);
}

.top-game-media {
    position: relative;
    min-width: 0;
    overflow: hidden;
    background: #071014;
}

.top-game-media::after {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent 60%, rgba(7,16,20,.35)), linear-gradient(180deg, transparent 55%, rgba(7,16,20,.45));
    content: "";
}

.top-game-media img {
    width: 100%;
    height: 100%;
    min-height: 122px;
    object-fit: cover;
    transition: transform .55s var(--ease), filter .35s ease;
}

.top-game-card:hover .top-game-media img { transform: scale(1.08); filter: saturate(1.12) contrast(1.03); }

.top-game-rank {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 2;
    border: 1px solid rgba(255,255,255,.25);
    border-radius: 2px;
    padding: 3px 5px;
    background: rgba(7,15,19,.83);
    color: #fff;
    font-family: var(--font-mono);
    font-size: .62rem;
    font-weight: 600;
}

.top-game-copy {
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr) auto;
    min-width: 0;
    gap: 5px;
    padding: 11px 10px 9px;
}

.top-game-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-width: 0;
    gap: 7px;
    color: #789098;
    font-family: var(--font-mono);
    font-size: .58rem;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.top-game-meta span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.top-game-meta strong { flex: 0 0 auto; color: #ffb36e; font-weight: 600; }

.top-game-card h3 {
    margin: 0;
    overflow: hidden;
    color: #f5fdff;
    font-size: .94rem;
    font-weight: 650;
    letter-spacing: -.025em;
    line-height: 1.12;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.top-game-card h3 a:hover { color: #7deaf7; }

.top-game-copy > p {
    display: -webkit-box;
    margin: 0;
    overflow: hidden;
    color: #879ba2;
    font-size: .73rem;
    line-height: 1.35;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.top-game-play {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    border-top: 1px solid #27383f;
    padding-top: 5px;
    color: #68dceb;
    font-family: var(--font-mono);
    font-size: .57rem;
    font-weight: 600;
    letter-spacing: .06em;
}

.top-game-play span { color: #ff9e52; font-size: .72rem; }
.top-game-play:hover { color: #fff; }

/* Y8 editorial panel: breaks up the thumbnail-heavy page before the footer. */
.y8-story {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(300px, .55fr);
    align-items: stretch;
    width: min(calc(100% - 32px), var(--page-max));
    gap: 1px;
    margin: clamp(42px, 6vw, 82px) auto;
    border: 1px solid #b9c9cd;
    background: #b9c9cd;
    box-shadow: 0 24px 58px rgba(25, 55, 64, .09);
}

.y8-story-copy,
.y8-story-action { background: #f9fcfc; }

.y8-story-copy { padding: clamp(30px, 4vw, 58px); }

.y8-story-kicker {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0 0 17px;
    color: #61747b;
    font-family: var(--font-mono);
    font-size: .67rem;
    font-weight: 600;
    letter-spacing: .1em;
}

.y8-story-kicker span {
    width: 22px;
    height: 5px;
    transform: skewX(-24deg);
    background: #ff9846;
}

.y8-story h2 {
    max-width: 24ch;
    margin: 0;
    color: #142127;
    font-size: clamp(1.8rem, 2.9vw, 3.15rem);
    font-weight: 650;
    letter-spacing: -.055em;
    line-height: 1;
}

.y8-story-copy > p:not(.y8-story-kicker) {
    max-width: 78ch;
    margin: 22px 0 0;
    color: #566970;
    font-size: clamp(.95rem, 1.15vw, 1.08rem);
    line-height: 1.7;
}

.y8-story-copy strong { color: #0d778f; }

.y8-story-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 27px;
}

.y8-story-stats span {
    border: 1px solid #cad8dc;
    border-radius: 2px;
    padding: 8px 10px;
    background: #eef6f7;
    color: #65767c;
    font-family: var(--font-mono);
    font-size: .62rem;
    font-weight: 600;
    letter-spacing: .06em;
}

.y8-story-stats b { margin-right: 4px; color: #17262c; font-size: .75rem; }

.y8-story-action {
    display: grid;
    align-content: center;
    padding: clamp(28px, 4vw, 54px);
    background:
        linear-gradient(rgba(22,46,55,.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(22,46,55,.035) 1px, transparent 1px),
        #edf5f6;
    background-size: 22px 22px;
}

.y8-story-action p {
    margin: 0 0 16px;
    color: #53676e;
    font-size: .93rem;
}

.y8-story-action > a {
    display: grid;
    grid-template-columns: 1fr 56px;
    align-items: stretch;
    min-height: 64px;
    overflow: hidden;
    border: 1px solid #142128;
    border-radius: 2px;
    background: #142128;
    color: #f4feff;
    font-family: var(--font-mono);
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .07em;
    transition: transform .22s var(--ease), border-color .22s ease, background-color .22s ease;
}

.y8-story-action > a span { display: grid; place-items: center start; padding-inline: 18px; }
.y8-story-action > a b { display: grid; place-items: center; border-left: 1px solid rgba(255,255,255,.13); background: #d96e30; font-size: 1.05rem; }
.y8-story-action > a:hover { transform: translateY(-3px); border-color: #26bfd4; background: #0d3a45; }
.y8-story-action > a:hover b { background: #078ca8; }
.y8-story-action small { margin-top: 10px; color: #7d8c92; font-family: var(--font-mono); font-size: .59rem; letter-spacing: .04em; }

/* Full Top Games archive page. */
.top-games-page {
    min-height: 100svh;
    background:
        radial-gradient(circle at 78% 0, rgba(62,201,222,.12), transparent 25%),
        linear-gradient(rgba(28,65,76,.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(28,65,76,.04) 1px, transparent 1px),
        #f4f8f9;
    background-size: auto, 40px 40px, 40px 40px, auto;
}

.top-games-page-head {
    width: min(calc(100% - 32px), var(--page-max));
    margin-inline: auto;
    padding: clamp(34px, 5vw, 70px) 0 clamp(26px, 4vw, 50px);
}

.top-games-back {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: #5e7077;
    font-family: var(--font-mono);
    font-size: .67rem;
    font-weight: 600;
    letter-spacing: .08em;
}
.top-games-back:hover { color: #087f99; }

.top-games-page-title {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, .42fr);
    align-items: end;
    gap: 36px;
    margin-top: 34px;
    border-top: 1px solid #bccacd;
    padding-top: 28px;
}

.top-games-page-title h1 {
    margin: 0;
    color: #101b20;
    font-size: clamp(3.2rem, 8vw, 8.4rem);
    font-weight: 650;
    letter-spacing: -.08em;
    line-height: .82;
}
.top-games-page-title h1 span { color: #0d87a0; }
.top-games-page-title p { margin: 0; color: #5c6f76; font-size: 1rem; line-height: 1.65; }

.top-games-archive {
    width: min(calc(100% - 32px), var(--page-max));
    margin: 0 auto clamp(70px, 8vw, 120px);
}

.top-games-archive-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 11px;
    border: 1px solid #34464d;
    border-radius: 2px;
    padding: 11px 13px;
    background: #0d171c;
    color: #90a5ac;
    font-family: var(--font-mono);
    font-size: .66rem;
    font-weight: 600;
    letter-spacing: .07em;
}
.top-games-archive-toolbar b { color: #6ee5f4; }

.top-games-archive-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.archive-game-card {
    overflow: hidden;
    border: 1px solid #c1ced1;
    border-radius: 2px;
    background: #fff;
    transition: transform .25s var(--ease), border-color .25s ease, box-shadow .25s ease;
}
.archive-game-card:hover { transform: translateY(-4px); border-color: #32bed3; box-shadow: 0 16px 34px rgba(24,69,82,.14); }

.archive-game-media { position: relative; display: block; overflow: hidden; aspect-ratio: 16/9; background: #0b151a; }
.archive-game-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .55s var(--ease), filter .35s ease; }
.archive-game-card:hover .archive-game-media img { transform: scale(1.055); filter: saturate(1.08); }
.archive-game-rank { position: absolute; top: 9px; left: 9px; border: 1px solid rgba(255,255,255,.25); border-radius: 2px; padding: 4px 6px; background: rgba(6,15,19,.82); color: #fff; font-family: var(--font-mono); font-size: .62rem; font-weight: 600; }
.archive-game-rating { position: absolute; top: 9px; right: 9px; border-radius: 2px; padding: 4px 6px; background: rgba(6,15,19,.82); color: #ffb879; font-family: var(--font-mono); font-size: .62rem; font-weight: 600; }
.archive-game-body { display: grid; grid-template-rows: auto auto minmax(72px, 1fr) auto; gap: 8px; min-height: 220px; padding: 12px; }
.archive-game-genre { color: #0d839d; font-family: var(--font-mono); font-size: .6rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.archive-game-card h2 { margin: 0; color: #172328; font-size: 1.02rem; font-weight: 650; letter-spacing: -.025em; line-height: 1.15; }
.archive-game-card p { display: -webkit-box; margin: 0; overflow: hidden; color: #67787e; font-size: .84rem; line-height: 1.48; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.archive-game-footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; border-top: 1px solid #e1e8ea; padding-top: 8px; color: #78888e; font-family: var(--font-mono); font-size: .61rem; font-weight: 600; }
.archive-game-footer a { color: #0b819a; }
.archive-game-footer a:hover { color: #d46c2f; }

.top-games-end-cta {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 30px;
    margin-top: 24px;
    border: 1px solid #bdcbd0;
    padding: clamp(22px, 3vw, 36px);
    background: #fff;
}
.top-games-end-cta h2 { margin: 0; color: #172329; font-size: clamp(1.7rem, 3vw, 3rem); letter-spacing: -.05em; }
.top-games-end-cta p { max-width: 65ch; margin: 9px 0 0; color: #687a81; }
.top-games-end-cta a { display: inline-grid; grid-template-columns: auto 46px; min-height: 50px; border: 1px solid #142128; background: #142128; color: #fff; font-family: var(--font-mono); font-size: .7rem; font-weight: 600; letter-spacing: .06em; }
.top-games-end-cta a span { display: grid; place-items: center; padding-inline: 15px; }
.top-games-end-cta a b { display: grid; place-items: center; border-left: 1px solid rgba(255,255,255,.12); background: #d96f31; }

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

@media (max-width: 820px) {
    .top-games-heading,
    .top-games-page-title,
    .y8-story,
    .top-games-end-cta { grid-template-columns: 1fr; }
    .top-games-all { width: 100%; }
    .y8-story-action { border-top: 0; }
    .top-games-archive-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 600px) {
    .top-games-section { padding: 28px 10px 34px; }
    .top-games-heading { gap: 17px; margin-bottom: 16px; text-align: center; }
    .top-games-heading .section-kicker { justify-content: center; }
    .top-games-heading h2 { font-size: clamp(2rem, 10vw, 2.8rem); }
    .top-games-heading > div > p:last-child { max-width: 36ch; margin: 9px auto 0; font-size: .83rem; }
    .top-games-all { min-height: 42px; min-width: 0; }
    .top-games-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
    .top-game-card { grid-template-columns: 1fr; min-height: 0; }
    .top-game-media { aspect-ratio: 16/10; }
    .top-game-media img { min-height: 0; }
    .top-game-copy { min-height: 104px; grid-template-rows: auto auto 1fr; padding: 8px 8px 7px; }
    .top-game-meta { font-size: .52rem; }
    .top-game-card h3 { font-size: .8rem; }
    .top-game-copy > p { display: none; }
    .top-game-play { margin-top: auto; font-size: .52rem; }

    .y8-story { width: calc(100% - 20px); margin: 34px auto; }
    .y8-story-copy, .y8-story-action { padding: 24px 18px; }
    .y8-story h2 { font-size: clamp(1.75rem, 8.5vw, 2.45rem); line-height: 1.02; }
    .y8-story-copy > p:not(.y8-story-kicker) { font-size: .9rem; line-height: 1.6; }
    .y8-story-stats { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 5px; }
    .y8-story-stats span { padding: 7px 5px; font-size: .52rem; text-align: center; }
    .y8-story-stats b { display: block; margin: 0 0 2px; }
    .y8-story-action > a { min-height: 54px; }

    .top-games-page-head, .top-games-archive { width: calc(100% - 20px); }
    .top-games-page-title { gap: 18px; margin-top: 24px; padding-top: 20px; }
    .top-games-page-title h1 { font-size: clamp(3rem, 18vw, 5rem); }
    .top-games-page-title p { font-size: .9rem; }
    .top-games-archive-toolbar { gap: 8px; font-size: .56rem; }
    .top-games-archive-grid { gap: 6px; }
    .archive-game-body { grid-template-rows: auto auto 1fr auto; min-height: 175px; padding: 9px; }
    .archive-game-card h2 { font-size: .84rem; }
    .archive-game-card p { font-size: .76rem; -webkit-line-clamp: 2; }
    .archive-game-footer { font-size: .54rem; }
    .top-games-end-cta { gap: 18px; padding: 20px 16px; }
    .top-games-end-cta a { width: 100%; }
}

@media (max-width: 380px) {
    .top-games-grid,
    .top-games-archive-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
    .top-game-card,
    .top-game-media img,
    .archive-game-card,
    .archive-game-media img,
    .top-games-all,
    .y8-story-action > a { transition: none; }
}

/* 2026-09-03 homepage blend pass: keep TOP GAMES inside the same light visual system as the rest of ANT.com. */
.top-games-section {
    width: min(calc(100% - 32px), var(--page-max));
    margin: clamp(18px, 2.4vw, 34px) auto clamp(18px, 2.6vw, 38px);
    overflow: visible;
    padding: clamp(22px, 2.8vw, 38px) 0 clamp(26px, 3vw, 42px);
    border-top: 1px solid rgba(38, 74, 85, .13);
    border-bottom: 1px solid rgba(38, 74, 85, .13);
    background: transparent;
    color: #172329;
}

.top-games-section::before {
    inset: 0 0 auto;
    background: linear-gradient(90deg, #ff9846, #b8c8cc 18%, #b8c8cc 82%, #42cfe3);
}

.top-games-heading {
    width: 100%;
    margin-bottom: 18px;
}

.top-games-heading .section-kicker { color: #64777e; }
.top-games-heading .section-kicker span {
    border-color: rgba(8, 123, 150, .24);
    background: rgba(223, 249, 252, .82);
    color: #087b96;
}
.top-games-heading h2 { color: #101a1f; }
.top-games-heading > div > p:last-child { color: #60737a; }

.top-games-all {
    border-color: #aebfc4;
    background: #f8fbfc;
    color: #172329;
}
.top-games-all b {
    border-left-color: #c7d3d6;
    background: #e27b3f;
    color: #fff;
}
.top-games-all:hover {
    border-color: #25b9d0;
    background: #eef9fb;
    color: #0a7088;
    box-shadow: 0 9px 22px rgba(25, 72, 84, .08);
}
.top-games-all:hover b { background: #078ba7; }

.top-games-grid {
    width: 100%;
    gap: 10px;
}

.top-game-card {
    border-color: #bdcbd0;
    background: #fff;
    box-shadow: 0 5px 16px rgba(23, 55, 65, .07);
}
.top-game-card:hover {
    border-color: #31bdd3;
    box-shadow: 0 14px 30px rgba(23, 68, 80, .14), 0 0 0 1px rgba(49, 189, 211, .07);
}
.top-game-media { background: #e9f0f2; }
.top-game-media::after {
    background: linear-gradient(90deg, transparent 68%, rgba(10, 26, 32, .08)), linear-gradient(180deg, transparent 62%, rgba(10, 26, 32, .12));
}
.top-game-rank {
    border-color: rgba(255,255,255,.55);
    background: rgba(16, 29, 35, .78);
}
.top-game-copy { background: #fff; }
.top-game-meta { color: #71848b; }
.top-game-meta strong { color: #c9672f; }
.top-game-card h3 { color: #172329; }
.top-game-card h3 a:hover { color: #087e98; }
.top-game-copy > p { color: #697b81; }
.top-game-play {
    border-top-color: #dce5e7;
    color: #087d96;
}
.top-game-play span { color: #d56f32; }
.top-game-play:hover { color: #142128; }

/* Pull the Y8 editorial panel closer to the game deck so there is no large dead strip. */
.y8-story {
    margin-top: clamp(18px, 2.4vw, 32px);
    margin-bottom: clamp(30px, 4vw, 52px);
}

@media (max-width: 600px) {
    .top-games-section {
        width: calc(100% - 16px);
        margin: 12px auto 16px;
        padding: 20px 0 25px;
    }
    .top-games-heading { padding-inline: 2px; }
    .y8-story { margin-top: 16px; margin-bottom: 28px; }
}

/* Auto-rotation transition for the eight homepage TOP GAMES slots. */
/* The orange/blue card rail is also the 10-second countdown for each batch. */
.top-games-grid.is-counting .top-game-card::after {
    animation: top-game-countdown 10s linear forwards;
}

@keyframes top-game-countdown {
    from { transform: scaleX(1); }
    to { transform: scaleX(0); }
}

.top-games-grid .top-game-card {
    opacity: 1;
    transition:
        opacity .22s ease,
        transform .24s var(--ease),
        border-color .24s ease,
        box-shadow .24s ease;
}

.top-games-grid.is-swapping .top-game-card {
    opacity: 0;
    transform: translateY(5px);
    pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
    .top-games-grid .top-game-card,
    .top-games-grid.is-swapping .top-game-card {
        opacity: 1;
        transition: none;
        transform: none;
    }

    .top-games-grid.is-counting .top-game-card::after {
        animation: none;
        transform: scaleX(1);
    }
}

/* Mobile TOP GAMES card text fix: restore the two-line description and
   remove the unused grid row that created a large blank block. */
@media (max-width: 600px) {
    .top-game-copy {
        display: flex;
        flex-direction: column;
        min-height: 124px;
        gap: 5px;
        padding: 8px 8px 7px;
    }

    .top-game-copy > p {
        display: -webkit-box;
        margin: 0;
        overflow: hidden;
        color: #697b81;
        font-size: .66rem;
        line-height: 1.34;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }

    .top-game-play {
        margin-top: auto;
    }
}


/* 2026-09-03 compact index section transitions
   TOP GAMES should connect directly to the category rail above and FREE GAMES below. */
.top-games-section {
    margin-top: clamp(8px, .9vw, 12px);
    margin-bottom: clamp(6px, .8vw, 10px);
    padding-top: clamp(16px, 1.8vw, 24px);
    padding-bottom: clamp(16px, 1.9vw, 26px);
}

.top-games-heading {
    margin-bottom: 14px;
}

.y8-story {
    margin-top: clamp(12px, 1.5vw, 20px);
    margin-bottom: clamp(20px, 2.6vw, 34px);
}

@media (max-width: 600px) {
    .top-games-section {
        margin: 6px auto 6px;
        padding: 14px 0 16px;
    }

    .top-games-heading {
        margin-bottom: 11px;
    }

    .y8-story {
        margin-top: 10px;
        margin-bottom: 18px;
    }
}

/* ============================================================
   Y8 SOURCE NETWORK — richer editorial / visual catalog preview
   ============================================================ */
.y8-story {
    grid-template-columns: minmax(0, 1.06fr) minmax(420px, .94fr);
    gap: 1px;
    overflow: hidden;
    border-color: #b8c9cd;
    background: #b8c9cd;
    box-shadow: 0 18px 44px rgba(25, 55, 64, .075);
}

.y8-story-copy {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
    padding: clamp(28px, 3.3vw, 48px);
    background:
        radial-gradient(circle at 8% 8%, rgba(255, 145, 72, .065), transparent 30%),
        #f9fcfc;
}

.y8-story h2 {
    max-width: 18ch;
    font-size: clamp(2rem, 3.25vw, 3.7rem);
    line-height: .96;
}

.y8-story-copy > p:not(.y8-story-kicker) {
    max-width: 67ch;
    margin-top: 18px;
    font-size: clamp(.9rem, 1vw, 1rem);
    line-height: 1.62;
}

.y8-story-copy > p.y8-story-note {
    margin-top: 12px;
    color: #6a7b81;
    font-size: clamp(.79rem, .9vw, .9rem);
    line-height: 1.55;
}

.y8-story-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 5px;
    margin-top: 20px;
}

.y8-story-stats span {
    display: grid;
    align-content: center;
    min-height: 48px;
    padding: 7px 8px;
    border-color: #d0dde0;
    background: rgba(237, 246, 247, .82);
    font-size: .5rem;
    line-height: 1.2;
}

.y8-story-stats b {
    display: block;
    margin: 0 0 3px;
    color: #15262c;
    font-size: .86rem;
    letter-spacing: -.02em;
}

.y8-story-route {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 14px;
    margin-top: 17px;
    padding-top: 13px;
    border-top: 1px solid #dce6e8;
    color: #71838a;
    font-family: var(--font-mono);
    font-size: .55rem;
    font-weight: 650;
    letter-spacing: .07em;
}

.y8-story-route span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.y8-story-route i {
    display: grid;
    width: 20px;
    height: 20px;
    place-items: center;
    border: 1px solid #bed1d5;
    border-radius: 50%;
    color: #0a879f;
    font-size: .48rem;
    font-style: normal;
}

.y8-story-preview {
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    min-width: 0;
    padding: clamp(18px, 2.1vw, 28px);
    background:
        linear-gradient(rgba(22,46,55,.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(22,46,55,.035) 1px, transparent 1px),
        #edf5f6;
    background-size: 22px 22px;
}

.y8-preview-window {
    position: relative;
    align-self: center;
    overflow: hidden;
    border: 1px solid #9fb3b9;
    border-radius: 3px;
    background: #eef2f3;
    box-shadow: 0 14px 34px rgba(22, 44, 51, .13);
}

.y8-preview-bar {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    height: 31px;
    padding: 0 9px;
    border-bottom: 1px solid #c7d3d6;
    background: #e4ebed;
    color: #6e7f84;
    font-family: var(--font-mono);
    font-size: .48rem;
    letter-spacing: .08em;
}

.y8-preview-bar b {
    color: #202d32;
    font-size: .57rem;
}

.y8-preview-bar small {
    justify-self: end;
    font: inherit;
}

.y8-preview-dots {
    display: flex;
    gap: 4px;
}

.y8-preview-dots i {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #b1bdc0;
}

.y8-preview-dots i:first-child { background: #e97b3c; }
.y8-preview-dots i:nth-child(2) { background: #ffc253; }
.y8-preview-dots i:nth-child(3) { background: #56c9d8; }

.y8-preview-nav {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 9px;
    padding: 10px 11px;
    background: #fff;
}

.y8-preview-nav strong {
    color: #e2262d;
    font-family: var(--font-display);
    font-size: 1.15rem;
    letter-spacing: -.08em;
}

.y8-preview-nav span {
    overflow: hidden;
    border: 1px solid #e1e7e9;
    border-radius: 3px;
    padding: 6px 8px;
    color: #a1adb1;
    font-family: var(--font-mono);
    font-size: .42rem;
    letter-spacing: .055em;
    white-space: nowrap;
}

.y8-preview-nav i {
    color: #6e7b80;
    font-family: var(--font-mono);
    font-size: .42rem;
    font-style: normal;
    font-weight: 700;
}

.y8-preview-tags {
    display: flex;
    gap: 4px;
    overflow: hidden;
    padding: 0 11px 9px;
    background: #fff;
}

.y8-preview-tags span {
    flex: 0 0 auto;
    border-radius: 12px;
    padding: 4px 7px;
    color: #fff;
    background: #667f88;
    font-family: var(--font-mono);
    font-size: .37rem;
    font-weight: 700;
    letter-spacing: .04em;
}

.y8-preview-tags span:nth-child(1) { background: #26aeca; }
.y8-preview-tags span:nth-child(2) { background: #b356c7; }
.y8-preview-tags span:nth-child(3) { background: #dc7d35; }
.y8-preview-tags span:nth-child(4) { background: #51a458; }
.y8-preview-tags span:nth-child(5) { background: #627ed0; }

.y8-preview-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    padding: 9px;
    background: #eef2f3;
}

.y8-preview-grid figure {
    min-width: 0;
    margin: 0;
    overflow: hidden;
    border-radius: 3px;
    background: #fff;
    box-shadow: 0 2px 7px rgba(27, 49, 56, .08);
}

.y8-preview-grid img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

.y8-preview-grid figcaption {
    overflow: hidden;
    padding: 5px 6px 6px;
    color: #44565c;
    font-family: var(--font-mono);
    font-size: .39rem;
    font-weight: 700;
    letter-spacing: .025em;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.y8-preview-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 7px 10px;
    border-top: 1px solid #cbd7da;
    background: #e4ebed;
    color: #788a90;
    font-family: var(--font-mono);
    font-size: .43rem;
    letter-spacing: .07em;
}

.y8-preview-foot b {
    color: #187f92;
    font-size: .46rem;
}

.y8-story-action {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(210px, .78fr);
    align-items: end;
    gap: 12px;
    padding: 14px 0 0;
    background: transparent;
}

.y8-story-action > div small {
    display: block;
    margin-bottom: 4px;
    color: #85969b;
    font-family: var(--font-mono);
    font-size: .47rem;
    font-weight: 700;
    letter-spacing: .09em;
}

.y8-story-action p {
    margin: 0;
    color: #53676e;
    font-size: .78rem;
    line-height: 1.35;
}

.y8-story-action > a {
    min-height: 48px;
    grid-template-columns: 1fr 48px;
    font-size: .67rem;
}

.y8-story-action > a span { padding-inline: 14px; }

@media (max-width: 1020px) {
    .y8-story {
        grid-template-columns: 1fr;
    }

    .y8-story-copy {
        padding-bottom: 24px;
    }

    .y8-story-preview {
        border-top: 0;
    }

    .y8-preview-window {
        width: min(100%, 720px);
        justify-self: center;
    }
}

@media (max-width: 600px) {
    .y8-story {
        width: calc(100% - 16px);
        margin-top: 10px;
        margin-bottom: 18px;
    }

    .y8-story-copy {
        padding: 21px 16px 18px;
    }

    .y8-story-kicker {
        margin-bottom: 11px;
        font-size: .55rem;
    }

    .y8-story h2 {
        max-width: 19ch;
        font-size: clamp(1.75rem, 8.5vw, 2.4rem);
        line-height: .99;
    }

    .y8-story-copy > p:not(.y8-story-kicker) {
        margin-top: 13px;
        font-size: .82rem;
        line-height: 1.55;
    }

    .y8-story-copy > p.y8-story-note {
        margin-top: 9px;
        font-size: .73rem;
    }

    .y8-story-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        margin-top: 14px;
    }

    .y8-story-stats span {
        min-height: 43px;
        padding: 6px 7px;
    }

    .y8-story-route {
        gap: 6px 10px;
        margin-top: 12px;
        padding-top: 10px;
        font-size: .47rem;
    }

    .y8-story-route i {
        width: 18px;
        height: 18px;
    }

    .y8-story-preview {
        padding: 12px;
    }

    .y8-preview-bar {
        height: 27px;
    }

    .y8-preview-nav {
        padding: 8px;
    }

    .y8-preview-nav strong { font-size: .95rem; }
    .y8-preview-nav span { padding: 5px 6px; font-size: .36rem; }
    .y8-preview-nav i { display: none; }

    .y8-preview-tags {
        padding: 0 8px 7px;
    }

    .y8-preview-tags span {
        padding: 3px 5px;
        font-size: .32rem;
    }

    .y8-preview-grid {
        gap: 4px;
        padding: 6px;
    }

    .y8-preview-grid figcaption {
        padding: 4px;
        font-size: .32rem;
    }

    .y8-preview-foot {
        padding: 6px 7px;
        font-size: .36rem;
    }

    .y8-story-action {
        grid-template-columns: 1fr;
        gap: 9px;
        padding-top: 10px;
    }

    .y8-story-action > a {
        min-height: 48px;
        width: 100%;
    }
}

/* 2026-09-04 mobile homepage TOP GAMES equal-height pass.
   Keep every card aligned without an overlay/white footer block: the copy
   region has one consistent height, long text is clamped, and the play link
   participates in normal flow at the bottom. */
@media (max-width: 600px) {
    .top-games-section .top-game-card {
        height: auto;
        min-height: 0;
        grid-template-rows: auto 1fr;
        align-self: stretch;
    }

    .top-games-section .top-game-media {
        aspect-ratio: 16 / 10;
        min-height: 0;
    }

    .top-games-section .top-game-media img {
        width: 100%;
        height: 100%;
        min-height: 0;
        object-fit: cover;
    }

    .top-games-section .top-game-copy {
        display: flex;
        flex-direction: column;
        height: 132px;
        min-height: 0;
        gap: 5px;
        overflow: hidden;
        padding: 8px 8px 7px;
        background: #fff;
    }

    .top-games-section .top-game-card h3 {
        display: -webkit-box;
        margin: 0;
        overflow: hidden;
        font-size: .8rem;
        line-height: 1.18;
        white-space: normal;
        text-overflow: clip;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }

    .top-games-section .top-game-copy > p {
        display: -webkit-box;
        margin: 0;
        overflow: hidden;
        color: #697b81;
        font-size: .66rem;
        line-height: 1.34;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }

    .top-games-section .top-game-play {
        position: static;
        flex: 0 0 auto;
        margin-top: auto;
        border-top: 1px solid #dce5e7;
        background: transparent;
        padding-top: 5px;
        font-size: .52rem;
    }
}

@media (max-width: 380px) {
    .top-games-section .top-game-copy {
        height: 136px;
    }
}

/* ============================================================
   MOBILE/TABLET TOP GAMES HEIGHT NORMALIZATION v1.1.5
   Match the category archive breakpoint. Cards keep one visual height,
   long copy is clamped, and the PLAY row stays in normal flow instead
   of behaving like a white overlay strip.
   ============================================================ */
@media (max-width: 820px) {
    .top-games-section .top-games-grid {
        align-items: stretch;
    }

    .top-games-section .top-game-card {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: auto 1fr;
        align-self: stretch;
        height: 100%;
        min-height: 0;
        overflow: hidden;
    }

    .top-games-section .top-game-media {
        aspect-ratio: 16 / 10;
        min-height: 0;
    }

    .top-games-section .top-game-media img {
        display: block;
        width: 100%;
        height: 100%;
        min-height: 0;
        object-fit: cover;
    }

    .top-games-section .top-game-copy {
        display: flex;
        flex-direction: column;
        flex: 0 0 138px;
        width: 100%;
        height: 138px;
        min-height: 138px;
        max-height: 138px;
        gap: 5px;
        overflow: hidden;
        padding: 8px 8px 7px;
        background: #fff;
    }

    .top-games-section .top-game-meta {
        flex: 0 0 auto;
        font-size: .52rem;
    }

    .top-games-section .top-game-card h3 {
        display: -webkit-box;
        flex: 0 0 auto;
        overflow: hidden;
        margin: 0;
        max-height: calc(2 * 1.18em);
        font-size: .8rem;
        line-height: 1.18;
        white-space: normal;
        text-overflow: clip;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        line-clamp: 2;
    }

    .top-games-section .top-game-copy > p {
        display: -webkit-box;
        flex: 1 1 auto;
        min-height: 0;
        overflow: hidden;
        margin: 0;
        color: #697b81;
        font-size: .66rem;
        line-height: 1.34;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        line-clamp: 2;
    }

    .top-games-section .top-game-play {
        position: static;
        display: inline-flex;
        flex: 0 0 auto;
        align-items: center;
        justify-content: space-between;
        margin-top: auto;
        border-top: 1px solid #dce5e7;
        background: transparent !important;
        padding-top: 5px;
        font-size: .52rem;
    }
}

@media (max-width: 600px) {
    .top-games-section .top-game-copy {
        flex-basis: 134px;
        height: 134px;
        min-height: 134px;
        max-height: 134px;
    }
}

@media (max-width: 380px) {
    .top-games-section .top-game-copy {
        flex-basis: 138px;
        height: 138px;
        min-height: 138px;
        max-height: 138px;
    }
}

/* MOBILE PERFORMANCE v1.2.0 */
@media (max-width: 820px) {
    .top-games-grid::before,
    .top-games-grid::after {
        animation: none !important;
    }

    .top-game-card,
    .top-game-media img,
    .top-game-play,
    .archive-game-card,
    .archive-game-media img {
        transition-duration: 0s !important;
    }
}


/* ============================================================
   MOBILE FULL TOP GAMES INDEX v1.2.1
   Desktop keeps the compact eight-card rotating shortlist.
   When the mobile homepage hides WebGL, expose every curated Top Game here.
   Extra cards are still lazy-loaded, so offscreen thumbnails are not decoded
   up front. The desktop rotation script continues to target only the first 8.
   ============================================================ */
.top-game-card--mobile-extra,
.top-games-mobile-label {
    display: none !important;
}

@media (max-width: 820px), (pointer: coarse) {
    .top-games-section .top-game-card--mobile-extra {
        display: grid !important;
    }

    .top-games-desktop-label,
    .top-games-desktop-intro {
        display: none !important;
    }

    .top-games-mobile-label {
        display: inline !important;
    }

    /* Rotation is intentionally disabled on mobile, so do not advertise it. */
    .top-games-status > span:first-child,
    .top-games-status > span:nth-child(3),
    .top-games-status > i {
        display: none !important;
    }
}