/**
 * assets/game-page.css
 * A game's profile page (includes/game_page.php), scoped to .hg-game.
 * Cards with soft corners, one width for everything, section headings
 * like the sidebar's.
 */

.hg-game { font-family: var(--font-body); font-size: var(--text-base); line-height: var(--leading-normal); color: var(--color-ink); text-align: left; }
.hg-game *, .hg-game *::before, .hg-game *::after { box-sizing: border-box; }
.hg-game :is(h1, h2, h3) { width: auto; max-width: none; background: none; border: 0; padding: 0; color: var(--color-ink); font-family: var(--font-display); line-height: var(--leading-tight); text-align: left; }
.hg-game p { margin: 0; }
.hg-game a:link, .hg-game a:visited { font-size: inherit; color: var(--color-brand); text-decoration: none; }
.hg-game a:hover { color: var(--color-brand-dark); text-decoration: underline; }
.hg-game img { max-width: 100%; }

/* Chips: genres, platforms, small labels. */
.hg-game .gp-chip { display: inline-block; padding: 3px 10px; border-radius: 999px; background: var(--color-bg-subtle); border: 1px solid var(--color-border); font-size: var(--text-xs); font-weight: 600; line-height: 1.5; white-space: nowrap; }
.hg-game a.gp-chip:link, .hg-game a.gp-chip:visited { color: var(--color-ink); }
.hg-game a.gp-chip:hover { border-color: var(--color-brand); color: var(--color-brand); text-decoration: none; }
.hg-game .gp-chip.is-brand { background: var(--color-brand); border-color: var(--color-brand); text-transform: uppercase; letter-spacing: 0.04em; }
.hg-game a.gp-chip.is-brand:link, .hg-game a.gp-chip.is-brand:visited, .hg-game a.gp-chip.is-brand:hover { color: #fff; }
.hg-game a.gp-chip.is-brand:hover { background: var(--color-brand-dark); }
.hg-game .gp-chip.is-soft { background: var(--color-brand-tint); border-color: transparent; color: var(--color-brand-darker); font-weight: 700; vertical-align: middle; margin-left: var(--space-2); }
/* Review of the Week and exclusive marks on review cards, as in the archives. */
.hg-game .gp-chip.is-rotw, .hg-game .gp-chip.is-excl { margin-left: var(--space-2); border-color: transparent; font-weight: 700; vertical-align: middle; }
.hg-game a.gp-chip.is-rotw:link, .hg-game a.gp-chip.is-rotw:visited { background: #FFF3D6; color: #8A5A00; }
.hg-game a.gp-chip.is-rotw::before { content: '\2605'; margin-right: 3px; color: #D4A017; }
.hg-game a.gp-chip.is-rotw:hover { background: #FFE9B3; border-color: transparent; }
.hg-game a.gp-chip.is-excl:link, .hg-game a.gp-chip.is-excl:visited { background: var(--color-brand); color: #fff; }
.hg-game a.gp-chip.is-excl:hover { background: var(--color-brand-dark); border-color: transparent; color: #fff; }
.hg-game .gp-chips { display: flex; flex-wrap: wrap; gap: 6px; }

.hg-game .gp-card { background: #fff; border: 1px solid var(--color-border); border-radius: 12px; }

/* ---- The hero ---- */
.hg-game .gp-hero { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: var(--space-6); padding: var(--space-6); margin: 0 0 var(--space-6);
    border-radius: 14px; border: 1px solid var(--color-border);
    background: linear-gradient(135deg, var(--color-brand-tint) 0%, #fff 55%); }
.hg-game .gp-hero-cover img { display: block; width: 180px; height: 180px; object-fit: cover; border-radius: 10px; background: #fff; box-shadow: 0 6px 18px rgba(15, 77, 140, 0.18); }
.hg-game .gp-cover-edit { position: relative; display: block; border-radius: 10px; }
.hg-game .gp-cover-edit span { position: absolute; left: 8px; right: 8px; bottom: 8px; padding: 4px 0; border-radius: 6px; background: rgba(22, 24, 29, 0.75); color: #fff; font-size: var(--text-xs); font-weight: 700; text-align: center; opacity: 0; transition: opacity 0.15s; }
.hg-game .gp-cover-edit:hover span, .hg-game .gp-cover-edit:focus-visible span { opacity: 1; }
.hg-game .gp-hero-main { min-width: 0; display: flex; flex-direction: column; justify-content: center; }
.hg-game .gp-hero-platform { margin-bottom: var(--space-2); }
.hg-game h1.gp-title { font-size: var(--text-3xl); font-weight: 800; margin: 0 0 var(--space-1); letter-spacing: -0.01em; }
.hg-game .gp-aka { font-size: var(--text-sm); color: var(--color-ink-muted); }
.hg-game .gp-facts { margin: var(--space-4) 0 0; display: grid; gap: var(--space-2); }
.hg-game .gp-facts > div { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: var(--space-3); align-items: baseline; }
.hg-game .gp-facts dt { font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-ink-muted); }
.hg-game .gp-facts dd { margin: 0; font-size: var(--text-sm); }

.hg-game .gp-releases { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--space-3); }
.hg-game .gp-release { display: flex; flex-direction: column; gap: 2px; padding: var(--space-3) var(--space-4); background: #fff; border: 1px solid var(--color-border); border-radius: 10px; }
.hg-game .gp-release-region { font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-brand-darker); }
.hg-game .gp-release-date { font-weight: 700; }
.hg-game .gp-release-pub { font-size: var(--text-sm); color: var(--color-ink-muted); }

/* ---- Pictures ---- */
.hg-game .gp-pictures { margin: 0 0 var(--space-6); }
.hg-game .gp-picture-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); }
.hg-game .gp-picture-grid a { display: block; border-radius: 10px; overflow: hidden; background: #111; aspect-ratio: 16 / 10; }
.hg-game .gp-picture-grid img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.2s; }
.hg-game .gp-picture-grid a:hover img { transform: scale(1.04); }
.hg-game .gp-more { margin-top: var(--space-2); text-align: right; font-size: var(--text-sm); font-weight: 600; }

/* ---- Member ratings (includes/ratings.php), as a card like the rest ---- */
.hg-game .game-ratings { width: auto; margin: 0 0 var(--space-6); border-radius: 12px; border-color: var(--color-border); }
.hg-game .game-ratings-head { background: var(--color-bg-subtle); border-bottom: 1px solid var(--color-border); padding: var(--space-3) var(--space-4); }
.hg-game .hg-ratings h2.game-ratings-title { color: var(--color-ink); font-size: var(--text-sm); text-transform: uppercase; letter-spacing: 0.05em; }
.hg-game .hg-ratings a.game-ratings-more:link, .hg-game .hg-ratings a.game-ratings-more:visited { color: var(--color-brand); text-decoration: none; font-weight: 600; }
.hg-game .game-ratings-body { padding: var(--space-4); }

/* ---- Your options ---- */
.hg-game .gp-options { margin: 0 0 var(--space-6); overflow: hidden; }
.hg-game .gp-options summary { display: flex; align-items: baseline; gap: var(--space-3); padding: var(--space-3) var(--space-4); cursor: pointer; list-style: none; background: var(--color-bg-subtle); }
.hg-game .gp-options summary::-webkit-details-marker { display: none; }
.hg-game .gp-options summary > span:first-child { font-size: var(--text-sm); font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; }
.hg-game .gp-options summary > span:first-child::before { content: "\25B8"; display: inline-block; margin-right: 6px; color: var(--color-ink-muted); transition: transform 0.15s; }
.hg-game .gp-options[open] summary > span:first-child::before { transform: rotate(90deg); }
.hg-game .gp-options[open] summary { border-bottom: 1px solid var(--color-border); }
.hg-game .gp-options-hint { font-size: var(--text-xs); color: var(--color-ink-faint); }
.hg-game .gp-option-list { list-style: none; margin: 0; padding: var(--space-3) var(--space-4); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px var(--space-6); }
.hg-game .gp-option-list li { font-size: var(--text-sm); padding: 4px 0; }
.hg-game .gp-option-list.is-staff { border-top: 1px dashed var(--color-border); padding-top: var(--space-3); }
.hg-game a.gp-danger:link, .hg-game a.gp-danger:visited { color: var(--color-danger); }

/* ---- Sections ---- */
.hg-game .gp-section { margin: 0 0 var(--space-8); }
.hg-game .gp-section-head { display: flex; align-items: center; 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-game .gp-section-head h2 { margin: 0; font-size: var(--text-sm); font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-ink-muted); }
.hg-game .gp-section-head h2 small { font-size: inherit; font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--color-ink-faint); }
.hg-game .gp-count { min-width: 1.6em; padding: 1px 8px; border-radius: 999px; background: var(--color-bg-subtle); font-size: var(--text-xs); font-weight: 700; color: var(--color-ink-muted); text-align: center; }
.hg-game .gp-note { margin-top: var(--space-3); font-size: var(--text-xs); color: var(--color-ink-faint); }

/* ---- Review cards ---- */
.hg-game .gp-review-list { display: grid; gap: var(--space-3); }
.hg-game .gp-review { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: var(--space-4); padding: var(--space-4); background: #fff; border: 1px solid var(--color-border); border-radius: 12px; transition: border-color 0.15s, box-shadow 0.15s; }
.hg-game .gp-review:hover { border-color: var(--color-border-strong); box-shadow: var(--shadow-md); }
.hg-game .gp-review-list.is-staff .gp-review { border-left: 4px solid var(--color-brand); }
.hg-game .gp-review-score:hover { text-decoration: none; }
.hg-game .gp-score { display: flex; align-items: baseline; justify-content: center; width: 76px; height: 76px; padding-top: 18px; border-radius: 12px; background: var(--color-brand); color: #fff; }
.hg-game .gp-review-list:not(.is-staff) .gp-score { background: #5B6470; }
.hg-game .gp-score b { font-size: 1.9rem; font-weight: 800; line-height: 1; letter-spacing: -0.02em; }
.hg-game .gp-score small { font-size: var(--text-sm); font-weight: 700; opacity: 0.8; margin-left: 1px; }
.hg-game .gp-score.is-none { background: var(--color-bg-subtle) !important; color: var(--color-ink-faint); }
.hg-game .gp-review-main { min-width: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.hg-game h3.gp-review-title { margin: 0; font-size: var(--text-lg); font-weight: 700; }
.hg-game h3.gp-review-title a:link, .hg-game h3.gp-review-title a:visited { color: var(--color-ink); }
.hg-game h3.gp-review-title a:hover { color: var(--color-brand); text-decoration: none; }
.hg-game .gp-review-excerpt { font-size: var(--text-sm); line-height: var(--leading-relaxed); color: var(--color-ink-muted); }
.hg-game .gp-review-list.is-staff .gp-review-excerpt { font-size: var(--text-base); font-style: italic; color: var(--color-ink); }
.hg-game .gp-review-list.is-staff .gp-review-excerpt::before { content: "\201C"; }
.hg-game .gp-review-list.is-staff .gp-review-excerpt::after { content: "\201D"; }
.hg-game .gp-review-by { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-xs); color: var(--color-ink-muted); }
.hg-game .gp-review-avatar { line-height: 0; }
.hg-game .gp-avatar { width: 28px; height: 28px; font-size: var(--text-xs); }
.hg-game a.gp-review-writer:link, .hg-game a.gp-review-writer:visited { color: var(--color-ink); font-weight: 700; }

/* ---- Guide call-out ---- */
.hg-game .gp-guide { display: flex; align-items: center; gap: var(--space-4); margin: 0 0 var(--space-8); padding: var(--space-4) var(--space-6); border-radius: 12px;
    background: linear-gradient(120deg, var(--color-brand-darker), var(--color-brand)); box-shadow: 0 6px 18px rgba(15, 77, 140, 0.2); }
.hg-game a.gp-guide:link, .hg-game a.gp-guide:visited, .hg-game a.gp-guide:hover { color: #fff; text-decoration: none; }
.hg-game .gp-guide-icon { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 50%; background: rgba(255, 255, 255, 0.16); }
.hg-game .gp-guide-text { flex: 1; display: flex; flex-direction: column; }
.hg-game .gp-guide-text b { font-size: var(--text-lg); }
.hg-game .gp-guide-text span { font-size: var(--text-sm); opacity: 0.85; }
.hg-game .gp-guide-go { font-size: var(--text-2xl); transition: transform 0.15s; }
.hg-game .gp-guide:hover .gp-guide-go { transform: translateX(4px); }

/* ---- Write a review ---- */
.hg-game .gp-invite { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); margin-top: var(--space-3); padding: var(--space-4); border: 1px dashed var(--color-border-strong); border-radius: 12px; background: var(--color-bg-subtle); }
.hg-game .gp-invite p { font-size: var(--text-sm); color: var(--color-ink-muted); }
.hg-game a.gp-btn:link, .hg-game a.gp-btn:visited { display: inline-block; padding: 8px 16px; border-radius: 8px; background: var(--color-brand); color: #fff; font-weight: 700; font-size: var(--text-sm); }
.hg-game a.gp-btn:hover { background: var(--color-brand-dark); color: #fff; text-decoration: none; }

/* ---- News ---- */
.hg-game .gp-news { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.hg-game .gp-news-item { display: flex; gap: var(--space-4); align-items: flex-start; padding: var(--space-3); border-radius: 10px; }
.hg-game a.gp-news-item:hover { background: var(--color-bg-subtle); text-decoration: none; }
.hg-game .gp-news-item img { flex-shrink: 0; width: 120px; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 8px; background: var(--color-bg-subtle); }
.hg-game .gp-news-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.hg-game .gp-news-title { font-weight: 700; color: var(--color-ink); line-height: var(--leading-tight); }
.hg-game a.gp-news-item:hover .gp-news-title { color: var(--color-brand); }
.hg-game .gp-news-meta { font-size: var(--text-xs); color: var(--color-ink-faint); }
.hg-game .gp-news-excerpt { font-size: var(--text-sm); color: var(--color-ink-muted); margin-top: 2px; }

/* ---- Affiliate note ---- */
.hg-game .gp-affiliate { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-4); margin: 0 0 var(--space-8); }
.hg-game .gp-affiliate img { display: block; border-radius: 8px; }
.hg-game .gp-affiliate p { font-size: var(--text-sm); color: var(--color-ink-muted); }

/* ---- Reviews around the internet ---- */
.hg-game .gp-avg { display: inline-flex; align-items: baseline; gap: 4px; padding: 2px 10px; border-radius: 999px; background: var(--color-brand-tint); color: var(--color-brand-darker); font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }
.hg-game .gp-avg b { font-size: var(--text-lg); letter-spacing: 0; }
.hg-game .gp-avg small { font-size: var(--text-xs); }
.hg-game .gp-external { list-style: none; margin: 0; padding: 0; border: 1px solid var(--color-border); border-radius: 12px; overflow: hidden; }
.hg-game .gp-external li { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-4); border-top: 1px solid var(--color-border); }
.hg-game .gp-external li:first-child { border-top: 0; }
.hg-game .gp-external li:nth-child(even) { background: var(--color-bg-subtle); }
.hg-game .gp-external-site { flex: 1; min-width: 0; font-weight: 600; }
.hg-game .gp-external-tools { display: flex; gap: var(--space-2); font-size: var(--text-xs); }
.hg-game .gp-external-score { min-width: 64px; padding: 2px 10px; border-radius: 999px; background: var(--color-brand); font-size: var(--text-sm); font-weight: 700; text-align: center; white-space: nowrap; }
.hg-game a.gp-external-score:link, .hg-game a.gp-external-score:visited, .hg-game a.gp-external-score:hover { color: #fff; text-decoration: none; }
.hg-game a.gp-external-score:hover { background: var(--color-brand-dark); }
.hg-game .gp-external-score.is-plain { background: var(--color-border); color: var(--color-ink-muted); }

/* ---- Similar games ---- */
.hg-game .gp-similar { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); }
.hg-game .gp-similar-item { display: flex; gap: var(--space-3); padding: var(--space-3); background: #fff; border: 1px solid var(--color-border); border-radius: 12px; transition: border-color 0.15s, box-shadow 0.15s; }
.hg-game a.gp-similar-item:hover { border-color: var(--color-border-strong); box-shadow: var(--shadow-md); text-decoration: none; }
.hg-game .gp-similar-item img { flex-shrink: 0; width: 72px; height: 72px; object-fit: cover; border-radius: 8px; background: var(--color-bg-subtle); }
.hg-game .gp-similar-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.hg-game .gp-similar-title { font-weight: 700; font-size: var(--text-sm); line-height: var(--leading-tight); color: var(--color-ink); }
.hg-game a.gp-similar-item:hover .gp-similar-title { color: var(--color-brand); }
.hg-game .gp-similar-meta { font-size: var(--text-xs); color: var(--color-ink-muted); }
.hg-game .gp-regions { display: flex; gap: 4px; margin-top: 4px; }
.hg-game .gp-regions span { padding: 0 5px; border-radius: 4px; font-size: 0.6875rem; font-weight: 700; background: var(--color-bg-subtle); color: var(--color-ink-faint); text-decoration: line-through; }
.hg-game .gp-regions span.is-on { background: var(--color-brand-tint); color: var(--color-brand-darker); text-decoration: none; }

/* ---- Narrow screens ---- */
@media (max-width: 900px) {
    .hg-game .gp-similar { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
    .hg-game .gp-hero { grid-template-columns: 1fr; padding: var(--space-4); gap: var(--space-4); }
    .hg-game .gp-hero-cover img { width: 140px; height: 140px; }
    .hg-game h1.gp-title { font-size: var(--text-2xl); }
    .hg-game .gp-facts > div { grid-template-columns: 1fr; gap: 4px; }
    .hg-game .gp-picture-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .hg-game .gp-picture-grid a:nth-child(3) { display: none; }
    .hg-game .gp-option-list { grid-template-columns: 1fr; }
    .hg-game .gp-options-hint { display: none; }
    .hg-game .gp-review { grid-template-columns: 56px minmax(0, 1fr); gap: var(--space-3); padding: var(--space-3); }
    .hg-game .gp-score { width: 56px; height: 56px; padding-top: 14px; }
    .hg-game .gp-score b { font-size: 1.35rem; }
    .hg-game .gp-news-item img { width: 88px; }
    .hg-game .gp-guide { padding: var(--space-4); }
}