.vxs-games-page .inside-article,
.vxs-games-page .entry-content {
    max-width: none;
}

.vxs-games-page .entry-content {
    margin-top: 0;
}

.vgh-page {
    --vgh-primary: #667eea;
    --vgh-secondary: #764ba2;
    --vgh-border: rgba(255, 255, 255, 0.1);
    --vgh-panel: rgba(255, 255, 255, 0.045);
    box-sizing: border-box;
    width: min(1180px, 100%);
    margin: 0 auto;
    padding: clamp(2rem, 5vw, 5rem) clamp(1rem, 3vw, 2rem) clamp(4rem, 8vw, 7rem);
    color: rgba(255, 255, 255, 0.72);
    font-family: var(--font-body, "DM Sans", sans-serif);
}

.vgh-page *,
.vgh-page *::before,
.vgh-page *::after {
    box-sizing: border-box;
}

.vgh-hero,
.vgh-together {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--vgh-border);
    border-radius: 24px;
    background: linear-gradient(145deg, rgba(102, 126, 234, 0.15), rgba(118, 75, 162, 0.08) 46%, rgba(255, 255, 255, 0.035));
    box-shadow: 0 22px 64px rgba(0, 0, 0, 0.24);
    backdrop-filter: blur(20px);
}

.vgh-hero {
    padding: clamp(2rem, 5vw, 4.5rem);
    margin-bottom: clamp(3rem, 7vw, 5.5rem);
}

.vgh-hero::before,
.vgh-together::before {
    position: absolute;
    inset: auto -12% -55% auto;
    width: min(440px, 60vw);
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(171, 146, 255, 0.28), transparent 68%);
    content: "";
    pointer-events: none;
}

.vgh-eyebrow {
    margin: 0 0 0.7rem !important;
    color: rgba(255, 255, 255, 0.48) !important;
    font-family: var(--font-display, Syne, sans-serif);
    font-size: 0.66rem !important;
    font-weight: 800;
    letter-spacing: 0.14em;
    line-height: 1.3;
    text-transform: uppercase;
}

.vgh-hero h1,
.vgh-section-heading h2,
.vgh-together h2,
.vgh-card h3 {
    margin: 0;
    color: #fff;
    font-family: var(--font-display, Syne, sans-serif);
    font-weight: 700;
    letter-spacing: -0.02em;
}

.vgh-hero h1 {
    max-width: 20ch;
    text-wrap: balance;
    font-size: clamp(1.7rem, 4.6vw, 3.2rem);
    font-weight: 800;
    line-height: 1.08;
}

.vgh-hero-copy {
    max-width: 680px;
    margin: 1rem 0 0 !important;
    color: rgba(255, 255, 255, 0.72) !important;
    font-size: 1rem !important;
    line-height: 1.65 !important;
}











.vgh-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 1.7rem;
}

.vgh-button,
.vgh-card-action,
.vgh-together-games a {
    align-items: center;
    font-family: var(--font-display, Syne, sans-serif);
    font-weight: 700;
    text-decoration: none;
}

.vgh-button {
    display: inline-flex;
    min-height: 46px;
    justify-content: center;
    padding: 0.72rem 1rem;
    border: 1px solid transparent;
    border-radius: 18px;
    font-size: 0.82rem;
    transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
}

.vgh-button--primary {
    gap: 0.5rem;
    background: linear-gradient(135deg, var(--vgh-primary), var(--vgh-secondary)) !important;
    box-shadow: 0 10px 26px rgba(102, 126, 234, 0.3);
    color: #fff !important;
}

.vgh-button--secondary {
    border-color: rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.06) !important;
    color: rgba(255, 255, 255, 0.9) !important;
}

.vgh-button:hover,
.vgh-button:focus-visible,
.vgh-card-action:hover,
.vgh-card-action:focus-visible,
.vgh-together-games a:hover,
.vgh-together-games a:focus-visible {
    transform: translateY(-3px);
}

.vgh-button:focus-visible,
.vgh-card-action:focus-visible,
.vgh-together-games a:focus-visible {
    outline: 2px solid #c8c0ff;
    outline-offset: 4px;
}

.vgh-signed-in {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin: 1.5rem 0 0 !important;
    padding: 0.55rem 0.75rem;
    border: 1px solid rgba(166, 244, 204, 0.22);
    border-radius: 999px;
    background: rgba(110, 215, 161, 0.08);
    color: rgba(218, 255, 235, 0.9) !important;
    font-size: 0.86rem !important;
}

.vgh-signed-in span {
    color: #91edb7;
}

.vgh-section {
    margin-bottom: clamp(2.5rem, 6vw, 4.5rem);
}

.vgh-section-heading {
    margin-bottom: 1.5rem;
}

.vgh-section-intro {
    max-width: 680px;
}

.vgh-section-heading h2,
.vgh-together h2 {
    font-size: clamp(1.35rem, 2.2vw, 1.5rem);
    line-height: 1.25;
}

