/* /Trinity games lists (owner: games-list agent). The cards themselves are styled ONLY by the stats pages' own CSS
   (/styles.css for H2 + H3, plus the rules /H3/h3stats.js injects); this file only lays out the filter bar, the
   "loading more" line and the end note. Never restyles .tri-badge* or the cards. */
.trg-head { flex-wrap: wrap; }
.trg-head .games-title { display: flex; align-items: center; gap: 12px; }
.trg-count { font-family: 'Share Tech Mono', monospace; font-size: 14px; color: var(--text-secondary); font-weight: 400; letter-spacing: 0; }
.trg-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.trg-filters .sort-select { min-width: 140px; max-width: 220px; }
.trg-filters .clear-filters-btn { cursor: pointer; }
.trg-notice {
    margin: 0 0 14px; padding: 10px 14px; border: 1px solid rgba(255, 200, 0, 0.35); border-radius: 6px;
    background: rgba(255, 200, 0, 0.06); color: #ffd36a; font-size: 14px;
}
#trg-more .trg-more-loading { padding: 22px 0 6px; font-size: 14px; }
.trg-end { text-align: center; padding: 22px 0 8px; font-family: 'Share Tech Mono', monospace; font-size: 13px; color: var(--text-muted); }
#trg-sentinel { height: 1px; }
#trg-h2host { display: none !important; }
.h3s-wrap.trg-h3wrap { max-width: none; margin: 0; }   /* list width = the H2 cards' width; everything else from .h3s-wrap */
@media (max-width: 768px) {
    .trg-filters { width: 100%; }
    .trg-filters .sort-select { flex: 1 1 140px; max-width: none; min-width: 0; }
}