/* ──────────────────────────────────────────────────────────────────
   Trust Bar – data provenance strip under the game hero
   ────────────────────────────────────────────────────────────────── */

.sn-trust-bar {
    background: var(--sn-card-bg);
    border-bottom: 1px solid var(--sn-border);
}

.sn-trust-bar__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 18px;
    padding: 10px 0;
    font-size: 0.8125rem;
    color: var(--sn-text-secondary);
}

.sn-trust-bar__item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    line-height: 1.4;
}

.sn-trust-bar__item svg {
    flex-shrink: 0;
    color: var(--sn-text-muted);
}

.sn-trust-bar__label {
    color: var(--sn-text-muted);
}

.sn-trust-bar__item strong {
    color: var(--sn-text-body);
    font-weight: var(--sn-weight-strong);
}

.sn-trust-bar__item time {
    color: var(--sn-text-body);
    font-weight: var(--sn-weight-strong);
}

/* ── Detected region ── */
.sn-trust-bar__item--geo {
    padding: 3px 9px;
    background: var(--sn-page-bg);
    border: 1px solid var(--sn-border);
    border-radius: var(--sn-radius-full);
}

.sn-trust-bar__flag {
    font-size: 1rem;
    line-height: 1;
}

.sn-trust-bar__geo-code {
    font-weight: 700;
    font-size: 0.75rem;
    letter-spacing: 0.03em;
    color: var(--sn-text-body);
}

/* ── Verified badge ── */
.sn-trust-bar__badge {
    margin-left: auto;
    padding: 3px 10px;
    background: var(--sn-success-bg);
    border: 1px solid var(--sn-success);
    border-radius: var(--sn-radius-full);
    color: var(--sn-success);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.sn-trust-bar__badge svg {
    color: var(--sn-success);
}

[data-theme="dark"] .sn-trust-bar__badge {
    background: rgba(16, 185, 129, 0.12);
}

/* ── Mobile ── */
@media (max-width: 768px) {
    .sn-trust-bar__inner {
        gap: 6px 12px;
        padding: 9px 0;
        font-size: 0.75rem;
    }

    /* The badge sits inline on narrow screens instead of being pushed right,
       otherwise it lands alone on its own line. */
    .sn-trust-bar__badge {
        margin-left: 0;
    }

    /* Each statement gets its own line rather than wrapping mid-phrase —
       a bare date with its label wrapped off is worse than a taller bar. */
    .sn-trust-bar__item {
        flex-basis: 100%;
    }

    .sn-trust-bar__item--geo,
    .sn-trust-bar__badge {
        flex-basis: auto;
    }
}