.vgh-section-intro > p,
.vgh-together-copy > p:not(.vgh-eyebrow) {
    max-width: 39rem;
    margin: 0.75rem 0 0 !important;
    color: rgba(255, 255, 255, 0.62) !important;
    font-size: 1rem !important;
    line-height: 1.65 !important;
}

.vgh-shelf-icon img {
    display: block;
    width: 28px;
    height: 28px;
}

.vgh-tile[data-game="vibathlon-solo"] { --game-primary:#b9a4ff; --game-secondary:#f08bc4; --game-glow:rgba(185,164,255,.34); }
.vgh-tile[data-game="vibathlon-duet"] { --game-primary:#8b5cf6; --game-secondary:#ec4899; --game-glow:rgba(236,72,153,.3); }
.vgh-tile[data-game="vibathlon-battle"] { --game-primary:#3b82f6; --game-secondary:#1d4ed8; --game-glow:rgba(59,130,246,.34); }

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

.vgh-shelf--vibathlon .vgh-play {
    white-space: nowrap;
}

.vgh-vibathlon-mark {
    position: relative;
    z-index: 1;
    display: block;
    width: 100px;
    height: 100px;
}

.vgh-vibathlon-mark svg {
    display: block;
    width: 100%;
    height: 100%;
    filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.35));
}

.vgh-vibathlon-mark--battle img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.35));
}

.vgh-vibathlon-mark--duet {
    width: 160px;
    max-width: 100%;
}

.vgh-vibathlon-mark--duet img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.35));
}

.vgh-vibathlon-mark-label {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    font-family: var(--font-display, Syne, sans-serif);
    font-size: 0.52rem;
    font-weight: 800;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    white-space: nowrap;
}

