/* =====================================================================
   games.css — SheetGenie Games (hub + game pages), DARK base.
   Light theme lives in css/games-light.css, gated on
   [data-v2-mode-theme="light"] so dark stays untouched.
   ===================================================================== */

body.sg-games-body {
    --sgg-ink: #f7fbff;
    --sgg-muted: #cfe0f8;
    --sgg-subtle: #93aecf;
    --sgg-line: rgba(148, 180, 220, .28);
    --sgg-line-strong: rgba(125, 211, 252, .46);
    --sgg-card: linear-gradient(180deg, rgba(19, 43, 82, .94), rgba(13, 37, 70, .94));
    --sgg-card-soft: rgba(255, 255, 255, .06);
    --sgg-accent: #38bdf8;
    --sgg-accent-2: #2563eb;
    --sgg-cta: linear-gradient(135deg, #1d4ed8, #0284c7);
    --sgg-cta-ink: #ffffff;
    --sgg-mint: #8ef3d2;
    --sgg-amber: #fbbf24;
    --sgg-danger: #fb7185;
    --sgg-shadow: 0 22px 54px rgba(2, 8, 23, .34), inset 0 1px 0 rgba(255, 255, 255, .08);
    --sgg-shadow-lift: 0 30px 68px rgba(2, 8, 23, .44), inset 0 1px 0 rgba(255, 255, 255, .12);
    --sgg-radius: 22px;

    min-height: 100vh;
    margin: 0;
    padding-top: var(--sheetgenie-topbar-offset, 82px);
    color: var(--sgg-ink);
    background-color: #07152c;
    background-image:
        radial-gradient(circle at 12% 14%, rgba(56, 189, 248, .22), transparent 42%),
        radial-gradient(circle at 88% 12%, rgba(129, 140, 248, .18), transparent 42%),
        radial-gradient(circle at 86% 90%, rgba(45, 212, 191, .20), transparent 46%),
        radial-gradient(circle at 10% 88%, rgba(59, 130, 246, .20), transparent 44%),
        linear-gradient(140deg, #07152c 0%, #0b2143 48%, #0e2a4d 100%);
    background-attachment: fixed;
    font-family: "Sarabun", "Plus Jakarta Sans", system-ui, sans-serif;
}

body.sg-games-body * {
    box-sizing: border-box;
}

/* ---- shared Mode Studio background scene (dark) ---- */
body.sg-games-body[data-v2-mode-theme="dark"] .sg-games-background-scene {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}

body.sg-games-body[data-v2-mode-theme="dark"] :where(.sg-games-shell, .sg-games-footer) {
    position: relative;
    z-index: 1;
}

body.sg-games-body[data-v2-mode-theme="dark"] .sg-games-background-scene :where(.sg-games-blob, .sg-games-curve, .sg-games-geo) {
    position: absolute;
    pointer-events: none;
}

body.sg-games-body[data-v2-mode-theme="dark"] .sg-games-blob { border-radius: 50%; filter: blur(78px); opacity: .60; mix-blend-mode: screen; }
body.sg-games-body[data-v2-mode-theme="dark"] .sg-games-blob-a { width: 260px; height: 260px; left: 8%; top: 6%; background: #3b9bff; }
body.sg-games-body[data-v2-mode-theme="dark"] .sg-games-blob-b { width: 320px; height: 320px; right: 10%; bottom: 6%; background: #2fe0c4; animation: sggBlobDrift 14s ease-in-out infinite; }
body.sg-games-body[data-v2-mode-theme="dark"] .sg-games-blob-c { width: 190px; height: 190px; left: 52%; top: 50%; background: #8fc4ff; animation: sggBlobDrift 16s ease-in-out infinite reverse; }
body.sg-games-body[data-v2-mode-theme="dark"] .sg-games-curve { border-radius: 999px; border: 1px solid rgba(130, 195, 255, .5); opacity: 1; }
body.sg-games-body[data-v2-mode-theme="dark"] .sg-games-curve-a { width: 720px; height: 720px; left: -320px; top: 120px; transform: rotate(-20deg); }
body.sg-games-body[data-v2-mode-theme="dark"] .sg-games-curve-b { width: 900px; height: 540px; right: -420px; top: 240px; transform: rotate(8deg); }
body.sg-games-body[data-v2-mode-theme="dark"] .sg-games-geo { opacity: .9; }
body.sg-games-body[data-v2-mode-theme="dark"] .sg-games-geo-ring { border-radius: 50%; border: 1px solid rgba(135, 201, 255, .6); box-shadow: 0 0 22px rgba(59, 130, 246, .35); }
body.sg-games-body[data-v2-mode-theme="dark"] .sg-games-geo-ring-a { width: 120px; height: 120px; top: 16%; left: 54%; --sgg-geo-rot: 0deg; animation: sggGeoFloat 12s ease-in-out infinite; }
body.sg-games-body[data-v2-mode-theme="dark"] .sg-games-geo-ring-b { width: 80px; height: 80px; bottom: 18%; left: 12%; --sgg-geo-rot: 0deg; animation: sggGeoPulse 9s ease-in-out infinite; }
body.sg-games-body[data-v2-mode-theme="dark"] .sg-games-geo-square { border-radius: 14px; border: 1px solid rgba(126, 189, 255, .6); box-shadow: 0 0 18px rgba(0, 174, 239, .28); }
body.sg-games-body[data-v2-mode-theme="dark"] .sg-games-geo-square-a { width: 72px; height: 72px; top: 30%; right: 34%; --sgg-geo-rot: 16deg; animation: sggGeoSpinA 13s linear infinite; }
body.sg-games-body[data-v2-mode-theme="dark"] .sg-games-geo-square-b { width: 46px; height: 46px; bottom: 31%; right: 10%; --sgg-geo-rot: -22deg; animation: sggGeoFloat 11s ease-in-out infinite reverse; }
body.sg-games-body[data-v2-mode-theme="dark"] .sg-games-geo-triangle { width: 0; height: 0; border-left: 18px solid transparent; border-right: 18px solid transparent; border-bottom: 30px solid rgba(124, 196, 255, .5); filter: drop-shadow(0 0 12px rgba(59, 130, 246, .4)); }
body.sg-games-body[data-v2-mode-theme="dark"] .sg-games-geo-triangle-a { top: 18%; right: 16%; --sgg-geo-rot: 8deg; animation: sggGeoSpinB 14s linear infinite; }
body.sg-games-body[data-v2-mode-theme="dark"] .sg-games-geo-triangle-b { bottom: 24%; left: 44%; --sgg-geo-rot: -14deg; animation: sggGeoPulse 10s ease-in-out infinite; }
body.sg-games-body[data-v2-mode-theme="dark"] .sg-games-geo-line { height: 2px; border-radius: 999px; border: 0; background: linear-gradient(90deg, rgba(0, 174, 239, .04), rgba(125, 206, 255, .75), rgba(0, 174, 239, .04)); box-shadow: 0 0 12px rgba(0, 174, 239, .35); }
body.sg-games-body[data-v2-mode-theme="dark"] .sg-games-geo-line-a { width: 180px; top: 22%; left: 22%; --sgg-geo-rot: 26deg; animation: sggGeoFloat 10s ease-in-out infinite; }
body.sg-games-body[data-v2-mode-theme="dark"] .sg-games-geo-line-b { width: 140px; bottom: 20%; right: 28%; --sgg-geo-rot: -20deg; animation: sggGeoFloat 12s ease-in-out infinite reverse; }

@media (prefers-reduced-motion: reduce) {
    body.sg-games-body[data-v2-mode-theme="dark"] .sg-games-background-scene * { animation: none !important; }
}

/* ---- topbar: the shared default skin is light, so repaint it for the dark page ---- */
body.sg-games-body.has-site-topbar-v2 {
    --sgv2-topbar-bg: rgba(7, 18, 37, .78);
    --sgv2-topbar-text: #f7fbff;
    --sgv2-topbar-muted: #bfd0e7;
    --sgv2-topbar-border: rgba(170, 205, 255, .14);
}

body.sg-games-body.has-site-topbar-v2 .sgv2-topbar {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .02)),
        rgba(7, 18, 37, .82);
    border-bottom-color: rgba(170, 205, 255, .14);
    box-shadow: 0 16px 34px rgba(0, 0, 0, .18);
}

body.sg-games-body.has-site-topbar-v2 .sgv2-topbar :where(.sgv2-brand, .sgv2-brand-name, .sgv2-topbar-btn, .sgv2-account-btn, .sgv2-menu-btn) {
    color: #f7fbff;
}

body.sg-games-body.has-site-topbar-v2 .sgv2-topbar :where(.sgv2-nav a, .sgv2-brand-tagline, .sgv2-account-plan) {
    color: #bfd0e7;
}

body.sg-games-body.has-site-topbar-v2 .sgv2-topbar :where(.sgv2-topbar-btn:not(.sgv2-topbar-btn-primary), .sgv2-plan-badge, .sgv2-mobile-cta, .sgv2-menu-btn) {
    border-color: rgba(170, 205, 255, .18);
    background: rgba(255, 255, 255, .07);
}

/* ---- shell + hero ---- */
.sg-games-shell {
    width: min(1440px, calc(100% - 48px));
    margin: 0 auto;
    padding: 26px 0 64px;
}

.sg-games-back {
    display: inline-block;
    margin-bottom: 14px;
    color: var(--sgg-accent);
    font-weight: 800;
    font-size: .92rem;
    text-decoration: none;
}

.sg-games-back:hover {
    text-decoration: underline;
}

.sg-games-hero {
    margin-bottom: 30px;
}

.sg-games-kicker {
    margin: 0 0 8px;
    color: var(--sgg-mint);
    font-family: "Plus Jakarta Sans", system-ui, sans-serif;
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.sg-games-hero h1 {
    margin: 0 0 10px;
    font-size: clamp(1.9rem, 3.1vw, 3rem);
    line-height: 1.1;
    font-weight: 800;
}

.sg-games-hero p:not(.sg-games-kicker) {
    margin: 0;
    max-width: 62ch;
    color: var(--sgg-muted);
    font-size: 1.02rem;
    line-height: 1.6;
}

.sg-games-grade-note {
    max-width: 780px;
    margin: 14px 0 0;
    padding: 10px 14px;
    border: 1px solid rgba(251, 191, 36, .45);
    border-radius: 12px;
    background: rgba(251, 191, 36, .1);
    color: #fef3c7;
    font-size: .9rem;
    font-weight: 700;
    line-height: 1.5;
}

.sg-games-count {
    display: inline-flex;
    align-items: center;
    margin-top: 16px;
    padding: 7px 14px;
    border: 1px solid var(--sgg-line);
    border-radius: 999px;
    background: var(--sgg-card-soft);
    color: var(--sgg-muted);
    font-size: .86rem;
    font-weight: 700;
}

/* ---- gallery layout: sidebar + grid ---- */
.sg-games-layout {
    display: grid;
    grid-template-columns: clamp(240px, 18vw, 280px) minmax(0, 1fr);
    gap: clamp(22px, 2.25vw, 34px);
    align-items: start;
}

.sg-games-filter-toggle {
    display: none;
    padding: 11px 18px;
    border: 1px solid var(--sgg-line);
    border-radius: 12px;
    background: var(--sgg-card-soft);
    color: var(--sgg-ink);
    font-family: inherit;
    font-size: .94rem;
    font-weight: 800;
    cursor: pointer;
}

.sg-games-sidebar {
    position: sticky;
    top: calc(var(--sheetgenie-topbar-offset, 82px) + 16px);
    max-height: calc(100dvh - var(--sheetgenie-topbar-offset, 82px) - 32px);
    display: flex;
    flex-direction: column;
    gap: 22px;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 20px 16px;
    border: 1px solid var(--sgg-line);
    border-radius: var(--sgg-radius);
    background: var(--sgg-card);
    box-shadow: var(--sgg-shadow);
    scrollbar-color: var(--sgg-line-strong) transparent;
    scrollbar-width: thin;
}

.sg-games-sidebar::-webkit-scrollbar {
    width: 8px;
}

.sg-games-sidebar::-webkit-scrollbar-thumb {
    border: 2px solid transparent;
    border-radius: 999px;
    background: var(--sgg-line-strong);
    background-clip: padding-box;
}

.sg-games-facet__title {
    margin: 0 0 10px;
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--sgg-subtle);
}

.sg-games-facet__options {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.sg-games-facet__option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: 40px;
    padding: 8px 11px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--sgg-muted);
    font-family: inherit;
    font-size: .92rem;
    font-weight: 700;
    text-align: left;
    cursor: pointer;
    transition: background .18s ease, color .18s ease, transform .18s ease;
}

.sg-games-facet__option:hover {
    background: var(--sgg-card-soft);
    color: var(--sgg-ink);
}

.sg-games-facet__option:active {
    transform: scale(.98);
}

.sg-games-facet__option.is-selected {
    background: rgba(56, 189, 248, .18);
    color: var(--sgg-ink);
}

.sg-games-facet__count {
    flex: 0 0 auto;
    min-width: 22px;
    padding: 1px 7px;
    border-radius: 999px;
    background: var(--sgg-card-soft);
    color: var(--sgg-subtle);
    font-size: .76rem;
    font-weight: 800;
    text-align: center;
}

.sg-games-facet__option.is-unavailable {
    opacity: .5;
    cursor: not-allowed;
}

.sg-games-facet__option.is-unavailable:hover {
    background: transparent;
    color: var(--sgg-muted);
}

.sg-games-facet__soon {
    flex: 0 0 auto;
    padding: 1px 8px;
    border: 1px dashed var(--sgg-line-strong);
    border-radius: 999px;
    color: var(--sgg-subtle);
    font-size: .68rem;
    font-weight: 800;
    white-space: nowrap;
}

.sg-games-facet__option.is-selected .sg-games-facet__count {
    background: rgba(255, 255, 255, .16);
    color: var(--sgg-ink);
}

.sg-games-clear {
    min-height: 44px;
    padding: 10px 14px;
    border: 1px solid var(--sgg-line);
    border-radius: 12px;
    background: transparent;
    color: var(--sgg-muted);
    font-family: inherit;
    font-size: .88rem;
    font-weight: 800;
    cursor: pointer;
}

.sg-games-clear:hover {
    border-color: var(--sgg-line-strong);
    color: var(--sgg-ink);
}

/* ---- toolbar ---- */
.sg-games-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 20px;
}

.sg-games-search {
    flex: 1 1 280px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.sg-games-search label {
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--sgg-subtle);
}

.sg-games-search input {
    width: 100%;
    min-height: 46px;
    padding: 11px 14px;
    border: 1px solid var(--sgg-line);
    border-radius: 13px;
    background: var(--sgg-card-soft);
    color: var(--sgg-ink);
    font-family: inherit;
    font-size: .96rem;
}

.sg-games-more {
    display: flex;
    justify-content: center;
    margin-top: 22px;
}

/* ---- gallery grid ---- */
.sg-games-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 22px;
}

