/* ============================================================
   assets/ratings.css
   Member ratings (includes/ratings.php): the box on a game's page, the
   Ratings page (ratings.php) and the blog's Ratings tab. Scoped to
   .hg-ratings, except the score badge, which the blog tab uses inside .hg-blog.
   ============================================================ */

.hg-ratings { font-family: var(--font-body); color: var(--color-ink); line-height: var(--leading-normal); }
.hg-ratings *, .hg-ratings *::before, .hg-ratings *::after { box-sizing: border-box; }
.hg-ratings a:link, .hg-ratings a:visited { font-size: inherit; color: var(--color-brand); text-decoration: none; }
.hg-ratings a:hover { color: var(--color-brand-dark); text-decoration: underline; }
.hg-ratings h1, .hg-ratings h2, .hg-ratings h3 { width: auto; max-width: none; background: none; border: 0; padding: 0; color: var(--color-ink); }

/* The score badge: green 8-10, amber 5-7.9, red below. */
.rating-badge { display: inline-flex; align-items: baseline; justify-content: center; gap: 1px; min-width: 2.9em; padding: 1px 6px; border-radius: 5px; font-weight: 800;
    font-variant-numeric: tabular-nums;
    font-size: var(--text-sm); line-height: 1.4; color: #fff; background: #C0392B; white-space: nowrap; font-family: var(--font-body); }
.rating-badge span { font-size: 0.72em; font-weight: 700; opacity: 0.85; }
.rating-badge.is-mid { background: #D68910; }
.rating-badge.is-high { background: #1E9E5A; }
.rating-badge.is-large { font-size: var(--text-xl); min-width: 0; padding: 2px 10px; border-radius: 7px; }

/* ---- The box on a game's page ---- */
.game-ratings { width: 728px; max-width: 100%; margin: 0 0 var(--space-4); border: 1px solid var(--color-border-strong); border-radius: var(--radius); background: #fff; overflow: hidden; }
.game-ratings-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); padding: var(--space-2) var(--space-4); background: #000; }
.hg-ratings h2.game-ratings-title { margin: 0; font-size: var(--text-base); font-weight: 700; color: #fff; }
.hg-ratings a.game-ratings-more:link, .hg-ratings a.game-ratings-more:visited { color: #fff; font-size: var(--text-sm); text-decoration: underline; }
.game-ratings-body { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-6); padding: var(--space-3) var(--space-4); }
.game-ratings-avg { margin: 0; display: flex; align-items: center; gap: var(--space-2); }
.game-ratings-count { font-size: var(--text-sm); color: var(--color-ink-muted); }
.game-ratings-mine { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.game-ratings-label { margin: 0; font-size: var(--text-sm); font-weight: 700; }
.rating-picker { display: inline-flex; gap: 3px; }
.hg-ratings .rating-pick { width: 30px; height: 30px; padding: 0; border: 1px solid var(--color-border-strong); border-radius: 5px; background: #fff;
    font: inherit; font-size: var(--text-sm); font-weight: 700; color: var(--color-ink-muted); cursor: pointer; transition: background-color 0.1s, color 0.1s; }
.hg-ratings .rating-pick.is-on { background: var(--color-brand); border-color: var(--color-brand); color: #fff; }
.hg-ratings .rating-pick.is-preview { background: var(--color-brand-tint); border-color: var(--color-brand); color: var(--color-brand-dark); }
.hg-ratings .rating-pick.is-mine { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--color-brand-dark); }
.hg-ratings .rating-pick:focus-visible { outline: 2px solid var(--color-brand-dark); outline-offset: 2px; }
.hg-ratings .game-ratings-clear { border: 0; background: none; padding: 0; font: inherit; font-size: var(--text-xs); color: var(--color-ink-muted); text-decoration: underline; cursor: pointer; }
.hg-ratings .game-ratings-clear:hover { color: var(--color-danger); }
.game-ratings-status { font-size: var(--text-xs); color: var(--color-ink-muted); }
.game-ratings-status.is-error { color: var(--color-danger); font-weight: 600; }
.game-ratings-login { margin: 0; font-size: var(--text-sm); }
@media (max-width: 600px) {
    .hg-ratings .rating-pick { width: 26px; height: 30px; font-size: var(--text-xs); }
    .rating-picker { gap: 2px; }
}

/* ---- The Ratings page (ratings.php) ---- */
.ratings-page h1 { font-size: var(--text-2xl); margin: 0 0 var(--space-1); }
.ratings-intro { margin: 0 0 var(--space-4); font-size: var(--text-sm); color: var(--color-ink-muted); }
.ratings-filter { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: 0 0 var(--space-6); font-size: var(--text-sm); }
.ratings-filter select { font: inherit; padding: 6px var(--space-2); border: 1px solid var(--color-border-strong); border-radius: var(--radius); background: #fff; }
.ratings-cols { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: var(--space-6); }
.hg-ratings h2.ratings-h2 { margin: 0 0 var(--space-2); font-size: var(--text-lg); text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-ink-muted); }
.ratings-list { list-style: none; margin: 0 0 var(--space-6); padding: 0; border: 1px solid var(--color-border); border-radius: var(--radius); }
.ratings-list li { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-3); border-top: 1px solid var(--color-border); }
.ratings-list li:first-child { border-top: 0; }
.ratings-cover { flex-shrink: 0; display: block; width: 40px; height: 40px; border-radius: 4px; overflow: hidden; background: var(--color-bg-subtle); line-height: 0; }
.ratings-cover img { width: 40px; height: 40px; object-fit: cover; }
.ratings-rank { width: 2em; text-align: right; font-weight: 700; color: var(--color-ink-faint); flex-shrink: 0; }
.ratings-main { flex: 1; min-width: 0; }
.ratings-game { display: block; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ratings-sub { display: block; font-size: var(--text-xs); color: var(--color-ink-muted); }
.ratings-empty { font-size: var(--text-sm); color: var(--color-ink-muted); }
@media (max-width: 800px) { .ratings-cols { grid-template-columns: 1fr; } }