.vgh-vibathlon-mark--duet .vgh-vibathlon-mark-label {
    z-index: 1;
    background: color-mix(in srgb, var(--game-primary) 34%, #0d0d18);
    padding: 5px 12px;
    border-radius: 20px;
}

.vgh-vibathlon-mark--duet .vgh-vibathlon-mark-label::before {
    content: "";
    position: absolute;
    inset: 0;
    padding: 1.5px;
    border-radius: inherit;
    background: conic-gradient(from var(--vgh-duet-halo-angle, 0deg), #8b5cf6 0 10%, #c084fc 16%, transparent 26% 56%, #ec4899 68%, #f472b6 80%, transparent 89% 100%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    filter: drop-shadow(0 0 5px #ec489988);
    pointer-events: none;
    animation: vgh-duet-halo-orbit 3.2s linear infinite;
}

@property --vgh-duet-halo-angle {
    syntax: "<angle>";
    inherits: false;
    initial-value: 0deg;
}

@keyframes vgh-duet-halo-orbit {
    to { --vgh-duet-halo-angle: 360deg; }
}

@media (prefers-reduced-motion: reduce) {
    .vgh-vibathlon-mark--duet .vgh-vibathlon-mark-label::before {
        animation: none;
    }
}

.vgh-shelf {
    margin-bottom: clamp(2.25rem, 5vw, 3.75rem);
}

.vgh-shelf-head {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    margin-bottom: 1.15rem;
}

.vgh-shelf-icon {
    display: grid;
    width: 46px;
    height: 46px;
    flex: none;
    place-items: center;
    border-radius: 15px;
    background: linear-gradient(145deg, rgba(102, 126, 234, 0.3), rgba(118, 75, 162, 0.2));
    border: 1px solid rgba(255, 255, 255, 0.14);
    font-family: "Apple Color Emoji", "Segoe UI Emoji", sans-serif;
    font-size: 1.4rem;
    transform: rotate(-4deg);
}

.vgh-shelf-head h2 {
    margin: 0;
    color: #fff;
    font-family: var(--font-display, Syne, sans-serif);
    font-size: clamp(1.3rem, 2.2vw, 1.55rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.2;
}

.vgh-shelf-head p {
    margin: 0.15rem 0 0 !important;
    color: rgba(255, 255, 255, 0.6) !important;
    font-size: 0.92rem !important;
}

.vgh-tiles {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.1rem;
}

.vgh-tiles--single {
    grid-template-columns: 1fr;
}

.vgh-tile {
    --game-primary: #667eea;
    --game-secondary: #764ba2;
    --game-glow: rgba(102, 126, 234, 0.3);
    position: relative;
    display: flex;
    min-width: 0;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--game-primary) 38%, rgba(255, 255, 255, 0.1));
    border-radius: 26px;
    background: linear-gradient(180deg, color-mix(in srgb, var(--game-primary) 10%, #10101c), #0d0d18);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28);
    transition: transform 0.28s cubic-bezier(0.2, 0.9, 0.3, 1.3), box-shadow 0.28s ease, border-color 0.28s ease;
}

.vgh-tile:hover,
.vgh-tile:focus-within {
    transform: translateY(-6px) rotate(-0.6deg);
    border-color: color-mix(in srgb, var(--game-primary) 75%, #fff);
    box-shadow: 0 18px 40px var(--game-glow);
}

.vgh-tile:nth-child(even):hover {
    transform: translateY(-6px) rotate(0.6deg);
}

.vgh-tile-art {
    position: relative;
    display: grid;
    min-height: 132px;
    place-items: center;
    overflow: hidden;
    background:
        radial-gradient(circle at 22% 25%, color-mix(in srgb, var(--game-secondary) 55%, transparent), transparent 55%),
        radial-gradient(circle at 80% 80%, color-mix(in srgb, var(--game-primary) 60%, transparent), transparent 60%),
        linear-gradient(135deg, color-mix(in srgb, var(--game-primary) 34%, #0d0d18), color-mix(in srgb, var(--game-secondary) 30%, #0d0d18));
}

.vgh-tile-art::before,
.vgh-tile-art::after {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    content: "";
}

.vgh-tile-art::before {
    top: -34px;
    right: -20px;
    width: 110px;
    height: 110px;
}

.vgh-tile-art::after {
    bottom: -40px;
    left: -24px;
    width: 96px;
    height: 96px;
}

.vgh-tile-emoji {
    position: relative;
    z-index: 1;
    font-family: "Apple Color Emoji", "Segoe UI Emoji", sans-serif;
    font-size: 3.6rem;
    line-height: 1;
    filter: drop-shadow(0 8px 14px rgba(0, 0, 0, 0.35));
    transition: transform 0.35s cubic-bezier(0.3, 1.6, 0.5, 1);
}

.vgh-tile:hover .vgh-tile-emoji,
.vgh-tile:focus-within .vgh-tile-emoji {
    transform: scale(1.18) rotate(-8deg);
}

.vgh-tile-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 2;
    padding: 0.28rem 0.7rem;
    border-radius: 999px;
    background: #fff;
    color: #12121f;
    font-family: var(--font-display, Syne, sans-serif);
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    transform: rotate(-3deg);
}

.vgh-tile-badge.is-soon {
    background: rgba(255, 255, 255, 0.16);
    color: #fff;
    border: 1px dashed rgba(255, 255, 255, 0.5);
}

.vgh-tile-body {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: 1.1rem 1.25rem 1.3rem;
}

.vgh-tile-kind {
    margin: 0 0 0.3rem !important;
    color: color-mix(in srgb, var(--game-primary) 65%, #fff) !important;
    font-family: var(--font-display, Syne, sans-serif);
    font-size: 0.66rem !important;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.vgh-tile h3 {
    margin: 0;
    color: #fff;
    font-family: var(--font-display, Syne, sans-serif);
    font-size: 1.3rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.2;
}

.vgh-tile-copy {
    margin: 0.5rem 0 1.1rem !important;
    color: rgba(255, 255, 255, 0.66) !important;
    font-size: 0.9rem !important;
    line-height: 1.55 !important;
}

.vgh-play {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: 0.5rem;
    min-height: 44px;
    margin-top: auto;
    padding: 0.5rem 1.15rem;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--game-primary), var(--game-secondary)) !important;
    box-shadow: 0 5px 0 color-mix(in srgb, var(--game-secondary) 55%, #000), 0 10px 18px rgba(0, 0, 0, 0.3);
    color: #fff !important;
    font-family: var(--font-display, Syne, sans-serif);
    font-size: 0.85rem;
    font-weight: 800;
    text-decoration: none;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.vgh-play span {
    font-size: 0.7rem;
    transition: transform 0.2s ease;
}

.vgh-tile:hover .vgh-play span,
.vgh-play:focus-visible span {
    transform: translateX(4px);
}

.vgh-play:active {
    transform: translateY(3px);
    box-shadow: 0 2px 0 color-mix(in srgb, var(--game-secondary) 55%, #000), 0 6px 12px rgba(0, 0, 0, 0.3);
}

.vgh-play::after {
    position: absolute;
    inset: 0;
    content: "";
}

.vgh-play:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 3px;
}

.vgh-play--locked,
.vgh-play--soon {
    background: rgba(255, 255, 255, 0.07) !important;
    box-shadow: none;
    color: rgba(255, 255, 255, 0.7) !important;
    text-shadow: none;
    border: 1px solid rgba(255, 255, 255, 0.14);
}

.vgh-play--locked::after,
.vgh-play--soon::after {
    display: none;
}

.vgh-tile--soon {
    border-style: dashed;
}

.vgh-tile--soon .vgh-tile-art {
    filter: saturate(0.75);
}

.vgh-tile--featured {
    grid-column: span 2;
    flex-direction: row;
}

.vgh-tile--featured .vgh-tile-art {
    width: 40%;
    min-height: 0;
    flex: none;
}

.vgh-tile--featured .vgh-tile-emoji {
    font-size: 5rem;
}

.vgh-tile--featured .vgh-tile-body {
    justify-content: center;
    padding: 1.5rem 1.6rem;
}

.vgh-tile--featured h3 {
    font-size: 1.6rem;
}

.vgh-tiles--single .vgh-tile--featured {
    grid-column: auto;
}


.vgh-tile[data-game="mood-memory"] { --game-primary:#0ea5a4; --game-secondary:#38bdf8; --game-glow:rgba(14,165,164,.32); }
.vgh-tile[data-game="rapid-pace"] { --game-primary:#f59e0b; --game-secondary:#f43f5e; --game-glow:rgba(245,158,11,.34); }
.vgh-tile[data-game="mood-match"] { --game-primary:#8b5cf6; --game-secondary:#ec4899; --game-glow:rgba(139,92,246,.34); }
.vgh-tile[data-game="mood-ring"] { --game-primary:#06b6d4; --game-secondary:#fb7185; --game-glow:rgba(6,182,212,.34); }
.vgh-tile[data-game="sprinter"] { --game-primary:#10b981; --game-secondary:#14b8a6; --game-glow:rgba(16,185,129,.3); }
.vgh-tile[data-game="mood-guesser"] { --game-primary:#a889b4; --game-secondary:#6b4f75; --game-glow:rgba(168,137,180,.28); }
.vgh-tile[data-game="vibe-challenge"] { --game-primary:#8ea272; --game-secondary:#4a5c36; --game-glow:rgba(142,162,114,.3); }
.vgh-tile[data-game="vibe-shuffle"] { --game-primary:#f97316; --game-secondary:#a78bfa; --game-glow:rgba(249,115,22,.3); }
.vgh-tile[data-game="trivia"] { --game-primary:#ef4444; --game-secondary:#b91c1c; --game-glow:rgba(239,68,68,.32); }
.vgh-tile[data-game="mysteria"] { --game-primary:#7c6fd1; --game-secondary:#4f4693; --game-glow:rgba(124,111,209,.32); }

.vgh-together {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(280px, 0.9fr);
    gap: 1.5rem 3rem;
    align-items: center;
    padding: clamp(1.5rem, 4vw, 2.5rem);
}

.vgh-together-copy,
.vgh-together-games {
    position: relative;
}

.vgh-together-copy > p:not(.vgh-eyebrow) {
    margin-top: 0.75rem !important;
}

.vgh-together-games {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}

.vgh-together-games > span {
    display: grid;
    gap: 0.25rem;
    min-height: 74px;
    align-content: center;
    padding: 0.9rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    background: rgba(10, 10, 20, 0.22);
}

.vgh-together-games strong {
    color: #fff;
    font-family: var(--font-display, Syne, sans-serif);
    font-size: 0.88rem;
}

.vgh-together-games small {
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.78rem;
}

.vgh-party-pass-cta {
    grid-column: 1 / -1;
    display: inline-flex;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.375rem 0.75rem;
    border: 0;
    border-radius: var(--r-full, 9999px);
    background: linear-gradient(135deg, #f59e0b, #b45309) !important;
    box-shadow: 0 6px 18px rgba(245, 158, 11, 0.4);
    color: #fff !important;
    font-family: var(--font-body, "DM Sans", sans-serif);
    font-size: 0.9rem !important;
    font-weight: 700;
    text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.vgh-party-pass-cta:hover,
.vgh-party-pass-cta:focus-visible {
    color: #fff !important;
    transform: translateY(-4px);
    box-shadow: 0 10px 28px rgba(245, 158, 11, 0.55);
}

.vgh-party-pass-cta-icon {
    font-family: "Apple Color Emoji", "Segoe UI Emoji", sans-serif;
    font-size: 1.05rem;
    line-height: 1;
    white-space: nowrap;
}

@media (max-width: 1000px) {
    .vgh-tiles {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

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

@media (min-width: 1001px) {
    .vgh-shelf--think .vgh-tile:nth-child(5) {
        grid-column: 1;
    }

    .vgh-shelf--think .vgh-tile:nth-child(6) {
        grid-column: 2;
    }

    .vgh-shelf--think .vgh-tile:nth-child(7) {
        grid-column: 3;
    }
}

@media (max-width: 900px) {
    .vgh-together {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 680px) {
    .vgh-page {
        padding-inline: 1rem;
    }

    .vgh-hero,
    .vgh-together {
        border-radius: 20px;
    }


    .vgh-tiles {
        grid-template-columns: 1fr;
    }

    .vgh-tiles--three {
        grid-template-columns: 1fr;
    }

    .vgh-tile--featured {
        grid-column: auto;
        flex-direction: column;
    }

    .vgh-tile--featured .vgh-tile-art {
        width: auto;
        min-height: 120px;
    }

}

@media (max-width: 420px) {
    .vgh-hero {
        padding: 1.5rem;
    }

    .vgh-hero-actions {
        display: grid;
        grid-template-columns: 1fr;
    }

    .vgh-button {
        width: 100%;
    }

}

@media (prefers-reduced-motion: reduce) {
    .vgh-button,
    .vgh-tile,
    .vgh-tile-emoji,
    .vgh-play,
    .vgh-together-games a {
        transition: none;
    }

        .vgh-tile:hover,
    .vgh-tile:focus-within {
        transform: none;
    }
}

/* ---- Hero: centred G lead ---- */
.vgh-hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: clamp(1.75rem, 4.5vw, 3.25rem);
    background:
        radial-gradient(560px 300px at 50% 0%, rgba(102, 126, 234, 0.14), transparent 70%),
        rgba(255, 255, 255, 0.03);
    text-align: center;
}

.vgh-hero::before {
    display: none;
}

.vgh-hero .vgh-eyebrow {
    margin: 0 0 1.25rem !important;
}

.vgh-bigG {
    display: flex;
    width: 224px;
    height: 224px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    padding: 1.4rem;
    border: 2px solid transparent;
    border-radius: 50%;
    background:
        radial-gradient(circle at 36% 22%, rgba(255, 255, 255, 0.1), transparent 46%) padding-box,
        linear-gradient(#171724, #171724) padding-box,
        linear-gradient(135deg, #667eea, #764ba2) border-box;
    box-shadow: 0 0 0 10px rgba(102, 126, 234, 0.06), 0 22px 46px rgba(0, 0, 0, 0.36);
}

.vgh-bigG-letter {
    background: linear-gradient(135deg, #7f96f5 0%, #a274dc 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: #8f9df0;
    filter: drop-shadow(0 4px 10px rgba(102, 126, 234, 0.35));
    font-family: var(--font-display, Syne, sans-serif);
    font-size: 5.2rem;
    font-weight: 800;
    line-height: 0.95;
}

.vgh-bigG-label {
    color: rgba(255, 255, 255, 0.62);
    font-family: var(--font-display, Syne, sans-serif);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.22em;
    line-height: 1;
    padding-left: 0.22em;
}

.vgh-hero .vgh-gearup {
    margin: 1rem 0 1.6rem !important;
    color: rgba(255, 255, 255, 0.72) !important;
    font-family: var(--font-display, Syne, sans-serif);
    font-size: 0.9rem !important;
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1.3 !important;
}

.vgh-hero h1 {
    max-width: 22ch;
}

.vgh-hero .vgh-hero-copy {
    max-width: 52ch;
}

.vgh-hero .vgh-hero-actions {
    justify-content: center;
    margin-top: 1.5rem;
}

.vgh-bigG-label:first-child {
    color: #d1d1d1;
    font-size: 0.88rem;
    letter-spacing: 0.2em;
    padding-left: 0.2em;
}

.vgh-bigG-label:last-child {
    font-size: 0.6rem;
    letter-spacing: 0.24em;
    padding-left: 0.24em;
}

.vgh-hero .vgh-gearup-g {
    background: linear-gradient(135deg, #7f96f5 0%, #a274dc 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: #8f9df0;
    font-family: var(--font-display, Syne, sans-serif);
    font-size: 1.12em;
    font-weight: 800;
}

/* Gentle pulse on the G mark: a soft brand halo and a barely-there scale. */
.vgh-bigG {
    position: relative;
    animation: vghPulse 4.5s ease-in-out infinite;
}

.vgh-bigG::after {
    position: absolute;
    inset: -2px;
    border: 2px solid #667eea;
    border-radius: 50%;
    content: "";
    opacity: 0;
    pointer-events: none;
    animation: vghHalo 4.5s ease-in-out infinite;
}

@keyframes vghPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.02); }
}

@keyframes vghHalo {
    0% { opacity: 0.35; transform: scale(1); }
    70%, 100% { opacity: 0; transform: scale(1.14); }
}

@media (prefers-reduced-motion: reduce) {
    .vgh-bigG,
    .vgh-bigG::after {
        animation: none;
    }
}

/* Phones and small tablets: smaller mark, one-line tagline. */
@media (max-width: 900px) {
    .vgh-bigG {
        width: 196px;
        height: 196px;
        padding: 1.2rem;
    }

    .vgh-bigG-letter {
        font-size: 4.5rem;
    }
}

@media (max-width: 480px) {
    .vgh-bigG {
        width: 172px;
        height: 172px;
        padding: 1rem;
        gap: 0.4rem;
    }

    .vgh-bigG-letter {
        font-size: 3.9rem;
    }

    .vgh-bigG-label:first-child {
        font-size: 0.8rem;
    }

    .vgh-bigG-label:last-child {
        font-size: 0.56rem;
    }

    .vgh-hero .vgh-gearup {
        font-size: 0.74rem !important;
        letter-spacing: 0;
        white-space: nowrap;
    }
}

/* Shared-play hero: people using the games lead the hub experience. */
.vgh-hero {
    display: grid;
    grid-template-columns: minmax(0, 0.93fr) minmax(0, 1.07fr);
    align-items: stretch;
    gap: clamp(1.5rem, 4vw, 3.5rem);
    padding: clamp(1.25rem, 2.5vw, 2rem);
    border-color: rgba(255, 255, 255, 0.12);
    background: linear-gradient(135deg, rgba(19, 25, 38, 0.98), rgba(12, 15, 25, 0.97));
    text-align: left;
}

.vgh-hero::after {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(9, 12, 21, 0.1) 35%, transparent 82%);
    content: "";
    pointer-events: none;
}

.vgh-hero-content,
.vgh-hero-visual {
    position: relative;
    z-index: 1;
    min-width: 0;
}

.vgh-hero-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding: clamp(0.75rem, 2vw, 2rem);
}

.vgh-brand-lockup {
    display: inline-flex;
    align-items: center;
    gap: 0.48rem;
    margin: 0 0 1.4rem;
    color: #fff;
    font-family: var(--font-display, Syne, sans-serif);
    line-height: 1;
}

.vgh-brand-word {
    color: rgba(255, 255, 255, 0.88);
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.14em;
}

.vgh-brand-g {
    display: grid;
    width: 2.15rem;
    height: 2.15rem;
    flex: none;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 50%;
    background: radial-gradient(circle at 34% 28%, rgba(255, 255, 255, 0.42), transparent 48%), linear-gradient(135deg, #637eea, #7045a4);
    box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.11), 0 5px 15px rgba(102, 126, 234, 0.28);
    color: #fff;
    font-weight: 800;
    font-size: 1.12rem;
    letter-spacing: 0;
    line-height: 1;
    -webkit-text-fill-color: #fff;
}

.vgh-hero .vgh-gearup {
    margin: 0.9rem 0 0 !important;
    color: rgba(229, 237, 255, 0.8) !important;
    font-size: 0.86rem !important;
    letter-spacing: 0.01em;
    white-space: normal;
}

.vgh-hero .vgh-gearup-orb {
    display: inline-block;
    width: 2.05rem;
    height: 2.05rem;
    margin: 0 .16rem;
    overflow: visible;
    vertical-align: -0.64rem;
}

.vgh-hero h1 {
    max-width: 17ch;
    font-size: clamp(1.95rem, 3.55vw, 3.05rem);
    line-height: 1.04;
}

.vgh-hero .vgh-hero-copy {
    max-width: 43ch;
    margin-top: 1rem !important;
}

.vgh-hero-count {
    margin: 1rem 0 0 !important;
    color: rgba(213, 223, 243, 0.82) !important;
    font-family: var(--font-display, Syne, sans-serif);
    font-size: 0.84rem !important;
    font-weight: 700;
    letter-spacing: 0.025em;
}

.vgh-hero-count span {
    padding: 0 0.35em;
    color: #75c6f1;
}

.vgh-hero-count sup,
#vgh-shelf-vibathlon sup {
    font-size: 0.62em;
    line-height: 0;
    vertical-align: super;
}

.vgh-hero .vgh-hero-actions {
    justify-content: flex-start;
    margin-top: 1.35rem;
}

.vgh-hero-visual {
    min-height: 390px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 18px;
    background: #111827;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.28);
}

.vgh-hero-visual::after {
    position: absolute;
    inset: 42% 0 0;
    background: linear-gradient(180deg, transparent, rgba(8, 12, 20, 0.72));
    content: "";
    pointer-events: none;
}

.vgh-hero-visual img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: inherit;
    object-fit: cover;
    object-position: center;
}

.vgh-hero-visual-caption {
    position: absolute;
    right: 1rem;
    bottom: 1rem;
    left: 1rem;
    z-index: 1;
    color: #fff;
    font-family: var(--font-display, Syne, sans-serif);
    font-size: clamp(0.85rem, 1.4vw, 1.05rem);
    font-weight: 700;
    text-align: center;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.7);
}

@media (max-width: 900px) {
    .vgh-hero {
        grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
        gap: 1.25rem;
    }

    .vgh-hero-visual {
        min-height: 340px;
    }
}

@media (max-width: 680px) {
    .vgh-hero {
        grid-template-columns: minmax(0, 1fr);
        gap: 1.25rem;
        padding: 1rem;
    }

    .vgh-hero-content {
        padding: 1rem 0.55rem 0.35rem;
    }

    .vgh-hero h1 {
        max-width: 15ch;
        font-size: clamp(1.9rem, 8vw, 2.55rem);
    }

    .vgh-hero .vgh-hero-copy {
        max-width: 42ch;
    }

    .vgh-hero-visual {
        min-height: 0;
        aspect-ratio: 1.42;
    }

    .vgh-hero-visual img {
        min-height: 0;
    }
}

@media (max-width: 420px) {
    .vgh-hero {
        padding: 0.8rem;
    }

    .vgh-hero .vgh-hero-actions {
        display: grid;
        width: 100%;
        grid-template-columns: 1fr;
    }

    .vgh-hero .vgh-button {
        width: 100%;
    }
}

@media (max-width: 480px) {
    .vgh-hero {
        padding-inline: 1.15rem;
    }

    .vgh-hero h1 {
        max-width: none;
        font-size: 1.28rem;
    }

    .vgh-hero .vgh-hero-copy {
        font-size: 0.95rem !important;
    }
}

@media (max-width: 760px) {
    .vgh-hero {
        grid-template-columns: minmax(0, 1fr);
        row-gap: 0.9rem;
    }

    /* Let the mobile hero image follow the promise, before the navigation actions. */
    .vgh-hero-content {
        display: contents;
    }

    .vgh-hero .vgh-brand-lockup { grid-column: 1; grid-row: 1; margin: 0 0 0.15rem; }
    .vgh-hero h1 { grid-column: 1; grid-row: 2; }
    .vgh-hero .vgh-hero-copy { grid-column: 1; grid-row: 3; margin-top: 0 !important; }
    .vgh-hero-visual { grid-column: 1; grid-row: 4; }
    .vgh-hero .vgh-hero-count { grid-column: 1; grid-row: 5; margin: 0 !important; }
    .vgh-hero .vgh-hero-actions { grid-column: 1; grid-row: 6; margin-top: 0; }
    .vgh-hero .vgh-gearup { grid-column: 1; grid-row: 7; margin: 0 !important; }

    .vgh-hero-visual {
        min-height: 0;
        aspect-ratio: 1.42;
    }

    .vgh-hero-visual img {
        min-height: 0;
    }
}

/* The Games hub hero uses the same centered, full-width image sequence as the pass flyers. */
.vgh-hero {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    row-gap: 1rem;
    text-align: center;
}

.vgh-hero-content { display: contents; }
.vgh-hero .vgh-brand-lockup { grid-column: 1; grid-row: 1; justify-self: center; margin: 0 0 0.2rem; }
.vgh-hero h1 { grid-column: 1; grid-row: 2; justify-self: center; max-width: 24ch; margin: 0 auto; }
.vgh-hero .vgh-hero-copy { grid-column: 1; grid-row: 3; justify-self: center; max-width: 70ch; margin: 0 auto !important; }
.vgh-hero-visual { grid-column: 1; grid-row: 4; width: 100%; min-height: 0; aspect-ratio: 16 / 9; }
.vgh-hero .vgh-hero-count { grid-column: 1; grid-row: 5; justify-self: center; margin: 0 !important; }
.vgh-hero .vgh-hero-actions { grid-column: 1; grid-row: 6; justify-content: center; margin: 0; }
.vgh-hero .vgh-gearup { grid-column: 1; grid-row: 7; justify-self: center; margin: 0 !important; text-align: center; }

@media (max-width: 480px) {
    .vgh-hero h1 { font-size: 1.9rem; }
}

.vgh-tile[data-game="music-q"] .vgh-tile-emoji {
    display: grid;
    width: 64px;
    height: 64px;
    place-items: center;
    border-radius: 18px;
    background: linear-gradient(135deg, #f6f3ff, #c8d0ff);
    box-shadow: 0 8px 22px rgba(120, 140, 255, 0.35);
    filter: none;
    opacity: 1;
}
.vgh-tile[data-game="music-q"] .vgh-tile-emoji { width: 54px; height: 54px; margin-top: 16px; font-size: 1.7rem; }

.inside-article:has(.vgh-page) {
    background:
        radial-gradient(circle at 7% 5%, rgba(150, 165, 255, 0.30), transparent 40%),
        radial-gradient(circle at 95% 26%, rgba(255, 188, 168, 0.28), transparent 38%),
        radial-gradient(circle at 10% 76%, rgba(170, 228, 226, 0.28), transparent 36%),
        radial-gradient(circle at 92% 92%, rgba(205, 180, 255, 0.26), transparent 38%),
        linear-gradient(150deg, #fdfbf7, #efeaf6);
}
.vgh-page .vgh-shelf-head h2,
.vgh-page .vgh-shelf-head h3 { color: #1b1d3a !important; }
.vgh-page .vgh-shelf-head p { color: #4a4d6a !important; }
.vgh-page .vgh-together {
    background: linear-gradient(145deg, #2b2e4d, #181b33) !important;
    border-color: rgba(190, 200, 255, 0.28);
    box-shadow: 0 18px 44px rgba(27, 29, 58, 0.28);
}

.inside-article:has(.vgh-page) {
    background:
        radial-gradient(circle at 6% 3%, rgba(160, 172, 255, 0.18), transparent 34%),
        radial-gradient(circle at 96% 97%, rgba(255, 196, 176, 0.18), transparent 34%),
        linear-gradient(150deg, #fdfbf8, #f3eff8);
}
.vgh-page .vgh-shelf {
    padding: 1.5rem 1.4rem 1.7rem;
    border: 1px solid rgba(60, 64, 120, 0.12);
    border-radius: 26px;
    box-shadow: 0 10px 30px rgba(60, 64, 120, 0.08);
}
.vgh-page .vgh-shelf--vibathlon {
    background:
        radial-gradient(circle at 92% 8%, rgba(176, 148, 255, 0.32), transparent 40%),
        radial-gradient(circle at 4% 96%, rgba(130, 160, 255, 0.24), transparent 38%),
        linear-gradient(150deg, #f4f0ff, #e2dafa);
}
.vgh-page .vgh-shelf--fast {
    background:
        radial-gradient(circle at 94% 10%, rgba(255, 176, 120, 0.34), transparent 40%),
        radial-gradient(circle at 5% 94%, rgba(255, 150, 170, 0.22), transparent 38%),
        linear-gradient(150deg, #fff5ec, #fddfcf);
}
.vgh-page .vgh-shelf--think {
    background:
        radial-gradient(circle at 93% 9%, rgba(120, 214, 208, 0.34), transparent 40%),
        radial-gradient(circle at 5% 95%, rgba(150, 190, 255, 0.24), transparent 38%),
        linear-gradient(150deg, #edf9f7, #d6eaf0);
}

.vgh-page .vgh-shelf--vibathlon { --vgh-edge: #8a6cff; }
.vgh-page .vgh-shelf--fast { --vgh-edge: #ff8a3d; }
.vgh-page .vgh-shelf--think { --vgh-edge: #14b8a6; }
.vgh-page .vgh-shelf {
    background: linear-gradient(145deg, color-mix(in srgb, var(--vgh-edge) 20%, #fffdfa), color-mix(in srgb, var(--vgh-edge) 7%, #f7f4fa)) !important;
    border: 1px solid color-mix(in srgb, var(--vgh-edge) 60%, #ffffff);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 12px 30px color-mix(in srgb, var(--vgh-edge) 24%, transparent);
}
.vgh-page .vgh-shelf-head h2,
.vgh-page .vgh-shelf-head h3 { color: color-mix(in srgb, var(--vgh-edge) 30%, #15172e) !important; }

.inside-article:has(.vgh-page) {
    background:
        radial-gradient(ellipse at 0 4%, #eef0ff, transparent 50%),
        radial-gradient(ellipse at 100% 90%, #edb4ac, transparent 50%),
        linear-gradient(125deg, #dfe4fb, #e8eaf8 54%, #f2c8b8) !important;
}
.vgh-page .vgh-shelf {
    border: 1px solid #ffffff87;
    border-radius: 24px;
    color: #1c1626;
    box-shadow: 0 19px 38px #41324930;
}
.vgh-page .vgh-shelf--vibathlon {
    background:
        radial-gradient(ellipse at 0 0, #f4f5ff, transparent 55%),
        linear-gradient(125deg, #e4e6fb, #d9d2f4) !important;
}
.vgh-page .vgh-shelf--fast {
    background:
        radial-gradient(ellipse at 0 0, #fff3ea, transparent 55%),
        linear-gradient(125deg, #f8e3d8, #f2c8b8) !important;
}
.vgh-page .vgh-shelf--think {
    background:
        radial-gradient(ellipse at 0 0, #f1f6ff, transparent 55%),
        linear-gradient(125deg, #dfe9fb, #cfe2ee) !important;
}
.vgh-page .vgh-shelf-head h2,
.vgh-page .vgh-shelf-head h3 { color: #1c1626 !important; }
.vgh-page .vgh-shelf-head p { color: #4a4358 !important; }
.vgh-page .vgh-tile { border: 1px solid #ffffff87; box-shadow: 0 19px 38px #41324952; }

/* dark band behind the hero, like the homepage hero */
.vgh-page .vgh-hero {
    box-shadow: 0 0 0 400px #0f0d1c !important;
    clip-path: inset(-110px -72px -48px -72px round 0 0 36px 36px);
}
.vgh-page .vgh-hero {
    box-shadow: 0 0 0 400px #0f0d1c !important;
    clip-path: inset(-110px -72px -64px -72px);
    background: radial-gradient(ellipse at 70% 12%, rgba(120, 60, 150, 0.55), transparent 62%) !important;
    border-color: transparent !important;
}
.vgh-page .vgh-hero {
    background:
        radial-gradient(ellipse at 70% 12%, rgba(120, 60, 150, 0.5), transparent 62%),
        #0f0d1c !important;
    border-radius: 0;
}
.vgh-page .vgh-shelf-head h2 { scroll-margin-top: 130px; }
.vgh-play::after { z-index: 3; }
.vgh-tile:has(a.vgh-play) { cursor: pointer; }
.vgh-tile:has(a.vgh-play:focus-visible) { outline: 3px solid #fff; outline-offset: 3px; }
.vgh-play:focus-visible { outline: 0; }