/* Homepage-specific dark-mode guard. Keep this tied to semantic tokens so it cannot drift from the shared palette. */
html,
body.site-body {
    background: var(--bg) !important;
    color: var(--text) !important;
}

.hero-section {
    background: radial-gradient(circle at 82% 8%, color-mix(in srgb, var(--primary) 28%, transparent), transparent 27%), var(--bg) !important;
}

.games-section {
    background: var(--surface) !important;
}

.games-section-all {
    background: var(--bg) !important;
}

.hero-section h1,
.section-heading h2,
.game-info h3,
.compact-game strong {
    color: var(--text) !important;
}

.hero-copy,
.trust-list span,
.game-info p,
.compact-game small {
    color: var(--muted) !important;
}

.compact-game {
    border-color: var(--border) !important;
    background: var(--surface-raised) !important;
}

.game-card-small,
.success-badge {
    border-color: var(--border) !important;
    background: var(--surface-raised) !important;
    color: var(--text) !important;
}