/**
 * assets/stats.css
 * Content stats (includes/stats_page.php), scoped to .hg-stats: the system
 * cards (as on the all-systems page), the filter bar (as on Best Reviewed)
 * and the per-game table.
 */

.hg-stats { font-family: var(--font-body); font-size: var(--text-base); line-height: var(--leading-normal); color: var(--color-ink); text-align: left; }
.hg-stats *, .hg-stats *::before, .hg-stats *::after { box-sizing: border-box; }
.hg-stats :is(h1, h2) { width: auto; max-width: none; background: none; border: 0; padding: 0; margin: 0; color: var(--color-ink); font-family: var(--font-display); line-height: var(--leading-tight); text-align: left; }
.hg-stats p { margin: 0; }
.hg-stats a:link, .hg-stats a:visited { font-size: inherit; color: var(--color-brand); text-decoration: none; }
.hg-stats a:hover { color: var(--color-brand-dark); text-decoration: underline; }
.hg-stats [hidden] { display: none !important; }
.hg-stats .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* Banner. */
.hg-stats .st-hero { position: relative; overflow: hidden; padding: var(--space-6); margin: 0 0 var(--space-6); border-radius: 16px; color: #fff;
    background: radial-gradient(circle at 85% 15%, rgba(255, 255, 255, 0.18) 0, rgba(255, 255, 255, 0) 45%), linear-gradient(130deg, #0B2E55 0%, var(--color-brand-darker) 45%, var(--color-brand) 100%);
    box-shadow: 0 10px 28px rgba(15, 77, 140, 0.25); }
.hg-stats .st-eyebrow { font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: rgba(255, 255, 255, 0.75); }
.hg-stats .st-eyebrow a:link, .hg-stats .st-eyebrow a:visited { color: #fff; }
.hg-stats h1.st-title { margin: var(--space-1) 0 var(--space-3); font-size: 2.4rem; font-weight: 800; letter-spacing: -0.02em; color: #fff; }
.hg-stats .st-intro { max-width: 620px; margin: 0 0 var(--space-4); font-size: var(--text-sm); line-height: var(--leading-relaxed); color: rgba(255, 255, 255, 0.88); }
.hg-stats .st-totals { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); }
.hg-stats .st-totals li { padding: 4px 12px; border-radius: 999px; background: rgba(255, 255, 255, 0.14); font-size: var(--text-sm); color: rgba(255, 255, 255, 0.9); }
.hg-stats .st-totals b { color: #fff; font-weight: 800; }
.hg-stats .st-find { display: block; margin-top: var(--space-4); }
.hg-stats .st-find input { width: 100%; max-width: 360px; padding: 10px 14px; border: 0; border-radius: 10px; font: inherit; color: var(--color-ink); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); }
.hg-stats .st-find input:focus { outline: 3px solid rgba(255, 255, 255, 0.6); }

/* System cards. */
.hg-stats .st-section { margin: 0 0 var(--space-8); }
.hg-stats .st-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); margin: 0 0 var(--space-4); padding-bottom: var(--space-2); border-bottom: 2px solid var(--color-border); }
.hg-stats .st-section-head h2 { font-size: var(--text-sm); font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-ink-muted); }
.hg-stats .st-count { padding: 1px 8px; border-radius: 999px; background: var(--color-bg-subtle); font-size: var(--text-xs); font-weight: 700; color: var(--color-ink-muted); }
.hg-stats .st-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--space-3); }
.hg-stats .st-card { display: flex; flex-direction: column; gap: 3px; padding: var(--space-3) var(--space-4); border: 1px solid var(--color-border); border-top: 4px solid var(--color-brand); border-radius: 12px; background: #fff; transition: transform 0.12s, box-shadow 0.15s; }
.hg-stats a.st-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); text-decoration: none; }
.hg-stats .st-group.is-retro .st-card { border-top-color: #7A4FD0; }
.hg-stats .st-card-abbr { font-size: 0.6875rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-brand-darker); }
.hg-stats .st-group.is-retro .st-card-abbr { color: #5A33A8; }
.hg-stats .st-card-name { font-weight: 700; line-height: var(--leading-tight); color: var(--color-ink); }
.hg-stats a.st-card:hover .st-card-name { color: var(--color-brand); }
.hg-stats .st-card-meta { font-size: var(--text-xs); color: var(--color-ink-muted); }
.hg-stats .st-card-meta.is-faint { color: var(--color-ink-faint); }
.hg-stats .st-bar { display: block; height: 6px; margin: 4px 0 2px; border-radius: 999px; background: var(--color-bg-subtle); overflow: hidden; }
.hg-stats .st-bar span { display: block; height: 100%; border-radius: 999px; background: var(--color-brand); }
.hg-stats .st-group.is-retro .st-bar span { background: #7A4FD0; }

/* Filters. */
.hg-stats .st-filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-3); padding: var(--space-4); margin: 0 0 var(--space-3);
    border: 1px solid var(--color-border); border-radius: 14px; background: linear-gradient(135deg, var(--color-brand-tint) 0%, #fff 70%); }
.hg-stats .st-field { display: flex; flex-direction: column; gap: 4px; margin: 0; min-width: 0; }
.hg-stats .st-grow { flex: 1 1 180px; }
.hg-stats .st-label { font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-ink-muted); }
.hg-stats .st-filters select, .hg-stats .st-filters input[type=search] { width: 100%; max-width: 230px; height: 36px; padding: 0 10px; border: 1px solid var(--color-border-strong); border-radius: 8px; background: #fff; font: inherit; font-size: var(--text-sm); color: var(--color-ink); }
.hg-stats .st-filters select { cursor: pointer; }
.hg-stats .st-filters input[type=search] { max-width: none; }
.hg-stats .st-filters select:focus, .hg-stats .st-filters input[type=search]:focus { outline: 2px solid var(--color-brand); outline-offset: 1px; border-color: var(--color-brand); }
.hg-stats .st-seg { display: inline-flex; height: 36px; padding: 3px; border-radius: 8px; background: #fff; border: 1px solid var(--color-border-strong); }
.hg-stats .st-seg label { display: flex; align-items: center; padding: 0 11px; border-radius: 6px; font-size: var(--text-sm); font-weight: 700; color: var(--color-ink-muted); cursor: pointer; white-space: nowrap; }
.hg-stats .st-seg label:hover { color: var(--color-ink); }
.hg-stats .st-seg label.is-on { background: var(--color-brand); color: #fff; }
.hg-stats .st-seg input { position: absolute; opacity: 0; pointer-events: none; }
.hg-stats .st-seg label:focus-within { outline: 2px solid var(--color-brand); outline-offset: 1px; }
.hg-stats .st-go { height: 36px; padding: 0 16px; border: 0; border-radius: 8px; background: var(--color-brand); color: #fff; font: inherit; font-size: var(--text-sm); font-weight: 700; cursor: pointer; }
.hg-stats .st-showing { margin: 0 0 var(--space-3); font-size: var(--text-sm); color: var(--color-ink-muted); }
.hg-stats .st-showing b { color: var(--color-ink); }

/* The table. */
.hg-stats .st-scroll { overflow-x: auto; border: 1px solid var(--color-border); border-radius: 14px; background: #fff; }
.hg-stats .st-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--text-sm); }
.hg-stats .st-table th, .hg-stats .st-table td { padding: 6px 10px; border-bottom: 1px solid var(--color-border); text-align: center; vertical-align: middle; font-variant-numeric: tabular-nums; white-space: nowrap; }
.hg-stats .st-table tbody tr:last-child > * { border-bottom: 0; }
.hg-stats .st-table thead th { position: sticky; top: 0; z-index: 2; padding: 10px; background: var(--color-bg-subtle); font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-ink-muted); }
.hg-stats .st-table .st-game { position: sticky; left: 0; z-index: 1; width: 100%; min-width: 220px; max-width: 420px; text-align: left; white-space: normal; background: #fff; font-weight: 400; }
.hg-stats .st-table thead .st-game { z-index: 3; background: var(--color-bg-subtle); }
.hg-stats .st-table tbody tr:hover > * { background: var(--color-brand-tint); }
.hg-stats .st-gamelink { display: inline-flex; align-items: center; gap: 10px; vertical-align: middle; }
.hg-stats a.st-gamelink:link, .hg-stats a.st-gamelink:visited { color: var(--color-ink); font-weight: 600; }
.hg-stats a.st-gamelink:hover { color: var(--color-brand); text-decoration: none; }
.hg-stats .st-gamelink img { flex-shrink: 0; width: 32px; height: 32px; object-fit: cover; border-radius: 6px; background: var(--color-bg-subtle); }
.hg-stats .st-tags { display: inline-flex; flex-wrap: wrap; gap: 4px; margin-left: 6px; vertical-align: middle; }
.hg-stats .st-region, .hg-stats .st-year { padding: 0 6px; border-radius: 999px; font-size: 0.6875rem; font-weight: 700; line-height: 1.6; }
.hg-stats .st-region { background: var(--color-brand-tint); color: var(--color-brand-darker); }
.hg-stats .st-year { background: var(--color-bg-subtle); color: var(--color-ink-muted); }
.hg-stats .st-table td a:link, .hg-stats .st-table td a:visited { display: inline-block; min-width: 28px; padding: 1px 6px; border-radius: 6px; background: var(--color-brand-tint); font-weight: 700; color: var(--color-brand-darker); }
.hg-stats .st-table td a:hover { background: var(--color-brand); color: #fff; text-decoration: none; }
.hg-stats .st-zero { color: var(--color-ink-faint); }
.hg-stats .st-yes { font-weight: 700; color: #2E8540; }

.hg-stats .st-empty { padding: var(--space-8) var(--space-4); margin-top: var(--space-3); border: 1px dashed var(--color-border-strong); border-radius: 14px; text-align: center; color: var(--color-ink-muted); }

@media (max-width: 640px) {
    .hg-stats .st-hero { padding: var(--space-4); }
    .hg-stats h1.st-title { font-size: var(--text-3xl); }
    .hg-stats .st-filters { padding: var(--space-3); }
    .hg-stats .st-filters .st-field { flex: 1 1 140px; }
    .hg-stats .st-filters select { max-width: none; }
    .hg-stats .st-filters .st-field.is-seg { flex-basis: 100%; }
    .hg-stats .st-seg { display: flex; }
    .hg-stats .st-seg label { flex: 1; justify-content: center; }
    .hg-stats .st-table .st-game { min-width: 170px; max-width: 200px; }
    .hg-stats .st-gamelink img { width: 28px; height: 28px; }
    .hg-stats .st-tags { display: flex; margin: 4px 0 0 38px; }
}