.sg-game-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--sgg-line);
    border-radius: var(--sgg-radius);
    background: var(--sgg-card);
    box-shadow: var(--sgg-shadow);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.sg-game-card:hover {
    transform: translateY(-3px);
    border-color: var(--sgg-line-strong);
    box-shadow: var(--sgg-shadow-lift);
}

.sg-game-card:focus-within {
    border-color: var(--sgg-line-strong);
    box-shadow: var(--sgg-shadow-lift);
}

/* ---- media: the picture slot ---- */
.sg-game-card__media {
    position: relative;
    aspect-ratio: 16 / 10;
    background: var(--sgg-card-soft);
}

.sg-game-card__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sg-game-card__slot {
    position: absolute;
    inset: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border: 1.5px dashed var(--sgg-line-strong);
    border-radius: 14px;
    text-align: center;
}

.sg-game-card__slot-label {
    color: var(--sgg-subtle);
    font-size: .84rem;
    font-weight: 800;
}

.sg-game-card__slot-path {
    max-width: 90%;
    overflow: hidden;
    padding: 3px 8px;
    border-radius: 7px;
    background: var(--sgg-card-soft);
    color: var(--sgg-subtle);
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    font-size: .7rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sg-game-card__plan {
    position: absolute;
    left: 12px;
    bottom: 12px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}

.sg-game-card__plan--free {
    background: rgba(142, 243, 210, .2);
    color: var(--sgg-mint);
}

.sg-game-card__plan--pro,
.sg-game-card__plan--premium {
    background: rgba(251, 191, 36, .2);
    color: var(--sgg-amber);
}

.sg-game-card__ribbon {
    position: absolute;
    right: 12px;
    top: 12px;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(15, 23, 42, .68);
    color: #e2e8f0;
    font-size: .72rem;
    font-weight: 800;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}

/* ---- body ---- */
.sg-game-card__body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 8px;
    padding: 18px;
}

