/* Catchie V3.5.1 — light-theme homepage clarity.
 * Additive and public-home scoped. Dark theme groups are intentionally untouched.
 * Restores the V291.3 game-tile presentation where the older theme bridge has
 * higher selector specificity, while preserving tile shine, depth and hover FX. */

:root[data-theme-group="light"] body.mobile-games-body .mg-home-head,
:root[data-theme-group="light"] body.mobile-games-body .mg-home-head h1,
:root[data-theme-group="light"] body.mobile-games-body .mg-section-title h2 {
  color: var(--theme-readable-text, var(--text, #0f172a)) !important;
  opacity: 1 !important;
  text-shadow: 0 1px 0 rgba(255,255,255,.72);
}

:root[data-theme-group="light"] body.mobile-games-body .mg-home-head .mg-eyebrow,
:root[data-theme-group="light"] body.mobile-games-body .mg-home-subtitle,
:root[data-theme-group="light"] body.mobile-games-body .mg-section-title .mg-eyebrow,
:root[data-theme-group="light"] body.mobile-games-body .mg-section-title > span {
  color: var(--theme-readable-muted, var(--muted, #475569)) !important;
  opacity: 1 !important;
  text-shadow: 0 1px 0 rgba(255,255,255,.58);
}

/* Keep the glassy light-theme panel, but reduce background bleed-through. */
:root[data-theme-group="light"] body.mobile-games-body .mg-game-section {
  background: color-mix(in srgb, var(--surface-solid, #fff) 94%, transparent) !important;
  border-color: color-mix(in srgb, var(--stroke-strong, #bfdbfe) 72%, var(--stroke, #dbe7ff)) !important;
  box-shadow: 0 14px 36px rgba(15,23,42,.12), 0 1px 0 rgba(255,255,255,.84) inset !important;
}

/* The legacy theme bridge is more specific than V291.3. Reassert the exact
 * game-style tile surface only for light palettes so cards stay crisp/readable. */
:root[data-theme-group="light"] body.mobile-games-body .mg-game-card {
  color: var(--tile-text, #f8fbff) !important;
  border-color: color-mix(in srgb, var(--tile-accent) 72%, white 8%) !important;
  background:
    radial-gradient(circle at var(--mx) var(--my), color-mix(in srgb, var(--tile-accent) 38%, transparent) 0%, transparent 38%),
    radial-gradient(circle at 16% 12%, rgba(255,255,255,.12) 0 2px, transparent 2.5px),
    radial-gradient(circle at 78% 78%, rgba(255,255,255,.07) 0 1.5px, transparent 2px),
    linear-gradient(145deg, color-mix(in srgb, var(--tile-accent) 24%, var(--tile-surface, #101a2d)), var(--tile-surface-deep, #08111f) 72%) !important;
  background-size: auto, 38px 38px, 44px 44px, auto !important;
  box-shadow:
    0 12px 24px rgba(2,8,23,.34),
    0 0 0 1px rgba(255,255,255,.045) inset,
    0 0 26px color-mix(in srgb, var(--tile-accent) 22%, transparent) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  opacity: 1 !important;
}

:root[data-theme-group="light"] body.mobile-games-body .mg-game-card:hover,
:root[data-theme-group="light"] body.mobile-games-body .mg-game-card:focus-visible,
:root[data-theme-group="light"] body.mobile-games-body .mg-game-card.is-tilting {
  border-color: color-mix(in srgb, var(--tile-accent) 88%, white 12%) !important;
  background:
    radial-gradient(circle at var(--mx) var(--my), color-mix(in srgb, var(--tile-accent) 42%, transparent) 0%, transparent 40%),
    radial-gradient(circle at 16% 12%, rgba(255,255,255,.14) 0 2px, transparent 2.5px),
    radial-gradient(circle at 78% 78%, rgba(255,255,255,.08) 0 1.5px, transparent 2px),
    linear-gradient(145deg, color-mix(in srgb, var(--tile-accent) 27%, var(--tile-surface, #101a2d)), var(--tile-surface-deep, #08111f) 70%) !important;
  box-shadow:
    0 20px 38px rgba(2,8,23,.46),
    0 0 0 1px rgba(255,255,255,.11) inset,
    0 0 34px color-mix(in srgb, var(--tile-accent) 46%, transparent) !important;
}

:root[data-theme-group="light"] body.mobile-games-body .mg-game-card strong {
  color: #fff !important;
  -webkit-text-fill-color: #fff;
  opacity: 1 !important;
  text-shadow: 0 2px 5px rgba(0,0,0,.48) !important;
}

:root[data-theme-group="light"] body.mobile-games-body .mg-game-title-th,
:root[data-theme-group="light"] body.mobile-games-body .mg-course-card [data-copy-en] {
  color: var(--tile-muted, #d8e4f4) !important;
  -webkit-text-fill-color: var(--tile-muted, #d8e4f4);
  opacity: 1 !important;
  text-shadow: 0 1px 3px rgba(0,0,0,.34);
}

/* Keep the guide disclosure legible against vivid light palettes. */
:root[data-theme-group="light"] body.mobile-games-body .mg-guide-links {
  color: var(--theme-readable-text, var(--text, #0f172a)) !important;
}
:root[data-theme-group="light"] body.mobile-games-body .mg-guide-links a {
  color: var(--theme-link-text, var(--primary, #2563eb)) !important;
  font-weight: 700;
}