/* =====================================================================
   games-light.css — bespoke LIGHT theme for the SheetGenie Games pages.

   SAFETY: every selector is gated behind [data-v2-mode-theme="light"], so
   the dark look in css/games.css stays byte-identical. Linked only on
   games.html and game-counting.html, after games.css.

   SPECIFICITY: js/site-topbar-v2.js injects a light "blanket" at
   `html[data-index-v2-theme] body.has-site-topbar-v2[data-v2-mode-theme="light"]`
   — (0,3,2) with !important and -webkit-text-fill-color on body, headings,
   paragraphs and form controls. It is appended to <head> after these links,
   so order cannot win it: every rule below carries a (0,5,2) prefix, and
   !important wherever the blanket uses it.
   ===================================================================== */

html[lang][data-index-v2-theme] body.sg-games-body.has-site-topbar-v2[data-v2-mode-theme="light"] {
    --sgg-ink: #133a52;
    --sgg-muted: #5b6b7a;
    --sgg-subtle: #7b8a99;
    --sgg-line: rgba(70, 120, 150, .16);
    --sgg-line-strong: rgba(14, 165, 233, .48);
    --sgg-card: #ffffff;
    --sgg-card-soft: rgba(14, 165, 233, .07);
    --sgg-accent: #0284c7;
    --sgg-accent-2: #0ea5e9;
    --sgg-mint: #0f7a5f;
    --sgg-amber: #a15c07;
    --sgg-danger: #c81e1e;
    --sgg-cta: linear-gradient(135deg, #0369a1, #0284c7);
    --sgg-cta-ink: #ffffff;
    --sgg-shadow: 0 16px 40px rgba(60, 110, 140, .13);
    --sgg-shadow-lift: 0 26px 56px rgba(60, 110, 140, .18);

    color: var(--sgg-ink) !important;
    background-color: #f6fbff !important;
    background-image:
        radial-gradient(circle at 9% 12%, rgba(56, 189, 248, .20), transparent 34%),
        radial-gradient(circle at 92% 14%, rgba(251, 146, 160, .16), transparent 32%),
        radial-gradient(circle at 80% 88%, rgba(110, 231, 183, .18), transparent 36%),
        radial-gradient(circle at 16% 92%, rgba(167, 139, 250, .14), transparent 34%),
        linear-gradient(140deg, #f6fbff 0%, #fff6f2 48%, #f1fdf7 100%) !important;
    background-attachment: fixed !important;
}

/* ---- shared Mode Studio background scene ----
   The markup is mounted once by js/games/catalog.js for the hub and every
   game page.  These values intentionally mirror modes-studio-light.css. */
html[lang][data-index-v2-theme] body.sg-games-body.has-site-topbar-v2[data-v2-mode-theme="light"] .sg-games-background-scene {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}

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

html[lang][data-index-v2-theme] body.sg-games-body.has-site-topbar-v2[data-v2-mode-theme="light"] .sg-games-background-scene :where(.sg-games-blob, .sg-games-curve, .sg-games-geo) {
    position: absolute;
    pointer-events: none;
}

html[lang][data-index-v2-theme] body.sg-games-body.has-site-topbar-v2[data-v2-mode-theme="light"] .sg-games-blob {
    border-radius: 50%;
    filter: blur(80px);
    opacity: .30;
    mix-blend-mode: multiply;
}

html[lang][data-index-v2-theme] body.sg-games-body.has-site-topbar-v2[data-v2-mode-theme="light"] .sg-games-blob-a { width: 260px; height: 260px; left: 8%; top: 6%; background: #38bdf8; }
html[lang][data-index-v2-theme] body.sg-games-body.has-site-topbar-v2[data-v2-mode-theme="light"] .sg-games-blob-b { width: 320px; height: 320px; right: 10%; bottom: 6%; background: #34d399; animation: sggBlobDrift 14s ease-in-out infinite; }
html[lang][data-index-v2-theme] body.sg-games-body.has-site-topbar-v2[data-v2-mode-theme="light"] .sg-games-blob-c { width: 190px; height: 190px; left: 52%; top: 50%; background: #fb9da0; animation: sggBlobDrift 16s ease-in-out infinite reverse; }
html[lang][data-index-v2-theme] body.sg-games-body.has-site-topbar-v2[data-v2-mode-theme="light"] .sg-games-curve { border-radius: 999px; border: 1px solid rgba(56, 189, 248, .32); opacity: .85; }
html[lang][data-index-v2-theme] body.sg-games-body.has-site-topbar-v2[data-v2-mode-theme="light"] .sg-games-curve-a { width: 720px; height: 720px; left: -320px; top: 120px; transform: rotate(-20deg); }
html[lang][data-index-v2-theme] body.sg-games-body.has-site-topbar-v2[data-v2-mode-theme="light"] .sg-games-curve-b { width: 900px; height: 540px; right: -420px; top: 240px; transform: rotate(8deg); }
html[lang][data-index-v2-theme] body.sg-games-body.has-site-topbar-v2[data-v2-mode-theme="light"] .sg-games-geo { opacity: .85; }
html[lang][data-index-v2-theme] body.sg-games-body.has-site-topbar-v2[data-v2-mode-theme="light"] .sg-games-geo-ring { border-radius: 50%; border: 1px solid rgba(14, 165, 233, .45); }
html[lang][data-index-v2-theme] body.sg-games-body.has-site-topbar-v2[data-v2-mode-theme="light"] .sg-games-geo-ring-a { width: 120px; height: 120px; top: 16%; left: 54%; --sgg-geo-rot: 0deg; animation: sggGeoFloat 12s ease-in-out infinite; }
html[lang][data-index-v2-theme] body.sg-games-body.has-site-topbar-v2[data-v2-mode-theme="light"] .sg-games-geo-ring-b { width: 80px; height: 80px; bottom: 18%; left: 12%; --sgg-geo-rot: 0deg; animation: sggGeoPulse 9s ease-in-out infinite; }
html[lang][data-index-v2-theme] body.sg-games-body.has-site-topbar-v2[data-v2-mode-theme="light"] .sg-games-geo-square { border-radius: 14px; border: 1px solid rgba(167, 139, 250, .5); }
html[lang][data-index-v2-theme] body.sg-games-body.has-site-topbar-v2[data-v2-mode-theme="light"] .sg-games-geo-square-a { width: 72px; height: 72px; top: 30%; right: 34%; --sgg-geo-rot: 16deg; animation: sggGeoSpinA 13s linear infinite; }
html[lang][data-index-v2-theme] body.sg-games-body.has-site-topbar-v2[data-v2-mode-theme="light"] .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; }
html[lang][data-index-v2-theme] body.sg-games-body.has-site-topbar-v2[data-v2-mode-theme="light"] .sg-games-geo-triangle { width: 0; height: 0; border-left: 18px solid transparent; border-right: 18px solid transparent; border-bottom: 30px solid rgba(251, 146, 160, .55); }
html[lang][data-index-v2-theme] body.sg-games-body.has-site-topbar-v2[data-v2-mode-theme="light"] .sg-games-geo-triangle-a { top: 18%; right: 16%; --sgg-geo-rot: 8deg; animation: sggGeoSpinB 14s linear infinite; }
html[lang][data-index-v2-theme] body.sg-games-body.has-site-topbar-v2[data-v2-mode-theme="light"] .sg-games-geo-triangle-b { bottom: 24%; left: 44%; --sgg-geo-rot: -14deg; animation: sggGeoPulse 10s ease-in-out infinite; }
html[lang][data-index-v2-theme] body.sg-games-body.has-site-topbar-v2[data-v2-mode-theme="light"] .sg-games-geo-line { height: 1px; border-radius: 999px; background: rgba(16, 185, 129, .5); }
html[lang][data-index-v2-theme] body.sg-games-body.has-site-topbar-v2[data-v2-mode-theme="light"] .sg-games-geo-line-a { width: 180px; top: 22%; left: 22%; --sgg-geo-rot: 26deg; animation: sggGeoFloat 10s ease-in-out infinite; }
html[lang][data-index-v2-theme] body.sg-games-body.has-site-topbar-v2[data-v2-mode-theme="light"] .sg-games-geo-line-b { width: 140px; bottom: 20%; right: 28%; --sgg-geo-rot: -20deg; animation: sggGeoFloat 12s ease-in-out infinite reverse; }

@keyframes sggBlobDrift { 0%, 100% { transform: translate3d(0, 0, 0); } 50% { transform: translate3d(16px, -18px, 0); } }
@keyframes sggGeoFloat { 0%, 100% { transform: translate3d(0, 0, 0) rotate(var(--sgg-geo-rot, 0deg)); } 50% { transform: translate3d(0, -12px, 0) rotate(var(--sgg-geo-rot, 0deg)); } }
@keyframes sggGeoSpinA { from { transform: rotate(16deg); } to { transform: rotate(376deg); } }
@keyframes sggGeoSpinB { from { transform: rotate(8deg); } to { transform: rotate(-352deg); } }
@keyframes sggGeoPulse { 0%, 100% { opacity: .5; } 50% { opacity: .85; } }

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

/* ---- topbar back to the pastel skin ---- */
html[lang][data-index-v2-theme] body.sg-games-body.has-site-topbar-v2[data-v2-mode-theme="light"] {
    --sgv2-topbar-bg:
        radial-gradient(720px 110px at 24% 0%, rgba(37, 99, 235, .12), transparent 72%),
        linear-gradient(180deg, rgba(255, 255, 255, .96), rgba(245, 249, 255, .92));
    --sgv2-topbar-text: #10233f;
    --sgv2-topbar-muted: #53657f;
    --sgv2-topbar-border: rgba(58, 89, 140, .16);
}

html[lang][data-index-v2-theme] body.sg-games-body.has-site-topbar-v2[data-v2-mode-theme="light"] .sgv2-topbar {
    background: var(--sgv2-topbar-bg) !important;
    border-bottom-color: var(--sgv2-topbar-border) !important;
    box-shadow: 0 14px 30px rgba(60, 110, 140, .10);
}

html[lang][data-index-v2-theme] body.sg-games-body.has-site-topbar-v2[data-v2-mode-theme="light"] .sgv2-topbar :where(.sgv2-brand, .sgv2-brand-name, .sgv2-topbar-btn, .sgv2-account-btn, .sgv2-menu-btn) {
    color: #10233f;
}

html[lang][data-index-v2-theme] body.sg-games-body.has-site-topbar-v2[data-v2-mode-theme="light"] .sgv2-topbar :where(.sgv2-nav a, .sgv2-brand-tagline, .sgv2-account-plan) {
    color: #53657f;
}

/* ---- surfaces: flat white cards with a soft pastel lift ---- */
html[lang][data-index-v2-theme] body.sg-games-body.has-site-topbar-v2[data-v2-mode-theme="light"] :where(.sg-game-card, .sg-games-sidebar, .sg-game-setup, .sg-game-play, .sg-game-result) {
    border-color: var(--sgg-line) !important;
    background: var(--sgg-card) !important;
    box-shadow: var(--sgg-shadow) !important;
}

html[lang][data-index-v2-theme] body.sg-games-body.has-site-topbar-v2[data-v2-mode-theme="light"] .sg-game-card:hover {
    box-shadow: var(--sgg-shadow-lift) !important;
}

/* ---- text the blanket repaints (it uses !important + -webkit-text-fill-color) ---- */
html[lang][data-index-v2-theme] body.sg-games-body.has-site-topbar-v2[data-v2-mode-theme="light"] :where(.sg-games-hero h1, .sg-game-card__title, .sg-games-facet__title, .sg-games-search label, .sg-game-result__title, .sg-game-setup__title, .sg-game-prompt, .sg-game-status strong) {
    color: var(--sgg-ink) !important;
    -webkit-text-fill-color: var(--sgg-ink) !important;
}

html[lang][data-index-v2-theme] body.sg-games-body.has-site-topbar-v2[data-v2-mode-theme="light"] :where(.sg-games-hero p:not(.sg-games-kicker), .sg-game-card__desc, .sg-game-card__eyebrow, .sg-game-result__message, .sg-game-setup__hint, .sg-game-empty, .sg-game-notice) {
    color: var(--sgg-muted) !important;
    -webkit-text-fill-color: var(--sgg-muted) !important;
}

html[lang][data-index-v2-theme] body.sg-games-body.has-site-topbar-v2[data-v2-mode-theme="light"] .sg-games-kicker {
    color: var(--sgg-mint) !important;
    -webkit-text-fill-color: var(--sgg-mint) !important;
}

html[lang][data-index-v2-theme] body.sg-games-body.has-site-topbar-v2[data-v2-mode-theme="light"] .sg-games-grade-note {
    border-color: rgba(180, 120, 10, .34);
    background: #fff7df;
    color: #734a00;
}

html[lang][data-index-v2-theme] body.sg-games-body.has-site-topbar-v2[data-v2-mode-theme="light"] .sg-game-card__learning dd {
    color: var(--sgg-ink);
    -webkit-text-fill-color: var(--sgg-ink);
}

html[lang][data-index-v2-theme] body.sg-games-body.has-site-topbar-v2[data-v2-mode-theme="light"] :where(.sg-game-card__lock, .sg-game-result__best) {
    color: var(--sgg-amber) !important;
    -webkit-text-fill-color: var(--sgg-amber) !important;
}

html[lang][data-index-v2-theme] body.sg-games-body.has-site-topbar-v2[data-v2-mode-theme="light"] .sg-game-feedback.is-correct {
    color: var(--sgg-mint) !important;
    -webkit-text-fill-color: var(--sgg-mint) !important;
}

html[lang][data-index-v2-theme] body.sg-games-body.has-site-topbar-v2[data-v2-mode-theme="light"] .sg-game-feedback.is-wrong {
    color: var(--sgg-danger) !important;
    -webkit-text-fill-color: var(--sgg-danger) !important;
}

html[lang][data-index-v2-theme] body.sg-games-body.has-site-topbar-v2[data-v2-mode-theme="light"] .sg-game-result__score {
    color: var(--sgg-accent) !important;
    -webkit-text-fill-color: var(--sgg-accent) !important;
}

html[lang][data-index-v2-theme] body.sg-games-body.has-site-topbar-v2[data-v2-mode-theme="light"] :where(.sg-games-back, .sg-games-footer a) {
    color: var(--sgg-accent) !important;
    -webkit-text-fill-color: var(--sgg-accent) !important;
}

html[lang][data-index-v2-theme] body.sg-games-body.has-site-topbar-v2[data-v2-mode-theme="light"] .sg-game-setup__hint a {
    color: var(--sgg-amber) !important;
    -webkit-text-fill-color: var(--sgg-amber) !important;
}

/* ---- chips, controls, board ---- */
html[lang][data-index-v2-theme] body.sg-games-body.has-site-topbar-v2[data-v2-mode-theme="light"] .sg-games-count {
    background: rgba(255, 255, 255, .8);
    color: var(--sgg-muted);
}

html[lang][data-index-v2-theme] body.sg-games-body.has-site-topbar-v2[data-v2-mode-theme="light"] .sg-game-card__icon {
    background: linear-gradient(150deg, rgba(56, 189, 248, .22), rgba(167, 139, 250, .18));
    color: #0284c7;
}

html[lang][data-index-v2-theme] body.sg-games-body.has-site-topbar-v2[data-v2-mode-theme="light"] .sg-game-card__plan--free {
    background: rgba(16, 185, 129, .14);
    color: var(--sgg-mint);
}

html[lang][data-index-v2-theme] body.sg-games-body.has-site-topbar-v2[data-v2-mode-theme="light"] :where(.sg-game-card__plan--pro, .sg-game-card__plan--premium) {
    background: rgba(245, 158, 11, .16);
    color: var(--sgg-amber);
}

html[lang][data-index-v2-theme] body.sg-games-body.has-site-topbar-v2[data-v2-mode-theme="light"] :where(.sg-game-card__action, .sg-game-primary) {
    background: var(--sgg-cta) !important;
    color: var(--sgg-cta-ink) !important;
    -webkit-text-fill-color: var(--sgg-cta-ink) !important;
}

html[lang][data-index-v2-theme] body.sg-games-body.has-site-topbar-v2[data-v2-mode-theme="light"] .sg-game-card.is-locked .sg-game-card__action {
    background: transparent !important;
    border-color: var(--sgg-amber) !important;
    color: var(--sgg-amber) !important;
    -webkit-text-fill-color: var(--sgg-amber) !important;
}

html[lang][data-index-v2-theme] body.sg-games-body.has-site-topbar-v2[data-v2-mode-theme="light"] :where(.sg-game-choice, .sg-game-select, .sg-game-answer) {
    border-color: var(--sgg-line) !important;
    background: #ffffff !important;
    color: var(--sgg-ink) !important;
    -webkit-text-fill-color: var(--sgg-ink) !important;
}

html[lang][data-index-v2-theme] body.sg-games-body.has-site-topbar-v2[data-v2-mode-theme="light"] .sg-game-choice.is-selected {
    border-color: #0ea5e9 !important;
    background: rgba(14, 165, 233, .12) !important;
    color: #0b4a6b !important;
    -webkit-text-fill-color: #0b4a6b !important;
}

html[lang][data-index-v2-theme] body.sg-games-body.has-site-topbar-v2[data-v2-mode-theme="light"] .sg-game-choice__tag {
    background: rgba(245, 158, 11, .18);
    color: var(--sgg-amber);
}

html[lang][data-index-v2-theme] body.sg-games-body.has-site-topbar-v2[data-v2-mode-theme="light"] .sg-game-secondary {
    border-color: var(--sgg-line);
    background: transparent;
    color: var(--sgg-muted);
}

html[lang][data-index-v2-theme] body.sg-games-body.has-site-topbar-v2[data-v2-mode-theme="light"] .sg-game-board {
    border-color: var(--sgg-line);
    background: linear-gradient(165deg, #fbfeff, #f1f9ff);
}

html[lang][data-index-v2-theme] body.sg-games-body.has-site-topbar-v2[data-v2-mode-theme="light"] .sg-game-progress {
    background: rgba(70, 120, 150, .14);
}

html[lang][data-index-v2-theme] body.sg-games-body.has-site-topbar-v2[data-v2-mode-theme="light"] .sg-game-answer.is-correct {
    border-color: #10b981 !important;
    background: rgba(16, 185, 129, .16) !important;
    color: #0b6b52 !important;
    -webkit-text-fill-color: #0b6b52 !important;
}

html[lang][data-index-v2-theme] body.sg-games-body.has-site-topbar-v2[data-v2-mode-theme="light"] .sg-game-answer.is-wrong {
    border-color: #ef4444 !important;
    background: rgba(239, 68, 68, .12) !important;
    color: #a01c1c !important;
    -webkit-text-fill-color: #a01c1c !important;
}

html[lang][data-index-v2-theme] body.sg-games-body.has-site-topbar-v2[data-v2-mode-theme="light"] :where(.sg-game-card__meta dd, .sg-game-result__stats dd) {
    color: var(--sgg-ink);
}

html[lang][data-index-v2-theme] body.sg-games-body.has-site-topbar-v2[data-v2-mode-theme="light"] :where(.sg-game-card__meta dt, .sg-game-result__stats dt) {
    color: var(--sgg-subtle);
}

html[lang][data-index-v2-theme] body.sg-games-body.has-site-topbar-v2[data-v2-mode-theme="light"] :where(.sg-game-empty, .sg-game-notice) {
    border-color: var(--sgg-line);
    background: rgba(255, 255, 255, .7);
}

html[lang][data-index-v2-theme] body.sg-games-body.has-site-topbar-v2[data-v2-mode-theme="light"] .sg-games-footer {
    border-top-color: var(--sgg-line);
}

/* ---- gallery: sidebar, search and picture slots ---- */
html[lang][data-index-v2-theme] body.sg-games-body.has-site-topbar-v2[data-v2-mode-theme="light"] :where(.sg-games-facet__title, .sg-games-search label) {
    color: var(--sgg-subtle) !important;
    -webkit-text-fill-color: var(--sgg-subtle) !important;
}

html[lang][data-index-v2-theme] body.sg-games-body.has-site-topbar-v2[data-v2-mode-theme="light"] .sg-game-card__eyebrow {
    color: var(--sgg-accent) !important;
    -webkit-text-fill-color: var(--sgg-accent) !important;
}

html[lang][data-index-v2-theme] body.sg-games-body.has-site-topbar-v2[data-v2-mode-theme="light"] :where(.sg-games-search input, .sg-games-facet__option, .sg-games-clear, .sg-games-filter-toggle) {
    border-color: var(--sgg-line) !important;
    background: #ffffff !important;
    color: var(--sgg-muted) !important;
    -webkit-text-fill-color: var(--sgg-muted) !important;
}

html[lang][data-index-v2-theme] body.sg-games-body.has-site-topbar-v2[data-v2-mode-theme="light"] .sg-games-facet__option.is-selected {
    background: rgba(14, 165, 233, .12) !important;
    color: #0b4a6b !important;
    -webkit-text-fill-color: #0b4a6b !important;
}

html[lang][data-index-v2-theme] body.sg-games-body.has-site-topbar-v2[data-v2-mode-theme="light"] .sg-games-sidebar {
    scrollbar-color: rgba(14, 165, 233, .42) transparent;
}

html[lang][data-index-v2-theme] body.sg-games-body.has-site-topbar-v2[data-v2-mode-theme="light"] .sg-games-sidebar::-webkit-scrollbar-thumb {
    background-color: rgba(14, 165, 233, .42);
}

html[lang][data-index-v2-theme] body.sg-games-body.has-site-topbar-v2[data-v2-mode-theme="light"] .sg-games-facet__count {
    background: rgba(70, 120, 150, .10);
    color: var(--sgg-subtle);
}

html[lang][data-index-v2-theme] body.sg-games-body.has-site-topbar-v2[data-v2-mode-theme="light"] .sg-games-facet__option.is-selected .sg-games-facet__count {
    background: rgba(255, 255, 255, .72);
    color: #0b4a6b;
}

html[lang][data-index-v2-theme] body.sg-games-body.has-site-topbar-v2[data-v2-mode-theme="light"] .sg-game-card__media {
    background: linear-gradient(165deg, #f7fcff, #eef7ff);
}

html[lang][data-index-v2-theme] body.sg-games-body.has-site-topbar-v2[data-v2-mode-theme="light"] .sg-game-card__slot {
    border-color: rgba(14, 165, 233, .34);
}

html[lang][data-index-v2-theme] body.sg-games-body.has-site-topbar-v2[data-v2-mode-theme="light"] :where(.sg-game-card__slot-label, .sg-game-card__slot-path, .sg-game-card__tag) {
    color: var(--sgg-subtle);
}

html[lang][data-index-v2-theme] body.sg-games-body.has-site-topbar-v2[data-v2-mode-theme="light"] .sg-game-card__slot-path {
    background: rgba(14, 165, 233, .09);
}

html[lang][data-index-v2-theme] body.sg-games-body.has-site-topbar-v2[data-v2-mode-theme="light"] .sg-game-card__ribbon {
    background: rgba(255, 255, 255, .88);
    color: #133a52;
}

html[lang][data-index-v2-theme] body.sg-games-body.has-site-topbar-v2[data-v2-mode-theme="light"] .sg-game-card__action.is-static {
    background: transparent !important;
    border-color: rgba(14, 165, 233, .34) !important;
    color: var(--sgg-subtle) !important;
    -webkit-text-fill-color: var(--sgg-subtle) !important;
}

html[lang][data-index-v2-theme] body.sg-games-body.has-site-topbar-v2[data-v2-mode-theme="light"] .sg-games-facet__option.is-unavailable {
    background: transparent !important;
    color: var(--sgg-subtle) !important;
    -webkit-text-fill-color: var(--sgg-subtle) !important;
}

html[lang][data-index-v2-theme] body.sg-games-body.has-site-topbar-v2[data-v2-mode-theme="light"] .sg-games-facet__soon {
    border-color: rgba(14, 165, 233, .32);
    color: var(--sgg-subtle);
}

/* ---- quick math game ---- */
html[lang][data-index-v2-theme] body.sg-games-body.has-site-topbar-v2[data-v2-mode-theme="light"] .sg-quick-mode__hint {
    color: var(--sgg-muted) !important;
    -webkit-text-fill-color: var(--sgg-muted) !important;
}

html[lang][data-index-v2-theme] body.sg-games-body.has-site-topbar-v2[data-v2-mode-theme="light"] :where(.sg-quick-best, .sg-quick-result-tag) {
    color: var(--sgg-muted) !important;
    -webkit-text-fill-color: var(--sgg-muted) !important;
}

html[lang][data-index-v2-theme] body.sg-games-body.has-site-topbar-v2[data-v2-mode-theme="light"] .sg-quick-best strong {
    color: var(--sgg-accent) !important;
    -webkit-text-fill-color: var(--sgg-accent) !important;
}

html[lang][data-index-v2-theme] body.sg-games-body.has-site-topbar-v2[data-v2-mode-theme="light"] .sg-quick-hud__item {
    background: rgba(14, 165, 233, .08);
}

html[lang][data-index-v2-theme] body.sg-games-body.has-site-topbar-v2[data-v2-mode-theme="light"] .sg-quick-hud__item small {
    color: var(--sgg-subtle);
}

html[lang][data-index-v2-theme] body.sg-games-body.has-site-topbar-v2[data-v2-mode-theme="light"] .sg-quick-hud__item strong.is-hot {
    color: var(--sgg-amber);
}

html[lang][data-index-v2-theme] body.sg-games-body.has-site-topbar-v2[data-v2-mode-theme="light"] .sg-quick-clock__track {
    background: rgba(70, 120, 150, .16);
}

html[lang][data-index-v2-theme] body.sg-games-body.has-site-topbar-v2[data-v2-mode-theme="light"] .sg-quick-heart.is-lost {
    color: rgba(70, 120, 150, .28);
}

html[lang][data-index-v2-theme] body.sg-games-body.has-site-topbar-v2[data-v2-mode-theme="light"] .sg-quick-equation {
    border-color: var(--sgg-line);
    background: linear-gradient(165deg, #fbfeff, #f1f9ff);
    color: var(--sgg-ink) !important;
    -webkit-text-fill-color: var(--sgg-ink) !important;
}

html[lang][data-index-v2-theme] body.sg-games-body.has-site-topbar-v2[data-v2-mode-theme="light"] :where(.sg-quick-equation__op, .sg-quick-equation__eq) {
    color: var(--sgg-accent);
}

html[lang][data-index-v2-theme] body.sg-games-body.has-site-topbar-v2[data-v2-mode-theme="light"] .sg-quick-equation__blank {
    color: var(--sgg-amber);
}

html[lang][data-index-v2-theme] body.sg-games-body.has-site-topbar-v2[data-v2-mode-theme="light"] .sg-quick-op__symbol {
    color: var(--sgg-accent);
}

html[lang][data-index-v2-theme] body.sg-games-body.has-site-topbar-v2[data-v2-mode-theme="light"] .sg-quick-combo-pop {
    background: rgba(245, 158, 11, .16);
    color: var(--sgg-amber);
}

/* ---- math racing ---- */
html[lang][data-index-v2-theme] body.sg-games-body.has-site-topbar-v2[data-v2-mode-theme="light"] .sg-race {
    border-color: var(--sgg-line) !important;
    background: var(--sgg-card) !important;
    box-shadow: var(--sgg-shadow) !important;
}

html[lang][data-index-v2-theme] body.sg-games-body.has-site-topbar-v2[data-v2-mode-theme="light"] .sg-race-equation {
    color: var(--sgg-ink) !important;
    -webkit-text-fill-color: var(--sgg-ink) !important;
}

html[lang][data-index-v2-theme] body.sg-games-body.has-site-topbar-v2[data-v2-mode-theme="light"] .sg-race-sound {
    border-color: var(--sgg-line);
    background: #ffffff;
}

/* ---- Thai spelling ---- */
html[lang][data-index-v2-theme] body.sg-games-body.has-site-topbar-v2[data-v2-mode-theme="light"] .sg-spell-word {
    color: var(--sgg-ink) !important;
    -webkit-text-fill-color: var(--sgg-ink) !important;
}

html[lang][data-index-v2-theme] body.sg-games-body.has-site-topbar-v2[data-v2-mode-theme="light"] .sg-spell-word__blank {
    color: var(--sgg-amber) !important;
    -webkit-text-fill-color: var(--sgg-amber) !important;
}

/* The .sg-game-choice light rule paints text-fill on the button, which would
   otherwise drag the hint line up to full ink strength. */
html[lang][data-index-v2-theme] body.sg-games-body.has-site-topbar-v2[data-v2-mode-theme="light"] .sg-spell-lesson__hint {
    color: var(--sgg-muted) !important;
    -webkit-text-fill-color: var(--sgg-muted) !important;
}

html[lang][data-index-v2-theme] body.sg-games-body.has-site-topbar-v2[data-v2-mode-theme="light"] .sg-spell-lesson.is-selected .sg-spell-lesson__hint {
    color: #3f5a73 !important;
    -webkit-text-fill-color: #3f5a73 !important;
}

/* ---- plan / daily-round gate ----
   The blanket paints h2, p and a with !important and -webkit-text-fill-color,
   so every line inside the panel has to answer it in kind. */
html[lang][data-index-v2-theme] body.sg-games-body.has-site-topbar-v2[data-v2-mode-theme="light"] .sg-game-plan-gate {
    background: rgba(19, 58, 82, .38);
}

html[lang][data-index-v2-theme] body.sg-games-body.has-site-topbar-v2[data-v2-mode-theme="light"] .sg-game-plan-gate__panel {
    border-color: var(--sgg-line);
    background: #ffffff;
    box-shadow: var(--sgg-shadow-lift);
}

html[lang][data-index-v2-theme] body.sg-games-body.has-site-topbar-v2[data-v2-mode-theme="light"] .sg-game-plan-gate__panel h2 {
    color: var(--sgg-ink) !important;
    -webkit-text-fill-color: var(--sgg-ink) !important;
}

html[lang][data-index-v2-theme] body.sg-games-body.has-site-topbar-v2[data-v2-mode-theme="light"] .sg-game-plan-gate__panel p {
    color: var(--sgg-muted) !important;
    -webkit-text-fill-color: var(--sgg-muted) !important;
}

html[lang][data-index-v2-theme] body.sg-games-body.has-site-topbar-v2[data-v2-mode-theme="light"] .sg-game-plan-gate__cta {
    background: var(--sgg-cta) !important;
    color: var(--sgg-cta-ink) !important;
    -webkit-text-fill-color: var(--sgg-cta-ink) !important;
}

html[lang][data-index-v2-theme] body.sg-games-body.has-site-topbar-v2[data-v2-mode-theme="light"] .sg-game-plan-gate__back {
    color: var(--sgg-muted) !important;
    -webkit-text-fill-color: var(--sgg-muted) !important;
}