.sg-game-card__eyebrow {
    margin: 0;
    color: var(--sgg-accent);
    font-size: .74rem;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.sg-game-card__title {
    margin: 0;
    font-size: 1.14rem;
    font-weight: 800;
    line-height: 1.3;
}

.sg-game-card__desc {
    margin: 0;
    color: var(--sgg-muted);
    font-size: .9rem;
    line-height: 1.55;
}

.sg-game-card__grades {
    display: grid;
    gap: 5px;
}

.sg-game-card__grades-label {
    color: var(--sgg-subtle);
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .035em;
}

.sg-game-card__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.sg-game-card__learning {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    margin: 2px 0 0;
}

.sg-game-card__learning div {
    min-width: 0;
    padding: 7px 8px;
    border: 1px solid var(--sgg-line);
    border-radius: 10px;
    background: var(--sgg-card-soft);
}

.sg-game-card__learning dt {
    color: var(--sgg-subtle);
    font-size: .64rem;
    font-weight: 800;
    letter-spacing: .035em;
    text-transform: uppercase;
}

.sg-game-card__learning dd {
    margin: 3px 0 0;
    color: var(--sgg-ink);
    font-size: .74rem;
    font-weight: 800;
    line-height: 1.28;
}

.sg-game-card__tag {
    padding: 3px 9px;
    border: 1px solid var(--sgg-line);
    border-radius: 999px;
    color: var(--sgg-subtle);
    font-size: .74rem;
    font-weight: 700;
}

.sg-game-card__lock {
    margin: 0;
    color: var(--sgg-amber);
    font-size: .84rem;
    font-weight: 700;
}

.sg-game-card__action {
    display: block;
    margin-top: auto;
    padding: 11px 18px;
    border-radius: 13px;
    background: var(--sgg-cta);
    color: var(--sgg-cta-ink);
    font-weight: 800;
    text-align: center;
    text-decoration: none;
    transition: filter .18s ease, transform .18s ease;
}

.sg-game-card__action:hover {
    filter: brightness(1.07);
}

.sg-game-card__action:active {
    transform: scale(.985);
}

:where(.sg-games-filter-toggle, .sg-games-facet__option, .sg-games-clear, .sg-games-search input, .sg-game-card__action):focus-visible {
    outline: 3px solid var(--sgg-accent);
    outline-offset: 3px;
}

.sg-game-card.is-locked .sg-game-card__action {
    background: transparent;
    border: 1px solid var(--sgg-amber);
    color: var(--sgg-amber);
}

.sg-game-card.is-soon {
    opacity: .78;
}

.sg-game-card.is-soon:hover {
    transform: none;
}

.sg-game-card__action.is-static {
    background: transparent;
    border: 1px dashed var(--sgg-line-strong);
    color: var(--sgg-subtle);
    cursor: default;
}

.sg-game-empty,
.sg-game-notice {
    margin: 0;
    padding: 28px;
    border: 1px dashed var(--sgg-line);
    border-radius: var(--sgg-radius);
    color: var(--sgg-muted);
    text-align: center;
}

/* ---- game stage: setup ---- */
.sg-game-stage {
    max-width: 760px;
    margin: 0 auto;
}

.sg-game-setup,
.sg-game-play,
.sg-game-result {
    padding: 26px;
    border: 1px solid var(--sgg-line);
    border-radius: var(--sgg-radius);
    background: var(--sgg-card);
    box-shadow: var(--sgg-shadow);
}

.sg-game-setup__title {
    margin: 0 0 12px;
    font-size: 1.02rem;
    font-weight: 800;
}

.sg-game-choices {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.sg-game-choice {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 18px;
    border: 1px solid var(--sgg-line);
    border-radius: 14px;
    background: var(--sgg-card-soft);
    color: var(--sgg-ink);
    font-family: inherit;
    font-size: .96rem;
    font-weight: 700;
    cursor: pointer;
    transition: border-color .16s ease, background .16s ease;
}

.sg-game-choice:hover:not(:disabled) {
    border-color: var(--sgg-line-strong);
}

.sg-game-choice.is-selected {
    border-color: var(--sgg-accent);
    background: rgba(56, 189, 248, .18);
    color: #eaf8ff;
}

.sg-game-choice:disabled {
    cursor: not-allowed;
    opacity: .58;
}

.sg-game-choice__tag {
    padding: 3px 8px;
    border-radius: 999px;
    background: rgba(251, 191, 36, .18);
    color: var(--sgg-amber);
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.sg-game-setup__hint {
    margin: 12px 0 0;
    color: var(--sgg-muted);
    font-size: .88rem;
}

.sg-game-setup__hint a {
    color: var(--sgg-amber);
    font-weight: 800;
}

.sg-game-setup__field {
    display: block;
    margin: 22px 0 8px;
    font-size: 1.02rem;
    font-weight: 800;
}

.sg-game-select {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--sgg-line);
    border-radius: 14px;
    background: var(--sgg-card-soft);
    color: var(--sgg-ink);
    font-family: inherit;
    font-size: .96rem;
    font-weight: 600;
}

.sg-game-select option {
    color: #10233f;
    background: #ffffff;
}

.sg-game-primary,
.sg-game-secondary {
    padding: 13px 22px;
    border-radius: 14px;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 800;
    cursor: pointer;
}

.sg-game-primary {
    width: 100%;
    margin-top: 22px;
    border: 0;
    background: var(--sgg-cta);
    color: var(--sgg-cta-ink);
}

.sg-game-primary:hover {
    filter: brightness(1.07);
}

.sg-game-secondary {
    border: 1px solid var(--sgg-line);
    background: transparent;
    color: var(--sgg-muted);
}

.sg-game-secondary:hover {
    border-color: var(--sgg-line-strong);
    color: var(--sgg-ink);
}

/* ---- game stage: playing ---- */
.sg-game-status {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 18px;
    color: var(--sgg-muted);
    font-size: .9rem;
    font-weight: 700;
}

.sg-game-status strong {
    color: var(--sgg-ink);
    font-size: 1.06rem;
}

.sg-game-progress {
    height: 6px;
    margin: 12px 0 20px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .1);
    overflow: hidden;
}

.sg-game-progress span {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--sgg-accent-2), var(--sgg-accent));
    transition: width .25s ease;
}

.sg-game-prompt {
    margin: 0 0 16px;
    font-size: 1.24rem;
    font-weight: 800;
    text-align: center;
}

.sg-game-board {
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
    gap: 10px;
    min-height: 220px;
    margin: 0 0 22px;
    padding: 18px;
    list-style: none;
    border: 1px solid var(--sgg-line);
    border-radius: 18px;
    background: rgba(255, 255, 255, .05);
}

.sg-game-board li {
    display: flex;
}

.sg-game-board img {
    width: clamp(46px, 8vw, 76px);
    height: clamp(46px, 8vw, 76px);
    object-fit: contain;
    user-select: none;
}

/* Bigger counts need smaller tiles so the card never scrolls. */
.sg-game-board--n11 img, .sg-game-board--n12 img, .sg-game-board--n13 img,
.sg-game-board--n14 img, .sg-game-board--n15 img, .sg-game-board--n16 img,
.sg-game-board--n17 img, .sg-game-board--n18 img, .sg-game-board--n19 img,
.sg-game-board--n20 img {
    width: clamp(38px, 5.6vw, 56px);
    height: clamp(38px, 5.6vw, 56px);
}

.sg-game-answers {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.sg-game-answer {
    padding: 16px 6px;
    border: 1px solid var(--sgg-line);
    border-radius: 16px;
    background: var(--sgg-card-soft);
    color: var(--sgg-ink);
    font-family: "Plus Jakarta Sans", system-ui, sans-serif;
    font-size: 1.5rem;
    font-weight: 800;
    cursor: pointer;
    transition: transform .12s ease, border-color .16s ease, background .16s ease;
}

.sg-game-answer:hover:not(:disabled) {
    transform: translateY(-2px);
    border-color: var(--sgg-accent);
}

.sg-game-answer:disabled {
    cursor: default;
}

.sg-game-answer.is-correct {
    border-color: var(--sgg-mint);
    background: rgba(142, 243, 210, .22);
    color: #eafff7;
}

.sg-game-answer.is-wrong {
    border-color: var(--sgg-danger);
    background: rgba(251, 113, 133, .2);
    color: #fff0f3;
}

.sg-game-feedback-slot {
    min-height: 30px;
    margin-top: 14px;
}

.sg-game-feedback {
    margin: 0;
    font-size: 1.02rem;
    font-weight: 800;
    text-align: center;
}

.sg-game-feedback.is-correct {
    color: var(--sgg-mint);
}

.sg-game-feedback.is-wrong {
    color: var(--sgg-danger);
}

.sg-game-play .sg-game-secondary {
    display: block;
    width: 100%;
    margin-top: 10px;
}

/* ---- game stage: result ---- */
.sg-game-result {
    text-align: center;
}

.sg-game-result__title {
    margin: 0 0 8px;
    font-size: 1.6rem;
    font-weight: 800;
}

.sg-game-result__score {
    margin: 0 0 6px;
    color: var(--sgg-accent);
    font-family: "Plus Jakarta Sans", system-ui, sans-serif;
    font-size: 1.7rem;
    font-weight: 800;
}

.sg-game-result__best {
    margin: 0 0 6px;
    color: var(--sgg-amber);
    font-weight: 800;
}

.sg-game-result__message {
    margin: 0 0 20px;
    color: var(--sgg-muted);
}

.sg-game-result__stats {
    display: flex;
    justify-content: center;
    gap: 34px;
    margin: 0 0 22px;
}

.sg-game-result__stats div {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.sg-game-result__stats dt {
    color: var(--sgg-subtle);
    font-size: .76rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.sg-game-result__stats dd {
    margin: 0;
    font-family: "Plus Jakarta Sans", system-ui, sans-serif;
    font-size: 1.3rem;
    font-weight: 800;
}

.sg-game-result__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.sg-game-result__actions .sg-game-primary {
    flex: 1 1 200px;
    margin-top: 0;
}

.sg-game-result__actions .sg-game-secondary {
    flex: 1 1 160px;
}

/* ---- footer ---- */
.sg-games-footer {
    width: min(1180px, calc(100% - 40px));
    margin: 0 auto;
    padding: 22px 0 40px;
    border-top: 1px solid var(--sgg-line);
    color: var(--sgg-subtle);
    font-size: .86rem;
}

.sg-games-footer a {
    color: var(--sgg-accent);
    font-weight: 700;
    text-decoration: none;
}

@media (max-width: 900px) {
    .sg-games-layout {
        grid-template-columns: minmax(0, 1fr);
        gap: 16px;
    }

    .sg-games-filter-toggle {
        display: inline-flex;
        align-self: flex-start;
    }

    .sg-games-sidebar {
        position: static;
        max-height: none;
        display: none;
    }

    body.sg-games-filters-open .sg-games-sidebar {
        display: flex;
    }

    .sg-games-facet__options {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .sg-games-facet__option {
        border: 1px solid var(--sgg-line);
    }
}

@media (max-width: 720px) {
    .sg-games-shell {
        width: calc(100% - 28px);
        padding: 18px 0 48px;
    }

    .sg-game-setup,
    .sg-game-play,
    .sg-game-result {
        padding: 18px;
    }

    .sg-games-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 16px;
    }

    .sg-games-toolbar {
        align-items: stretch;
    }

    .sg-games-count {
        align-self: flex-start;
        margin-top: 0;
    }

    .sg-game-card__learning {
        grid-template-columns: 1fr;
    }

    .sg-game-board {
        min-height: 170px;
        padding: 12px;
        gap: 8px;
    }

    .sg-game-answers {
        gap: 8px;
    }

    .sg-game-answer {
        padding: 14px 4px;
        font-size: 1.3rem;
    }

    .sg-game-result__stats {
        gap: 22px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sg-game-card,
    .sg-game-answer,
    .sg-games-facet__option,
    .sg-game-card__action,
    .sg-game-progress span {
        transition: none;
    }
}

/* =====================================================================
   Blanket overrides.

   js/site-topbar-v2.js stamps html[data-index-v2-theme] at runtime, which
   switches on a site-wide skin in css/site-topbar-v2.css keyed on
   `html[data-index-v2-theme] body.has-site-topbar-v2:not(.index-v2-legacy)`
   — specificity (0,3,2), so it outranks the plain class rules above and
   repaints body, headings, paragraphs, links and form controls.

   Re-assert the games palette with a (0,4,2) prefix for the properties it
   claims. No !important needed: the shared skin does not use it here.
   ===================================================================== */

html[data-index-v2-theme] body.sg-games-body.has-site-topbar-v2 {
    color: var(--sgg-ink);
    background-color: #07152c;
    background-image:
        radial-gradient(circle at 12% 14%, rgba(56, 189, 248, .22), transparent 42%),
        radial-gradient(circle at 88% 12%, rgba(129, 140, 248, .18), transparent 42%),
        radial-gradient(circle at 86% 90%, rgba(45, 212, 191, .20), transparent 46%),
        radial-gradient(circle at 10% 88%, rgba(59, 130, 246, .20), transparent 44%),
        linear-gradient(140deg, #07152c 0%, #0b2143 48%, #0e2a4d 100%);
    background-attachment: fixed;
    font-family: "Sarabun", "Plus Jakarta Sans", system-ui, sans-serif;
}

html[data-index-v2-theme] body.sg-games-body.has-site-topbar-v2 .sg-games-kicker {
    color: var(--sgg-mint);
}

html[data-index-v2-theme] body.sg-games-body.has-site-topbar-v2 .sg-games-hero p:not(.sg-games-kicker) {
    color: var(--sgg-muted);
}

html[data-index-v2-theme] body.sg-games-body.has-site-topbar-v2 .sg-game-card__lock {
    color: var(--sgg-amber);
}

html[data-index-v2-theme] body.sg-games-body.has-site-topbar-v2 .sg-game-card__eyebrow {
    color: var(--sgg-accent);
}

html[data-index-v2-theme] body.sg-games-body.has-site-topbar-v2 .sg-game-card__desc {
    color: var(--sgg-muted);
}

html[data-index-v2-theme] body.sg-games-body.has-site-topbar-v2 .sg-game-card__title {
    color: var(--sgg-ink);
}

html[data-index-v2-theme] body.sg-games-body.has-site-topbar-v2 :where(.sg-games-facet__title, .sg-games-search label) {
    color: var(--sgg-subtle);
}

html[data-index-v2-theme] body.sg-games-body.has-site-topbar-v2 .sg-games-search input {
    border-color: var(--sgg-line);
    background: var(--sgg-card-soft);
    color: var(--sgg-ink);
}

html[data-index-v2-theme] body.sg-games-body.has-site-topbar-v2 .sg-game-feedback.is-correct {
    color: var(--sgg-mint);
}

html[data-index-v2-theme] body.sg-games-body.has-site-topbar-v2 .sg-game-feedback.is-wrong {
    color: var(--sgg-danger);
}

html[data-index-v2-theme] body.sg-games-body.has-site-topbar-v2 .sg-game-result__score {
    color: var(--sgg-accent);
}

html[data-index-v2-theme] body.sg-games-body.has-site-topbar-v2 .sg-game-result__best {
    color: var(--sgg-amber);
}

html[data-index-v2-theme] body.sg-games-body.has-site-topbar-v2 :where(.sg-games-back, .sg-games-footer a) {
    color: var(--sgg-accent);
}

html[data-index-v2-theme] body.sg-games-body.has-site-topbar-v2 .sg-game-setup__hint a {
    color: var(--sgg-amber);
}

html[data-index-v2-theme] body.sg-games-body.has-site-topbar-v2 .sg-game-card__action {
    color: var(--sgg-cta-ink);
    background: var(--sgg-cta);
}

html[data-index-v2-theme] body.sg-games-body.has-site-topbar-v2 .sg-game-card.is-locked .sg-game-card__action {
    background: transparent;
    color: var(--sgg-amber);
}

html[data-index-v2-theme] body.sg-games-body.has-site-topbar-v2 .sg-game-card__action.is-static {
    background: transparent;
    color: var(--sgg-subtle);
}

html[data-index-v2-theme] body.sg-games-body.has-site-topbar-v2 :where(.sg-quick-equation, .sg-race-equation) {
    color: var(--sgg-ink);
}

html[data-index-v2-theme] body.sg-games-body.has-site-topbar-v2 .sg-quick-result-tag {
    color: var(--sgg-muted);
}

html[data-index-v2-theme] body.sg-games-body.has-site-topbar-v2 .sg-quick-best {
    color: var(--sgg-muted);
}

html[data-index-v2-theme] body.sg-games-body.has-site-topbar-v2 .sg-quick-best strong {
    color: var(--sgg-accent);
}

html[data-index-v2-theme] body.sg-games-body.has-site-topbar-v2 .sg-quick-mode__hint {
    color: var(--sgg-muted);
}

html[data-index-v2-theme] body.sg-games-body.has-site-topbar-v2 .sg-game-select {
    border-color: var(--sgg-line);
    background: var(--sgg-card-soft);
    color: var(--sgg-ink);
}

/* =====================================================================
   Quick math game (game-arithmetic.html).
   Reuses the shared .sg-game-setup / .sg-game-answer shell above and adds
   the arcade HUD: score row, clock or hearts, equation, hit/miss feedback.
   ===================================================================== */

.sg-game-setup__title--spaced {
    margin-top: 26px;
}

/* ---- lesson picker ---- */
.sg-quick-ops {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
    gap: 10px;
}

.sg-quick-op {
    flex-direction: column;
    gap: 4px;
    padding: 14px 8px;
    text-align: center;
}

.sg-quick-op__symbol {
    font-family: "Plus Jakarta Sans", system-ui, sans-serif;
    font-size: 1.6rem;
    font-weight: 800;
    line-height: 1;
    color: var(--sgg-accent);
}

.sg-quick-op.is-selected .sg-quick-op__symbol {
    color: inherit;
}

/* ---- mode picker ---- */
.sg-quick-modes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 10px;
}

.sg-quick-mode {
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
    padding: 14px 16px;
    text-align: left;
}

.sg-quick-mode__name {
    font-size: 1.02rem;
    font-weight: 800;
}

.sg-quick-mode__hint {
    color: var(--sgg-muted);
    font-size: .82rem;
    font-weight: 600;
    line-height: 1.45;
}

.sg-quick-best {
    margin: 20px 0 0;
    color: var(--sgg-muted);
    font-size: .92rem;
    text-align: center;
}

.sg-quick-best strong {
    color: var(--sgg-accent);
    font-family: "Plus Jakarta Sans", system-ui, sans-serif;
    font-size: 1.1rem;
}

/* ---- in-game HUD ---- */
.sg-quick-hud {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 14px;
}

.sg-quick-hud__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 9px 6px;
    border-radius: 13px;
    background: var(--sgg-card-soft);
}

.sg-quick-hud__item small {
    color: var(--sgg-subtle);
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.sg-quick-hud__item strong {
    font-family: "Plus Jakarta Sans", system-ui, sans-serif;
    font-size: 1.24rem;
    font-weight: 800;
}

.sg-quick-hud__item strong.is-hot {
    color: var(--sgg-amber);
}

/* ---- clock / hearts ---- */
.sg-quick-clock {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
}

.sg-quick-clock__label {
    color: var(--sgg-subtle);
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.sg-quick-clock__track {
    flex: 1 1 auto;
    height: 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .12);
    overflow: hidden;
}

.sg-quick-clock__bar {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--sgg-accent-2), var(--sgg-accent));
}

.sg-quick-clock__bar.is-urgent {
    background: linear-gradient(90deg, #f97316, var(--sgg-danger));
}

.sg-quick-clock__value {
    min-width: 30px;
    font-family: "Plus Jakarta Sans", system-ui, sans-serif;
    font-size: 1.06rem;
    font-weight: 800;
    text-align: right;
}

.sg-quick-hearts {
    display: inline-flex;
    gap: 3px;
    font-size: 1.15rem;
    line-height: 1;
}

.sg-quick-heart {
    color: var(--sgg-danger);
}

.sg-quick-heart.is-lost {
    color: var(--sgg-line);
}

/* ---- equation ---- */
.sg-quick-equation {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(8px, 2vw, 16px);
    margin: 0 0 22px;
    padding: 26px 14px;
    border: 1px solid var(--sgg-line);
    border-radius: 20px;
    background: rgba(255, 255, 255, .05);
    font-family: "Plus Jakarta Sans", system-ui, sans-serif;
    font-size: clamp(2.1rem, 7vw, 3.4rem);
    font-weight: 800;
    line-height: 1;
}

.sg-quick-equation__op,
.sg-quick-equation__eq {
    color: var(--sgg-accent);
}

.sg-quick-equation__blank {
    min-width: 1.2em;
    color: var(--sgg-amber);
    text-align: center;
}

.sg-quick-combo-pop {
    display: inline-block;
    margin-left: 6px;
    padding: 2px 9px;
    border-radius: 999px;
    background: rgba(251, 191, 36, .18);
    color: var(--sgg-amber);
    font-size: .82rem;
    font-weight: 800;
}

.sg-quick-result-tag {
    margin: 0 0 10px;
    color: var(--sgg-muted);
    font-size: .92rem;
    font-weight: 700;
}

/* ---- hit / miss feedback ---- */
@keyframes sgQuickHit {
    0% { transform: scale(1); }
    40% { transform: scale(1.015); }
    100% { transform: scale(1); }
}

@keyframes sgQuickMiss {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-7px); }
    45% { transform: translateX(6px); }
    70% { transform: translateX(-3px); }
}

.sg-game-stage.is-hit .sg-quick-equation {
    animation: sgQuickHit .34s ease;
    border-color: var(--sgg-mint);
}

.sg-game-stage.is-miss .sg-quick-equation {
    animation: sgQuickMiss .34s ease;
    border-color: var(--sgg-danger);
}

@media (max-width: 720px) {
    .sg-quick-equation {
        padding: 20px 10px;
    }

    .sg-quick-hud__item strong {
        font-size: 1.08rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sg-game-stage.is-hit .sg-quick-equation,
    .sg-game-stage.is-miss .sg-quick-equation {
        animation: none;
    }
}

/* =====================================================================
   Math racing (game-racing.html).
   The canvas IS the game — menu, race and results are all drawn inside it so
   the whole thing can go on a classroom projector with no page chrome.
   ===================================================================== */

.sg-games-shell--race {
    width: min(1180px, calc(100% - 28px));
}

.sg-race-shell {
    border-radius: var(--sgg-radius);
    overflow: hidden;
    background: #07152c;
    box-shadow: var(--sgg-shadow);
}

.sg-race-canvas {
    display: block;
    width: 100%;
    aspect-ratio: 1000 / 640;
    background: #07152c;
    touch-action: manipulation;
    cursor: pointer;
    outline: none;
}

/* Fallback for browsers that refuse the Fullscreen API: fill the viewport with
   plain CSS so the expand button always works, including inside embedded panes. */
.sg-race-shell.is-maximized {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0;
    background: #050f20;
}

.sg-race-shell.is-maximized .sg-race-canvas {
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
}

/* In fullscreen the shell fills the screen and the canvas is centred in it. */
.sg-race-shell:fullscreen {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0;
    background: #050f20;
}

/* Safari only understands the prefixed pseudo-class. Kept as its own rule: a
   selector list containing an unknown selector is dropped whole by the parser,
   which would take the standard rule down with it. */
.sg-race-shell:-webkit-full-screen {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0;
    background: #050f20;
}

.sg-race-shell:fullscreen .sg-race-canvas {
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
}

.sg-race-shell:-webkit-full-screen .sg-race-canvas {
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
}

@media (max-width: 720px) {
    .sg-games-shell--race {
        width: calc(100% - 16px);
    }
}

/* =====================================================================
   Thai spelling (game-thai-spelling.html).
   Rides on the shared .sg-game-* setup/board/answer shell — only the lesson
   picker, the single hero picture and the masked word are specific here.
   ===================================================================== */

.sg-spell-lessons {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(216px, 1fr));
}

.sg-spell-lesson {
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
    padding: 14px 16px;
    text-align: left;
}

.sg-spell-lesson__name {
    font-size: 1.02rem;
    font-weight: 800;
}

.sg-spell-lesson__hint {
    color: var(--sgg-muted);
    font-size: .82rem;
    font-weight: 600;
    line-height: 1.45;
}

.sg-spell-lesson.is-selected .sg-spell-lesson__hint {
    color: inherit;
}

/* One hero picture rather than a counted row, so it reads from across a desk. */
.sg-game-board--single {
    min-height: 0;
    margin-bottom: 16px;
    padding: 14px;
}

.sg-game-board--single img {
    width: clamp(128px, 30vw, 200px);
    height: clamp(128px, 30vw, 200px);
}

.sg-spell-word {
    margin: 0 0 18px;
    font-size: clamp(2rem, 7.5vw, 2.9rem);
    font-weight: 800;
    line-height: 1.6;
    text-align: center;
}

/* site-topbar-v2.css paints every <p> with --sg-theme-muted at (0,3,2). The word
   the child is reading has to stay full-strength ink, so out-specify it. */
html[data-index-v2-theme] body.sg-games-body.has-site-topbar-v2 .sg-spell-word {
    color: var(--sgg-ink);
}

.sg-spell-word__blank {
    color: var(--sgg-amber);
}

html[data-index-v2-theme] body.sg-games-body.has-site-topbar-v2 .sg-spell-word__blank {
    color: var(--sgg-amber);
}

/* Whole words and class names need room that four columns cannot give. */
.sg-game-answers--wide {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.sg-spell-answer {
    padding: 14px 10px;
    font-family: "Sarabun", "Plus Jakarta Sans", system-ui, sans-serif;
    font-size: 1.3rem;
    line-height: 1.6;
}

.sg-game-stage.is-hit .sg-game-board--single {
    animation: sgQuickHit .34s ease;
    border-color: var(--sgg-mint);
}

.sg-game-stage.is-miss .sg-game-board--single {
    animation: sgQuickMiss .34s ease;
    border-color: var(--sgg-danger);
}

@media (prefers-reduced-motion: reduce) {
    .sg-game-stage.is-hit .sg-game-board--single,
    .sg-game-stage.is-miss .sg-game-board--single {
        animation: none;
    }
}

/* ---- plan / daily-round gate (markup from js/games/round-guard.js) ----
   Above the fixed topbar (1200) and the maximized race shell (9999), because a
   gate the player can scroll past or play behind is not a gate. */
.sg-game-plan-gate {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: grid;
    place-items: center;
    padding: 24px;
    background: rgba(4, 12, 26, .74);
    backdrop-filter: blur(4px);
}

.sg-game-plan-gate__panel {
    width: min(440px, 100%);
    padding: 28px;
    border: 1px solid var(--sgg-line);
    border-radius: var(--sgg-radius);
    background: var(--sgg-card);
    box-shadow: var(--sgg-shadow-lift);
    text-align: center;
}

.sg-game-plan-gate__panel h2 {
    margin: 0 0 10px;
    color: var(--sgg-ink);
    font-size: 1.16rem;
    font-weight: 800;
}

.sg-game-plan-gate__panel p {
    margin: 0 0 20px;
    color: var(--sgg-muted);
    font-size: .94rem;
    line-height: 1.7;
}

.sg-game-plan-gate__actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.sg-game-plan-gate__cta {
    padding: 12px 18px;
    border-radius: 13px;
    background: var(--sgg-cta);
    color: var(--sgg-cta-ink);
    font-weight: 800;
    text-decoration: none;
}

.sg-game-plan-gate__cta:hover {
    filter: brightness(1.07);
}

/* The shared dark skin paints every <a> accent-blue at (0,3,2). The CTA sits on
   a blue gradient and the back link belongs with the body copy, so both answer
   it from (0,4,2). */
html[data-index-v2-theme] body.sg-games-body.has-site-topbar-v2 .sg-game-plan-gate__cta {
    color: var(--sgg-cta-ink);
}

html[data-index-v2-theme] body.sg-games-body.has-site-topbar-v2 .sg-game-plan-gate__back {
    color: var(--sgg-muted);
}

.sg-game-plan-gate__back {
    color: var(--sgg-muted);
    font-size: .9rem;
    font-weight: 700;
    text-decoration: none;
}

.sg-game-plan-gate__back:hover {
    color: var(--sgg-ink);
}

body.sg-game-is-gated {
    overflow: hidden;
}

/* Honour the hub pagination hidden state after the final page. */
.sg-games-more[hidden] { display: none; }