/* =====================================================================
 * Movie-theme homepage widgets — palette alias layer
 *
 * The widget CSS lifted from geekpress-game-theme references the
 * game-theme's own token names (--cyan, --magenta, --lime, --display,
 * --border-soft, --gold-soft). Those tokens are not defined in this
 * theme. Rather than rewrite ~2,000 lines of CSS, we map each
 * game-theme token onto a comparable movie-theme token so the same
 * rules paint with cinematic gold instead of cyberpunk cyan.
 *
 * Scope is :root so it applies everywhere the homepage CSS is loaded
 * (front-page + any inner page that surfaces a gpg-home widget).
 * Mapping is one-way (read-only from this side); editing the
 * game-theme palette will not bleed into movie-theme renders.
 * ===================================================================== */
:root,
body,
body[data-theme="light"] {
  --cyan:        var(--gold);
  --cyan-d:      var(--gold);
  --magenta:     var(--gold);
  --magenta-d:   var(--gold);
  --lime:        var(--gold);
  --gold-soft:   color-mix(in srgb, var(--gold) 70%, transparent);
  --border-soft: var(--border);
  --display:     var(--serif);
}
/* Container — match the theme's standard width (1280px) so the
   homepage doesn't render edge-to-edge while other pages stay framed. */
.gpg-home {
  max-width: 1280px;
  margin: 0 auto;
  padding: 32px 32px 60px;
  --gpg-home-gap: 20px;
}
.gpg-home-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gpg-home-gap);
  align-items: stretch;
}
.gpg-home-widget {
  flex: 1 1 100%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: rgba(26, 28, 34, 0.45);
  border: 1px solid var(--border-soft);
  border-radius: 8px;
  padding: 20px 22px;
}
[data-theme="light"] .gpg-home-widget {
  background: rgba(250, 244, 231, 0.65);
}
.gpg-home-widget-title {
  font-family: var(--display);
  font-size: 22px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cream);
  margin: 0 0 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border-soft);
}
.gpg-home-widget-body { flex: 1 1 auto; min-width: 0; }
.gpg-home-placeholder {
  padding: 28px 18px;
  border: 1px dashed var(--border);
  border-radius: 6px;
  color: var(--muted);
  font-style: italic;
  text-align: center;
  background: rgba(255, 106, 77, 0.03);
}
/* Content widget (text/HTML/shortcode) */
.gpg-home-content { color: var(--cream); line-height: 1.6; }
.gpg-home-content p:first-child { margin-top: 0; }
.gpg-home-content p:last-child  { margin-bottom: 0; }
.gpg-home-content a            { color: var(--cyan); }
.gpg-home-content img          { max-width: 100%; height: auto; border-radius: 4px; }
/* AdSense widget — fill the column; ad rendering is fully controlled
   by AdSense itself, we just centre it and reset weird outer margins. */
.gpg-home-adsense { display: flex; justify-content: center; align-items: center; min-height: 90px; }
.gpg-home-adsense ins { max-width: 100%; }

/* Recently Released widget
   ── Grid view: 5-col poster cards (2:3 covers, title + date underneath)
   ── List view: vertical rows with small poster + title + date — stays
      readable when the widget is in a narrow (1/3, 1/4) column. */
.gpg-recent-released { display: grid; gap: 14px; }
.gpg-recent-released--grid { grid-template-columns: repeat(5, 1fr); }
.gpg-recent-released--list {
  grid-template-columns: 1fr;
  gap: 8px;
}
.gpg-recent-released--list .gpg-rr-card {
  flex-direction: row;
  align-items: center;
  gap: 12px;
  padding: 6px 8px;
  border-radius: 6px;
  border: 1px solid var(--border-soft);
  background: rgba(255, 106, 77, 0.03);
}
.gpg-recent-released--list .gpg-rr-card:hover {
  border-color: var(--border);
  transform: none;
}
.gpg-recent-released--list .gpg-rr-poster {
  flex: 0 0 44px;
  width: 44px;
  height: 64px;
  aspect-ratio: auto;
  border-radius: 3px;
}
.gpg-recent-released--list .gpg-rr-noposter { font-size: 8px; }
.gpg-recent-released--list .gpg-rr-meta { flex: 1 1 auto; min-width: 0; }
.gpg-recent-released--list .gpg-rr-title { font-size: 13px; }
.gpg-recent-released--list .gpg-rr-date  { font-size: 10px; }

/* ─────────────────────────────────────────────────────────────────────
   Global widget placement (Show on all pages → top/bottom/sidebar).
   Top/bottom inject via the_content filter — wrap in card chrome that
   matches the homepage widget shell. Sidebar is a fixed floating
   panel anchored to the right edge, hidden on phones to avoid covering
   the article body.
   ───────────────────────────────────────────────────────────────── */
.gpg-home-widget--global {
  margin: 28px 0;
  padding: 18px 20px;
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: 10px;
}
/* Header / footer bands — full-bleed strip across the page, content
   inside is clamped to a comfortable reading width like the rest of
   the site. Sits outside `the_content`, so it doesn't need the inner
   card chrome the inline placements use. */
.gpg-global-band {
  background: var(--surface-soft, rgba(255, 255, 255, 0.02));
  border-top: 1px solid var(--border-soft);
  border-bottom: 1px solid var(--border-soft);
}
.gpg-global-band--header { border-top: 0; }
.gpg-global-band--footer { border-bottom: 0; }
/* The site-footer ships with margin-top: 80px to separate it from
   page content. When the footer-above band is present it sits flush
   between </main> and <footer>, so kill that gap. */
.gpg-global-band--footer + .site-footer,
.gpg-global-band--footer + footer.site-footer { margin-top: 0; }
.gpg-global-band-inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 18px 24px;
}
.gpg-global-band .gpg-home-widget--global {
  margin: 0 0 16px;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
}
.gpg-global-band .gpg-home-widget--global:last-child { margin-bottom: 0; }
.gpg-home-widget--global .gpg-home-widget-title {
  margin: 0 0 14px;
  font-family: var(--display);
  font-size: 18px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--cream);
}
.gpg-global-sidebar {
  position: fixed;
  top: 96px;                 /* sits under the sticky topbar */
  right: 18px;
  width: 300px;
  max-height: calc(100vh - 120px);
  overflow-y: auto;
  padding: 14px;
  background: rgba(14, 15, 19, 0.96);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 90;               /* under topbar (100) and modals (1000+) */
}
.gpg-global-sidebar .gpg-home-widget--global {
  margin: 0 0 12px;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
}
.gpg-global-sidebar .gpg-home-widget--global:last-child { margin-bottom: 0; }
.gpg-global-sidebar .gpg-home-widget-title { font-size: 14px; margin-bottom: 10px; }
/* Slider hits the panel edge — shrink to fit */
.gpg-global-sidebar .gpg-recent-visited .gpg-rr-card,
.gpg-global-sidebar .gpg-recent-visited .gpg-rr-poster { width: 110px; flex-basis: 110px; }
.gpg-global-sidebar .gpg-recent-visited .gpg-rr-poster { height: 165px; }
.gpg-global-sidebar .gpg-rv-nav { top: 84px; width: 32px; height: 32px; }
@media (max-width: 980px) {
  .gpg-global-sidebar { display: none; }
}
/* WP admin-bar adds 32px (mobile 46px) — push the panel down */
.admin-bar .gpg-global-sidebar { top: 128px; }
@media (max-width: 782px) {
  .admin-bar .gpg-global-sidebar { top: 142px; }
}

/* ─────────────────────────────────────────────────────────────────────
   Recently Reviewed — IGDB-style review cards. Each card pairs the
   reviewed game's cover (left, full-height) with a body that shows
   the game title + (year), a clamped excerpt of the review body,
   and a footer with the reviewer's avatar, date and star score.
   Grid view = 2-column on desktop, 1-col on narrow. List = 1-col rows.
   ───────────────────────────────────────────────────────────────── */
.gpg-reviews--grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(420px, 1fr));
  gap: 16px;
}
.gpg-reviews--list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.gpg-review-card {
  display: flex;
  align-items: stretch;
  gap: 0;
  /* Opaque card so the bottom text-fade gradient can blend cleanly
     into a known colour in both themes (was 3.5%-white, which let
     the widget bg show through and left the fade gradient painting
     a hard white stripe in light mode). */
  background: var(--bg-2);
  border: 1px solid var(--border-soft);
  border-radius: 10px;
  overflow: hidden;
  min-height: 220px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.gpg-review-card:hover {
  border-color: var(--cyan);
  background: rgba(255, 106, 77, 0.05);
  box-shadow:
    0 0 0 1px rgba(255, 106, 77, 0.30) inset,
    0 8px 22px rgba(255, 106, 77, 0.18);
}
.gpg-review-poster {
  flex: 0 0 130px;
  width: 130px;
  background: var(--surface) center / cover no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none !important;
  position: relative;
}
.gpg-review-noposter {
  color: var(--muted);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.gpg-review-body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: 14px 16px;
  gap: 8px;
}
.gpg-review-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}
.gpg-review-game {
  font-family: var(--display);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--magenta, #ff8c73);
  text-decoration: none !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.gpg-review-game:hover { color: var(--cyan); }
.gpg-review-game .gpg-review-year { color: var(--muted); font-weight: 600; }
.gpg-review-text {
  flex: 1 1 auto;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--cream);
  opacity: 0.85;
  text-decoration: none !important;
  /* Multi-line clamp with a fade at the bottom edge so long reviews
     bleed out instead of cutting hard mid-word. */
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
  position: relative;
}
.gpg-review-text::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 1.6em;
  /* Match the card's bg (--bg-2) so the fade dissolves into the
     surface invisibly. var(--surface) was white in light mode and
     painted a visible white bar above the foot row. */
  background: linear-gradient(to bottom, transparent, var(--bg-2));
  pointer-events: none;
}
.gpg-review-card:hover .gpg-review-text { color: var(--cream); }
.gpg-review-foot {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--muted);
  border-top: 1px solid var(--border-soft);
  padding-top: 10px;
  margin-top: 2px;
}
.gpg-review-avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: inline-block;
  object-fit: cover;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  flex: 0 0 24px;
}
.gpg-review-avatar--ph { background: var(--surface); }
.gpg-review-user {
  font-family: var(--display);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--magenta, #ff8c73);
  text-decoration: none !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.gpg-review-user:hover { color: var(--cyan); }
.gpg-review-spacer { flex: 1 1 auto; }
.gpg-review-date { font-size: 11px; }
.gpg-review-rate {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.04em;
}
.gpg-review-rate--exceptional { color: #ff8c73; }
.gpg-review-rate--great       { color: #ff6a4d; }
.gpg-review-rate--good        { color: #d9472e; }
.gpg-review-rate--mixed       { color: #d9472e; }
.gpg-review-rate--poor        { color: #c2253a; }
.gpg-review-rate--muted       { color: var(--muted); }
@media (max-width: 700px) {
  .gpg-reviews--grid { grid-template-columns: 1fr; }
  .gpg-review-poster { flex-basis: 100px; width: 100px; }
  .gpg-review-card { min-height: 180px; }
  .gpg-review-text { -webkit-line-clamp: 4; }
}

/* ─────────────────────────────────────────────────────────────────────
   Latest Critics — asymmetric mosaic of game critic reviews. Each
   card uses the linked game's backdrop image (artwork → background →
   screenshot fallback) with the title + gameplay tag on top-left and
   a metacritic-style percentage chip pinned to the bottom-right.
   Row 1 = 3 small landscape cards. The 4th card becomes the hero:
   col-span 2 + row-span 2 so it dominates row 2. Cards 5-6 stack to
   its right as 2 small cards. Counts ≠ 6 still render — the grid
   gracefully wraps to extra rows. Mobile collapses to 2 cols.
   ───────────────────────────────────────────────────────────────── */
.gpg-critics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 200px;
  gap: 14px;
}
.gpg-critic-card {
  position: relative;
  display: block;
  border-radius: 12px;
  overflow: hidden;
  text-decoration: none !important;
  color: var(--cream) !important;
  border: 1px solid var(--border-soft);
  background: var(--surface);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
  min-height: 200px;
}
.gpg-critic-card:hover {
  border-color: var(--cyan);
  transform: translateY(-3px);
  box-shadow:
    0 0 0 1px rgba(255, 106, 77, 0.30) inset,
    0 12px 26px rgba(255, 106, 77, 0.22),
    0 6px 14px rgba(0, 0, 0, 0.55);
}
.gpg-critic-card--hero {
  grid-column: span 2;
  grid-row: span 2;
}
.gpg-critic-bg {
  position: absolute;
  inset: 0;
  background: var(--surface) center / cover no-repeat;
  transition: transform 0.4s ease, filter 0.3s ease;
}
.gpg-critic-card:hover .gpg-critic-bg {
  transform: scale(1.04);
  filter: brightness(1.04) saturate(1.08);
}
/* Dark veil so title text stays readable on bright backdrops */
.gpg-critic-veil {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.10) 0%, rgba(0, 0, 0, 0.0) 30%, rgba(0, 0, 0, 0.0) 50%, rgba(0, 0, 0, 0.70) 100%),
    linear-gradient(90deg, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0) 60%);
  pointer-events: none;
}
.gpg-critic-meta {
  position: absolute;
  left: 16px;
  right: 16px;
  top: 14px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 4px;
  pointer-events: none;
}
.gpg-critic-title {
  font-family: var(--display);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.2;
  color: #fff;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8);
  /* 2-line clamp */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.gpg-critic-card--hero .gpg-critic-title {
  font-size: 28px;
}
.gpg-critic-tag {
  font-family: var(--display);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.78);
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.8);
}
.gpg-critic-card--hero .gpg-critic-tag { font-size: 13px; }
.gpg-critic-score {
  position: absolute;
  right: 14px;
  bottom: 12px;
  z-index: 2;
  padding: 4px 10px;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.60);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border: 1px solid rgba(255, 255, 255, 0.10);
  font-family: var(--display);
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 0.02em;
  line-height: 1;
  color: var(--cream);
}
.gpg-critic-card--hero .gpg-critic-score {
  font-size: 28px;
  padding: 8px 14px;
  bottom: 18px;
  right: 18px;
}
.gpg-critic-score--exceptional { color: #ff8c73; border-color: rgba(255, 140, 115, 0.40); }
.gpg-critic-score--great       { color: #ff6a4d; border-color: rgba(255, 106, 77, 0.40); }
.gpg-critic-score--good        { color: #d9472e; border-color: rgba(217, 71, 46, 0.35); }
.gpg-critic-score--mixed       { color: #d9472e; border-color: rgba(217, 71, 46, 0.40); }
.gpg-critic-score--poor        { color: #c2253a; border-color: rgba(194, 37, 58, 0.40); }
.gpg-critic-score--muted       { color: var(--muted); }
@media (max-width: 980px) {
  .gpg-critics { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 170px; }
  /* Hero card stays 2-cols × 2-rows but the grid is only 2 cols now,
     so it just becomes the full-width header card. */
  .gpg-critic-card--hero { grid-column: span 2; grid-row: span 2; }
  .gpg-critic-card--hero .gpg-critic-title { font-size: 24px; }
  .gpg-critic-card--hero .gpg-critic-score { font-size: 24px; }
}
@media (max-width: 560px) {
  .gpg-critics { grid-template-columns: 1fr; grid-auto-rows: 160px; }
  .gpg-critic-card--hero { grid-column: 1; grid-row: span 2; min-height: 320px; }
}

/* ─────────────────────────────────────────────────────────────────────
   Latest News — auto-fill grid of editorial cards. Each card shows
   a thumbnail (16:9), a 2-line title and a date+author subline. A
   small tag chip overlays the thumbnail (game title for critic items,
   "Post" for blog entries) so admins can see source mix at a glance.
   List view collapses to horizontal rows for sidebar/narrow widgets.
   ───────────────────────────────────────────────────────────────── */
.gpg-news--grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
}
.gpg-news--list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.gpg-news-card {
  display: flex;
  flex-direction: column;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid var(--border-soft);
  border-radius: 10px;
  overflow: hidden;
  text-decoration: none !important;
  color: var(--cream) !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, transform 0.2s ease;
}
.gpg-news-card:hover {
  border-color: var(--cyan);
  background: rgba(255, 106, 77, 0.06);
  transform: translateY(-3px);
  box-shadow:
    0 0 0 1px rgba(255, 106, 77, 0.35) inset,
    0 10px 24px rgba(255, 106, 77, 0.22),
    0 4px 10px rgba(0, 0, 0, 0.55);
}
.gpg-news-img {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: var(--surface) center / cover no-repeat;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-size 0.35s ease, filter 0.25s ease;
}
.gpg-news-card:hover .gpg-news-img {
  background-size: 106% auto;
  filter: brightness(1.06) saturate(1.08);
}
.gpg-news-noimg {
  color: var(--muted);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.gpg-news-tag {
  position: absolute;
  bottom: 8px;
  left: 8px;
  z-index: 2;
  padding: 3px 8px;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.70);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--cream);
  font-family: var(--display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  max-width: calc(100% - 16px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gpg-news-tag--critic { color: var(--cyan); border-color: rgba(255, 106, 77, 0.40); }
.gpg-news-tag--post   { color: #d9472e;    border-color: rgba(217, 71, 46, 0.40); }
.gpg-news-meta {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 14px 14px;
}
.gpg-news-title {
  font-family: var(--display);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.35;
  color: var(--cream);
  /* 2-line clamp */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color 0.2s ease;
}
.gpg-news-card:hover .gpg-news-title { color: var(--cyan); }
.gpg-news-sub {
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 0.02em;
}
/* List view — image left, meta right */
.gpg-news--list .gpg-news-card {
  flex-direction: row;
  align-items: stretch;
}
.gpg-news--list .gpg-news-img {
  flex: 0 0 130px;
  width: 130px;
  aspect-ratio: 16 / 10;
}
.gpg-news--list .gpg-news-meta { flex: 1 1 auto; min-width: 0; padding: 10px 14px; }
.gpg-news--list .gpg-news-title { font-size: 12px; }
.gpg-news--list .gpg-news-tag { bottom: 6px; left: 6px; font-size: 9px; padding: 2px 6px; }
@media (max-width: 700px) {
  .gpg-news--grid { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
  .gpg-news--list .gpg-news-img { flex-basis: 100px; width: 100px; }
}

/* ─────────────────────────────────────────────────────────────────────
   Last Added Lists — auto-fill card grid of user-curated lists.
   Each card has a 16:10 cover hero + body (name + summary excerpt +
   author chip). Adapts to widget width via auto-fill minmax.
   ───────────────────────────────────────────────────────────────── */
.gpg-ll-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
}
.gpg-ll-card {
  display: flex;
  flex-direction: column;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid var(--border-soft);
  border-radius: 10px;
  overflow: hidden;
  text-decoration: none !important;
  color: var(--cream) !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, transform 0.2s ease;
}
.gpg-ll-card:hover {
  border-color: var(--cyan);
  background: rgba(255, 106, 77, 0.06);
  transform: translateY(-3px);
  box-shadow:
    0 0 0 1px rgba(255, 106, 77, 0.30) inset,
    0 10px 24px rgba(255, 106, 77, 0.22);
}
.gpg-ll-cover {
  width: 100%;
  aspect-ratio: 16 / 10;
  background: var(--surface) center / cover no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  transition: background-size 0.35s ease, filter 0.25s ease;
}
.gpg-ll-card:hover .gpg-ll-cover {
  background-size: 106% auto;
  filter: brightness(1.05) saturate(1.06);
}
/* Strip variant — mirrors /lists ListCard.jsx (`.gxl-card-posters`).
   4-col grid of 2:3 poster panes with a darken-to-bottom shade and
   subtle dividers. Uses <img> tags so DevTools can show 404s. */
.gpg-ll-cover--strip {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background: rgba(0, 0, 0, 0.35);
  aspect-ratio: auto;          /* let the 2:3 panes set the height */
}
.gpg-ll-cover--strip .gpg-ll-cover-pane {
  position: relative;
  aspect-ratio: 2 / 3;
  background: rgba(255, 255, 255, 0.03);
  border-right: 1px solid rgba(0, 0, 0, 0.4);
  overflow: hidden;
}
.gpg-ll-cover--strip .gpg-ll-cover-pane:last-child { border-right: 0; }
.gpg-ll-cover--strip .gpg-ll-cover-pane img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: filter 0.25s ease, transform 0.35s ease;
}
.gpg-ll-cover--strip .gpg-ll-cover-shade {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, transparent 60%, rgba(0, 0, 0, 0.55) 100%);
}
.gpg-ll-card:hover .gpg-ll-cover--strip .gpg-ll-cover-pane img {
  filter: brightness(1.06) saturate(1.06);
}
.gpg-ll-nocover {
  color: var(--muted);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.gpg-ll-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 14px 14px;
  flex: 1 1 auto;
  min-width: 0;
}
.gpg-ll-name {
  font-family: var(--display);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.25;
  color: var(--cream);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color 0.2s ease;
}
.gpg-ll-card:hover .gpg-ll-name { color: var(--cyan); }
.gpg-ll-sum {
  font-size: 12px;
  line-height: 1.55;
  color: rgba(231, 238, 247, 0.78);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.gpg-ll-meta {
  margin-top: auto;
  padding-top: 8px;
  border-top: 1px solid var(--border-soft);
  font-size: 11px;
  color: var(--muted);
}
.gpg-ll-author {
  font-family: var(--display);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--magenta, #ff8c73);
}
@media (max-width: 700px) {
  .gpg-ll-grid { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
  .gpg-ll-name { font-size: 13px; }
}

/* ─────────────────────────────────────────────────────────────────────
   Release Countdown — 2×2 grid of upcoming games. Each card has a
   backdrop image with a dark gradient overlay; the title + release
   date sit top-left and a live "days / hours / minutes" digit row
   spans the bottom. JS engine (main.js) updates digits every second
   from a `data-gpg-countdown` ISO timestamp on the card.
   ───────────────────────────────────────────────────────────────── */
.gpg-rc-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: 220px;
  gap: 14px;
}
.gpg-rc-card {
  position: relative;
  display: block;
  border-radius: 12px;
  overflow: hidden;
  text-decoration: none !important;
  color: var(--cream) !important;
  border: 1px solid var(--border-soft);
  background: var(--surface);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.gpg-rc-card:hover {
  border-color: var(--cyan);
  transform: translateY(-3px);
  box-shadow:
    0 0 0 1px rgba(255, 106, 77, 0.30) inset,
    0 12px 26px rgba(255, 106, 77, 0.22),
    0 6px 14px rgba(0, 0, 0, 0.55);
}
.gpg-rc-bg {
  position: absolute;
  inset: 0;
  background: var(--surface) center / cover no-repeat;
  transition: transform 0.4s ease, filter 0.3s ease;
}
.gpg-rc-card:hover .gpg-rc-bg {
  transform: scale(1.04);
  filter: brightness(1.05) saturate(1.06);
}
.gpg-rc-veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.20) 50%, rgba(0, 0, 0, 0.65) 100%);
  pointer-events: none;
}
.gpg-rc-meta {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 18px 20px;
  pointer-events: none;
}
.gpg-rc-title {
  font-family: var(--display);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.2;
  color: #fff;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.85);
  /* 1-line ellipsis (title sits next to date) */
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.gpg-rc-date {
  margin-top: 4px;
  font-size: 13px;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.85);
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.7);
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, 0.45);
  text-underline-offset: 3px;
}

/* Countdown digit row: DAYS | HOURS | MINUTES, each unit is a stack
   of 2-3 glassy digit panels with a small label underneath. Matches
   the screenshot style — frosted-glass tiles on the bottom of each
   card. */
.gpg-rc-timer {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  margin-top: auto;
}
.gpg-rc-unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.gpg-rc-digits {
  display: inline-flex;
  gap: 2px;
}
.gpg-rc-digit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 36px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 4px;
  font-family: var(--display);
  font-size: 26px;
  font-weight: 700;
  line-height: 1;
  color: #fff;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.gpg-rc-label {
  font-family: var(--display);
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.65);
}
.gpg-rc-sep {
  font-size: 28px;
  color: rgba(255, 255, 255, 0.35);
  line-height: 36px;
  padding-bottom: 14px;
}
@media (max-width: 900px) {
  .gpg-rc-grid { grid-template-columns: 1fr; grid-auto-rows: 200px; }
  .gpg-rc-title { font-size: 19px; }
  .gpg-rc-digit { width: 24px; height: 32px; font-size: 22px; }
  .gpg-rc-sep { font-size: 24px; padding-bottom: 13px; }
}

/* ─────────────────────────────────────────────────────────────────────
   Hero Banner — full-width cinematic slider. Each slide uses the
   game's cover as a heavily blurred, darkened backdrop and lays the
   poster + title block on top. Prev/next chevrons + dot pagination,
   optional autoplay driven by main.js.
   ───────────────────────────────────────────────────────────────── */
.gpg-hero {
  position: relative;
  width: 100%;
  /* Slightly taller than before so the trailer can grow without
     squeezing the poster or content beside it. */
  height: clamp(360px, 52vh, 600px);
  border-radius: 10px;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--border-soft);
}
.gpg-hero-track { position: absolute; inset: 0; }
.gpg-hero-slide {
  position: absolute;
  inset: 0;
  background: var(--surface) center / cover no-repeat;
  display: flex;
  align-items: center;
  gap: 36px;
  padding: 40px 56px;
  opacity: 0;
  transform: scale(1.02);
  transition: opacity 0.6s ease, transform 0.8s ease;
  pointer-events: none;
}
.gpg-hero-slide.is-active { opacity: 1; transform: none; pointer-events: auto; z-index: 2; }
/* Darken + blur the cover background so the title block reads on
   any cover. We layer the blur on a pseudo-element so the underlying
   background-image keeps its crisp clip but the visible bg blurs. */
.gpg-hero-slide::before {
  content: '';
  position: absolute;
  inset: 0;
  background: inherit;
  background-size: cover;
  /* Light blur — keeps the artwork legible while still softening
     the edges enough that the title block stays readable. */
  filter: blur(6px) saturate(1.05);
  transform: scale(1.03);                  /* hide blur edge bleeding */
  z-index: 0;
}
.gpg-hero-slide::after {
  content: '';
  position: absolute;
  inset: 0;
  /* Soft side-vignette only — the middle is almost transparent so
     the cover art comes through, edges keep just enough dim for the
     prev/next chevrons + side text to stay legible. */
  background: linear-gradient(120deg, rgba(2, 8, 16, 0.55) 0%, rgba(2, 8, 16, 0.12) 50%, rgba(2, 8, 16, 0.55) 100%);
  z-index: 1;
}
.gpg-hero-poster {
  flex: 0 0 auto;
  width: 200px;
  aspect-ratio: 2 / 3;
  background: var(--surface) center / cover no-repeat;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 106, 77, 0.20);
  position: relative;
  z-index: 2;
}
/* Trailer slot — sits to the right of the content block. Only
   rendered when the admin enabled trailer mode AND the game has an
   attached YouTube/Vimeo video. Slide is layout-flex, so the trailer
   gets its own column without crowding the poster + content.
   Sized to grow when there's room: at desktop widths it occupies
   ~46% of the hero, far more present than the old 360px box. */
.gpg-hero-trailer {
  flex: 1 1 540px;
  max-width: 640px;
  min-width: 360px;
  align-self: center;
  aspect-ratio: 16 / 9;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow:
    0 24px 50px rgba(0, 0, 0, 0.60),
    0 0 0 1px rgba(255, 106, 77, 0.22),
    0 0 60px rgba(255, 106, 77, 0.10);
  position: relative;
  z-index: 2;
  background: #000;
}
.gpg-hero-trailer iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  /* The iframe still autoplays muted, but the absolute <a> overlay
     above it captures all clicks (YouTube's own UI is suppressed). */
  pointer-events: none;
}
/* Click overlay — routes clicks to the gp_video single page while the
   video keeps autoplaying behind it. Reveals a soft gradient + play
   chip + caption on hover so the click target is discoverable. */
.gpg-hero-trailer-link {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  align-items: flex-end;
  gap: 10px;
  padding: 14px 16px;
  color: var(--cream);
  text-decoration: none !important;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.72) 0%, rgba(0, 0, 0, 0.30) 35%, rgba(0, 0, 0, 0) 70%);
  opacity: 0;
  transition: opacity 0.22s ease;
}
.gpg-hero-trailer:hover .gpg-hero-trailer-link,
.gpg-hero-trailer-link:focus-visible {
  opacity: 1;
}
.gpg-hero-trailer-play {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background: var(--cyan);
  color: #0e0f13;
  box-shadow: 0 6px 16px rgba(255, 106, 77, 0.45);
  transition: transform 0.18s ease;
}
.gpg-hero-trailer-link:hover .gpg-hero-trailer-play { transform: scale(1.06); }
.gpg-hero-trailer-cap {
  /* Push the caption to the right edge of the trailer — play chip
     stays on the left, label hugs the right corner. */
  margin-left: auto;
  text-align: right;
  min-width: 0;
  max-width: 60%;
  font-family: var(--display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.85);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Tighter content lane when a trailer is on screen — the trailer
   becomes the visual anchor, content sits as supporting copy. */
.gpg-hero-slide.has-trailer .gpg-hero-content { max-width: 340px; flex: 0 1 auto; }
.gpg-hero-slide.has-trailer .gpg-hero-poster   { width: 180px; }
.gpg-hero-slide.has-trailer .gpg-hero-title    { font-size: clamp(22px, 2.6vw, 36px); }
.gpg-hero-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  max-width: 600px;
  color: var(--cream);
}
.gpg-hero-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--display);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cyan);
}
.gpg-hero-meta .gpg-hero-tag,
.gpg-hero-meta .gpg-hero-year { opacity: 0.9; }
.gpg-hero-meta .gpg-hero-rate {
  color: #ff6a4d;
  font-weight: 800;
  letter-spacing: 0.05em;
}
.gpg-hero-title {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(26px, 4vw, 44px);
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.1;
  color: var(--cream);
  text-shadow: 0 4px 18px rgba(0, 0, 0, 0.7);
}
.gpg-hero-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 999px;
  background: var(--cyan);
  color: #0e0f13 !important;
  font-family: var(--display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none !important;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
  box-shadow: 0 6px 18px rgba(255, 106, 77, 0.35);
}
.gpg-hero-cta:hover {
  transform: translateY(-1px);
  background: #ff8c73;
  box-shadow: 0 10px 22px rgba(255, 106, 77, 0.45);
}
/* Nav arrows — float over the hero, hide on first/last via JS */
.gpg-hero-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.20);
  border-radius: 999px;
  background: rgba(14, 15, 19, 0.55);
  backdrop-filter: blur(6px);
  color: var(--cream);
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.gpg-hero-nav:hover { background: var(--cyan); color: #0e0f13; border-color: var(--cyan); }
.gpg-hero-nav--prev { left: 16px; }
.gpg-hero-nav--next { right: 16px; }
.gpg-hero-dots {
  position: absolute;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  display: flex;
  gap: 8px;
}
.gpg-hero-dot {
  width: 26px;
  height: 4px;
  border: 0;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.25);
  cursor: pointer;
  padding: 0;
  transition: background 0.2s ease, width 0.3s ease;
}
.gpg-hero-dot.is-active { background: var(--cyan); width: 36px; }
.gpg-hero-dot:hover { background: rgba(255, 255, 255, 0.50); }
@media (max-width: 1180px) {
  .gpg-hero-trailer { flex-basis: 440px; min-width: 320px; }
  .gpg-hero-slide.has-trailer .gpg-hero-content { max-width: 280px; }
  .gpg-hero-slide.has-trailer .gpg-hero-poster { width: 160px; }
}
@media (max-width: 980px) {
  /* Trailer becomes the headline — drop the poster when space is
     tight so the video stays generously sized. */
  .gpg-hero-slide.has-trailer .gpg-hero-poster { display: none; }
  .gpg-hero-trailer { flex-basis: 460px; }
  .gpg-hero-slide.has-trailer .gpg-hero-content { max-width: 320px; }
}
@media (max-width: 780px) {
  .gpg-hero { height: auto; min-height: 360px; }
  .gpg-hero-slide { flex-direction: column; align-items: flex-start; padding: 24px; gap: 18px; justify-content: flex-end; }
  .gpg-hero-poster { width: 130px; }
  .gpg-hero-slide.has-trailer .gpg-hero-poster { display: none; }
  .gpg-hero-nav { width: 36px; height: 36px; }
  .gpg-hero-trailer { flex-basis: auto; width: 100%; min-width: 0; max-width: 100%; }
  .gpg-hero-slide.has-trailer .gpg-hero-content { max-width: 100%; }
}

/* ─────────────────────────────────────────────────────────────────────
   New Arrivals — flat grid version of the same IGDB-style card used
   by Recently Visited. Auto-fill keeps the cards around 150-170 px
   wide so a full-width widget shows 7-9 covers per row instead of
   stretching just 5 across the page.
   ───────────────────────────────────────────────────────────────── */
.gpg-la-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 16px;
}
.gpg-la-grid .gpg-rr-card {
  display: flex;
  flex-direction: column;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid var(--border-soft);
  border-radius: 10px;
  overflow: hidden;
  text-decoration: none !important;
  color: var(--cream) !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, transform 0.2s ease;
}
.gpg-la-grid .gpg-rr-card:hover {
  border-color: var(--cyan);
  background: rgba(255, 106, 77, 0.06);
  transform: translateY(-3px);
  box-shadow:
    0 0 0 1px rgba(255, 106, 77, 0.35) inset,
    0 10px 24px rgba(255, 106, 77, 0.22),
    0 4px 10px rgba(0, 0, 0, 0.55);
}
.gpg-la-grid .gpg-rr-poster {
  width: 100%;
  aspect-ratio: 2 / 3;
  border: 0;
  border-radius: 0;
  background: var(--surface) center / cover no-repeat;
  position: relative;
  overflow: hidden;
  transition: background-size 0.35s ease, filter 0.25s ease;
}
.gpg-la-grid .gpg-rr-card:hover .gpg-rr-poster {
  background-size: 106% auto;
  filter: brightness(1.06) saturate(1.08);
}
.gpg-la-grid .gpg-rr-meta {
  padding: 10px 12px 12px;
  gap: 6px;
  display: flex;
  flex-direction: column;
}
.gpg-la-grid .gpg-rr-title {
  font-family: var(--display);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-align: left;
  color: var(--cream);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color 0.2s ease;
}
.gpg-la-grid .gpg-rr-card:hover .gpg-rr-title { color: var(--cyan); }
.gpg-la-grid .gpg-rr-rate-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  margin: 0;
  font-size: 10px;
}
.gpg-la-grid .gpg-rr-genre {
  flex: 1 1 auto;
  min-width: 0;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 10px;
  text-transform: none;
  letter-spacing: 0;
}
.gpg-la-grid .gpg-rr-rating {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 11px;
  font-weight: 700;
}
.gpg-la-grid .gpg-rr-rating .gpg-rr-star { font-size: 12px; line-height: 1; }
.gpg-la-grid .gpg-rr-rating .gpg-rr-star--empty { color: rgba(255, 255, 255, 0.25); }
@media (max-width: 700px) {
  .gpg-la-grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 12px; }
}

/* ─────────────────────────────────────────────────────────────────────
   Recently Visited — horizontal slider with prev/next arrow buttons
   (no scrollbar). Catalog-style cards: fixed 140×210 poster, rating
   chip overlaid on the bottom-left, centered title underneath.
   Outer wrapper anchors the absolute-positioned nav arrows.
   ───────────────────────────────────────────────────────────────── */
.gpg-rv-slider {
  position: relative;
}
.gpg-recent-visited {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  overflow-y: hidden;
  /* Generous vertical gutter so the hover cyan glow (28px blur) has
     room inside the track's clip rect without being shaved at the top
     or bleeding into the section title above. */
  padding: 18px 2px;
  scroll-snap-type: x proximity;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}
/* Hide the scrollbar — slider is driven by the arrow buttons */
.gpg-recent-visited::-webkit-scrollbar { display: none; height: 0; width: 0; }
.gpg-recent-visited { scrollbar-width: none; -ms-overflow-style: none; }

/* Arrow buttons — float over the track, slightly hanging off the edge */
.gpg-rv-nav {
  position: absolute;
  top: 101px;               /* center on 200px poster (18 + 100 - 18 = 100, +1px border) */
  z-index: 5;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: rgba(21, 23, 29, 0.85);
  color: var(--cream);
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease,
              transform 0.18s ease, opacity 0.18s ease;
}
.gpg-rv-nav:hover {
  color: #0e0f13;
  background: var(--cyan);
  border-color: var(--cyan);
  transform: translateY(-1px);
}
.gpg-rv-nav[hidden] { display: none; }
.gpg-rv-nav--prev { left: -14px; }
.gpg-rv-nav--next { right: -14px; }
@media (max-width: 700px) {
  .gpg-rv-nav { top: 84px; width: 32px; height: 32px; }   /* 18 + 165/2 - 16 */
  .gpg-rv-nav--prev { left: -6px; }
  .gpg-rv-nav--next { right: -6px; }
}
/* IGDB-style card — solid surface chrome, poster on top, meta in
   a padded footer (title + genre/rating row). No transform on hover;
   the whole card lights up via border + shadow instead so the track's
   overflow clip doesn't shave the lift. */
.gpg-recent-visited .gpg-rr-card {
  flex: 0 0 152px;
  width: 152px;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid var(--border-soft);
  border-radius: 8px;
  overflow: hidden;
  text-decoration: none !important;
  color: var(--cream) !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.gpg-recent-visited .gpg-rr-card:hover {
  border-color: var(--cyan);
  background: rgba(255, 106, 77, 0.06);
  box-shadow:
    0 0 0 1px rgba(255, 106, 77, 0.35) inset,
    0 6px 18px rgba(255, 106, 77, 0.22);
}
.gpg-recent-visited .gpg-rr-poster {
  width: 100%;
  height: 200px;                 /* IGDB-ish square-tall cover */
  aspect-ratio: auto;
  border: 0;
  border-radius: 0;
  background: var(--surface) center / cover no-repeat;
  position: relative;
  overflow: hidden;
  box-shadow: none;
  transition: background-size 0.35s ease, filter 0.25s ease;
}
.gpg-recent-visited .gpg-rr-card:hover .gpg-rr-poster {
  background-size: 106% auto;
  filter: brightness(1.06) saturate(1.08);
}
.gpg-recent-visited .gpg-rr-meta {
  padding: 10px 10px 12px;
  gap: 6px;
}
.gpg-recent-visited .gpg-rr-title {
  font-family: var(--display);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-align: left;
  color: var(--cream);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color 0.2s ease;
}
.gpg-recent-visited .gpg-rr-card:hover .gpg-rr-title { color: var(--cyan); }
.gpg-recent-visited .gpg-rr-rate-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  margin: 0;
  font-size: 10px;
}
.gpg-recent-visited .gpg-rr-genre {
  flex: 1 1 auto;
  min-width: 0;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 10px;
  text-transform: none;
  letter-spacing: 0;
}
.gpg-recent-visited .gpg-rr-rating {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 11px;
  font-weight: 700;
}
.gpg-recent-visited .gpg-rr-rating .gpg-rr-star { font-size: 12px; line-height: 1; }
.gpg-recent-visited .gpg-rr-rating .gpg-rr-star--empty { color: rgba(255, 255, 255, 0.25); }
@media (max-width: 700px) {
  .gpg-recent-visited .gpg-rr-card { flex: 0 0 124px; width: 124px; }
  .gpg-recent-visited .gpg-rr-poster { height: 165px; }
}

/* Rating + genre row (used by Recently Visited cards) */
.gpg-rr-rate-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 2px;
}
.gpg-rr-genre {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 11px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gpg-rr-rating {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: baseline;
  gap: 3px;
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
}
.gpg-rr-rating .gpg-rr-star { font-size: 13px; line-height: 1; }
.gpg-rr-rating--exceptional { color: #ff8c73; }
.gpg-rr-rating--great       { color: #ff6a4d; }
.gpg-rr-rating--good        { color: #d9472e; }
.gpg-rr-rating--mixed       { color: #d9472e; }
.gpg-rr-rating--poor        { color: #c2253a; }
.gpg-rr-rating--muted       { color: var(--muted); }
/* List view squeezes the rating row */
.gpg-recent-released--list .gpg-rr-rate-row { gap: 6px; }
.gpg-recent-released--list .gpg-rr-genre   { font-size: 10px; }
.gpg-recent-released--list .gpg-rr-rating  { font-size: 11px; }
.gpg-rr-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  /* min-width:0 lets the card actually shrink inside its grid track,
     so long titles can be clamped instead of pushing the column wider
     and breaking the row's uniform height. */
  min-width: 0;
  text-decoration: none !important;
  color: var(--cream) !important;
  transition: transform 0.15s, opacity 0.15s;
}
.gpg-rr-card:hover { transform: translateY(-3px); }
.gpg-rr-card:hover .gpg-rr-title { color: var(--cyan); }
.gpg-rr-poster {
  aspect-ratio: 2 / 3;
  background: var(--surface) center / cover no-repeat;
  border: 1px solid var(--border-soft);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
}
.gpg-rr-noposter {
  color: var(--muted);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.gpg-rr-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.gpg-rr-title {
  font-family: var(--display);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--cream);
  /* 2-line clamp keeps every card's title block the same height, so
     long titles wrap inside the card instead of stretching the grid
     row to fit them (which made one card look 1.5× tall and pushed
     the date band over the next poster). */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  white-space: normal;
  line-height: 1.3;
  min-height: 2.6em;
  transition: color 0.15s;
}
.gpg-rr-date {
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
@media (max-width: 900px) { .gpg-recent-released--grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 700px) { .gpg-recent-released--grid { grid-template-columns: repeat(3, 1fr); gap: 10px; } }
@media (max-width: 480px) { .gpg-recent-released--grid { grid-template-columns: repeat(2, 1fr); } }
/* On narrow viewports every widget collapses to full width so the
   layout never produces tiny squished columns on phones. */
@media (max-width: 700px) {
  .gpg-home-widget {
    flex-basis: 100% !important;
    max-width: 100% !important;
  }
}

/* ============ RESPONSIVE ============ */
@media (max-width: 1100px) {
  .hero-grid { grid-template-columns: 130px 1fr; }
  .rate-panel { grid-column: 1 / -1; }
  .main-grid { grid-template-columns: 1fr; }
  .tag-rows { grid-template-columns: 1fr; }
  .filter-card { grid-template-columns: 1fr 1fr; }
  .rec-row { grid-template-columns: repeat(3, 1fr); }
  .video-grid { grid-template-columns: repeat(2, 1fr); }
  .age-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 900px) {
  /* ── Mobile drawer (menu panel slides from the LEFT) ─────────── */
  .menu-panel {
    position: fixed;
    top: 0; left: 0; right: auto; bottom: 0;
    width: 320px;
    max-width: 86vw;
    height: 100vh; height: 100dvh;
    padding: 60px 22px 32px;
    overflow-y: auto;
    border-top: none;
    border-bottom: none;
    border-right: 1px solid var(--border);
    transform: translateX(-100%);
    opacity: 1;
    visibility: hidden;
    transition: transform .3s ease, visibility 0s linear .3s;
    box-shadow: 22px 0 40px rgba(0, 0, 0, 0.45);
  }
  .menu-panel.open {
    transform: translateX(0);
    visibility: visible;
    transition: transform .3s ease, visibility 0s;
  }
  .menu-panel-inner { padding: 0; }
  .menu-close { display: grid; }
  .menu-nav,
  .menu-nav .nav-menu {
    flex-direction: column;
    gap: 6px;
    width: 100%;
  }
  .menu-nav .nav-menu li,
  .menu-nav .nav-menu li a,
  .menu-nav > a {
    width: 100%;
  }
  .menu-nav a,
  .menu-nav .nav-menu li a { display: block; }
}
@media (max-width: 700px) {
  .topbar-inner {
    flex-wrap: wrap;
    gap: 10px;
    padding: 12px 16px;
  }
  .topbar-search {
    order: 3;
    flex-basis: 100%;
    justify-content: stretch;
  }
  .topbar-search .gpg-search { max-width: none; }
  .topbar-actions { margin-left: auto; }
  .global-search { padding: 0 18px; }
  .page { padding: 0 18px 60px; }
  .hero-title { font-size: 28px; }
  .gh-title { font-size: 26px; }
  .hero-grid { grid-template-columns: 1fr; }
  .cover { width: 100%; max-width: 200px; margin: 0 auto; }
  .filter-card { grid-template-columns: 1fr; }
  .rec-row { grid-template-columns: repeat(2, 1fr); }
  .game-gallery { grid-template-columns: repeat(2, 1fr); }
  .video-grid { grid-template-columns: 1fr; }
  .gpg-games-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 14px; }
  .platforms-grid { grid-template-columns: repeat(2, 1fr); }
  .dev-row-block { grid-template-columns: 56px 1fr; gap: 16px; }
  .dev-list { grid-template-columns: 1fr; }
  .footer-cols { grid-template-columns: 1fr; }
  .post-card { grid-template-columns: 1fr; }
  .tabs { gap: 16px; overflow-x: auto; flex-wrap: nowrap; padding-bottom: 4px; }
  .tab { white-space: nowrap; font-size: 11px; }
  .dev-totals-num { font-size: 20px; }
}

/* ─────────────────────────────────────────────────────────────────────
   Author page — custom IGDB-style profile.
   Hero with marquee + avatar + tabs, 6-stat row, 2-col main/side
   layout with recently rated grid + recent reviews list, sidebar
   rating breakdown bar chart + member info card.
   ───────────────────────────────────────────────────────────────── */
.gpg-author {
  max-width: 1400px;
  margin: 0 auto 60px;
  padding: 0 16px;
}
.gpg-author-hero {
  position: relative;
  margin: 0 -16px 22px;
  padding: 22px 26px 18px;
  background: linear-gradient(180deg, rgba(255, 106, 77, 0.85) 0%, rgba(217, 71, 46, 0.92) 70%, var(--surface) 100%);
  overflow: hidden;
}
/* Top-rated game cover variant — show the chosen artwork with a
   subtle dark vignette for legibility. Marquee is suppressed since
   the cover art already does the visual storytelling. */
.gpg-author-hero.has-bg {
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
.gpg-author-hero.has-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0.55) 60%, var(--surface) 100%);
  z-index: 1;
}
.gpg-author-hero.has-bg .gpg-author-marquee { display: none; }
.gpg-author-hero.has-bg .gpg-author-hero-row {
  position: relative;
  z-index: 2;
  margin-top: 0;          /* no marquee = no extra top spacing */
}
.gpg-author-marquee {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 28px;
  padding: 18px 26px 0;
  font-family: var(--display);
  font-size: 56px;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.18);
  white-space: nowrap;
  overflow: hidden;
  pointer-events: none;
}
.gpg-author-hero-row {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 22px;
  margin-top: 64px;
  flex-wrap: wrap;
}
.gpg-author-avatar {
  width: 110px;
  height: 110px;
  border-radius: 50%;
  border: 3px solid var(--cyan);
  background: var(--surface);
  object-fit: cover;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.55);
}
.gpg-author-username {
  font-family: var(--display);
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #fff;
}
.gpg-author-tabs {
  display: flex;
  gap: 6px;
  margin-left: auto;
  flex-wrap: wrap;
}
.gpg-author-tabs a {
  display: inline-block;
  padding: 10px 18px;
  border-radius: 6px;
  font-family: var(--display);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.75);
  text-decoration: none !important;
  transition: background 0.18s ease, color 0.18s ease;
}
.gpg-author-tabs a:hover { background: rgba(255, 255, 255, 0.10); color: #fff; }
.gpg-author-tabs a.is-active {
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
  border-bottom: 2px solid var(--cyan);
  border-radius: 6px 6px 0 0;
}

/* Stats row */
.gpg-author-stats {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 14px;
  margin-bottom: 24px;
}
.gpg-author-stat {
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid var(--border-soft);
  border-radius: 10px;
  padding: 16px 14px;
  text-align: center;
}
.gpg-author-stat-num {
  font-family: var(--display);
  font-size: 28px;
  font-weight: 700;
  color: var(--cream);
  line-height: 1;
}
.gpg-author-stat-label {
  margin-top: 6px;
  font-family: var(--display);
  font-size: 11px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--muted);
}

/* 2-col layout */
.gpg-author-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 24px;
  align-items: start;
}
.gpg-author-block { margin-bottom: 28px; }
.gpg-author-h2 {
  font-family: var(--display);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--cream);
  margin: 0 0 14px;
  text-transform: none;
}
.gpg-author-empty {
  padding: 30px;
  text-align: center;
  border: 1px dashed var(--border-soft);
  border-radius: 10px;
  color: var(--muted);
  font-size: 13px;
}

/* Recently rated grid */
.gpg-author-rated-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 14px;
}
.gpg-author-rated-card {
  display: flex;
  flex-direction: column;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid var(--border-soft);
  border-radius: 8px;
  overflow: hidden;
  text-decoration: none !important;
  color: var(--cream) !important;
  transition: border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}
.gpg-author-rated-card:hover {
  border-color: var(--cyan);
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(255, 106, 77, 0.20);
}
.gpg-author-rated-poster {
  width: 100%;
  aspect-ratio: 2 / 3;
  background: var(--surface) center / cover no-repeat;
}
.gpg-author-rated-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 10px 10px;
}
.gpg-author-rated-name {
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.gpg-author-rated-score {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 13px;
  font-weight: 800;
}
.gpg-author-rated-score--exceptional { color: #ff8c73; }
.gpg-author-rated-score--great       { color: #ff6a4d; }
.gpg-author-rated-score--good        { color: #d9472e; }
.gpg-author-rated-score--mixed       { color: #d9472e; }
.gpg-author-rated-score--poor        { color: #c2253a; }
.gpg-author-rated-score--muted       { color: var(--muted); }

/* Recent reviews */
.gpg-author-reviews { display: flex; flex-direction: column; gap: 12px; }
.gpg-author-review-card {
  display: flex;
  gap: 14px;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid var(--border-soft);
  border-radius: 10px;
  padding: 12px;
}
.gpg-author-review-poster {
  flex: 0 0 92px;
  width: 92px;
  height: 138px;
  background: var(--surface) center / cover no-repeat;
  border-radius: 6px;
}
.gpg-author-review-body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.gpg-author-review-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.gpg-author-review-game {
  font-family: var(--display);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--magenta, #ff8c73);
  text-decoration: none !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.gpg-author-review-game:hover { color: var(--cyan); }
.gpg-author-review-text {
  font-size: 12.5px;
  line-height: 1.55;
  color: rgba(231, 238, 247, 0.85);
  text-decoration: none !important;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.gpg-author-review-card:hover .gpg-author-review-text { color: var(--cream); }
.gpg-author-review-foot {
  margin-top: auto;
  font-size: 11px;
  color: var(--muted);
}

/* Sidebar cards */
.gpg-author-card {
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid var(--border-soft);
  border-radius: 10px;
  padding: 16px 18px;
  margin-bottom: 16px;
}
.gpg-author-card-title {
  font-family: var(--display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cream);
  margin-bottom: 12px;
}

/* Rating breakdown */
.gpg-author-breakdown { display: flex; flex-direction: column; gap: 5px; }
.gpg-author-bd-row {
  display: grid;
  grid-template-columns: 22px 1fr 28px;
  align-items: center;
  gap: 8px;
}
.gpg-author-bd-key {
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  text-align: right;
}
.gpg-author-bd-track {
  height: 8px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.06);
  overflow: hidden;
}
.gpg-author-bd-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 0.3s ease;
}
.gpg-author-bd-fill--exceptional { background: #ff8c73; }
.gpg-author-bd-fill--great       { background: #ff6a4d; }
.gpg-author-bd-fill--good        { background: #d9472e; }
.gpg-author-bd-fill--mixed       { background: #d9472e; }
.gpg-author-bd-fill--poor        { background: #c2253a; }
.gpg-author-bd-fill--muted       { background: var(--muted); }
.gpg-author-bd-cnt {
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
}
.gpg-author-bd-total {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--border-soft);
  font-size: 11px;
  color: var(--muted);
  text-align: center;
}

/* Badges grid — earned circles glow with tier ring colour, locked
   ones grey out + soft blur. Tiers come from admin registry:
     normal=green, rare=blue, epic=purple, legendary=orange. */
/* Each criteria gets its own row with a small label on the left */
.gpg-author-badge-row {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 18px;
  align-items: center;
  padding: 12px 0;
  border-top: 1px solid rgba(255,255,255,0.06);
}
.gpg-author-badge-row:first-of-type { border-top: 0; padding-top: 4px; }
.gpg-author-badge-row-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  padding-left: 10px;
  border-left: 3px solid var(--accent, #ff6a4d);
}
@media (max-width: 720px) {
  .gpg-author-badge-row { grid-template-columns: 1fr; gap: 8px; }
}

.gpg-author-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-bottom: 0;
}
.gpg-author-badge {
  position: relative;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  border: 5px solid #9aa1ab;
  background: rgba(255, 255, 255, 0.05);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
  cursor: help;
}
.gpg-author-badge img { width: 100%; height: 100%; object-fit: cover; }
.gpg-author-badge-icon { font-size: 42px; line-height: 1; color: #fff; }
.gpg-author-badge.is-earned[data-tier="normal"]    { border-color: #22c55e; box-shadow: 0 0 26px rgba(34, 197, 94, 0.40); }
.gpg-author-badge.is-earned[data-tier="rare"]      { border-color: #3b82f6; box-shadow: 0 0 26px rgba(59, 130, 246, 0.45); }
.gpg-author-badge.is-earned[data-tier="epic"]      { border-color: #a855f7; box-shadow: 0 0 26px rgba(168, 85, 247, 0.50); }
.gpg-author-badge.is-earned[data-tier="legendary"] { border-color: #f97316; box-shadow: 0 0 32px rgba(249, 115, 22, 0.55); }
.gpg-author-badge.is-earned:hover {
  transform: translateY(-3px) scale(1.05);
  filter: brightness(1.10) saturate(1.10);
}
.gpg-author-badge.is-locked {
  border-color: rgba(255, 255, 255, 0.18);
  filter: grayscale(1) brightness(0.55) blur(0.5px);
  opacity: 0.7;
}
.gpg-author-badge.is-locked:hover { opacity: 0.95; filter: grayscale(1) brightness(0.7); }
.gpg-author-badges-hint {
  font-size: 12px;
  color: var(--muted);
  margin-top: 12px;
}

/* Tab panes — only one visible at a time (JS toggles `hidden`) */
.gpg-author-pane { display: block; }
.gpg-author-pane[hidden] { display: none; }

/* Lists pane — author's own published lists, 4-poster collage card */
.gpg-author-lists-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
}
.gpg-author-list-card {
  display: flex;
  flex-direction: column;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid var(--border-soft);
  border-radius: 10px;
  overflow: hidden;
  text-decoration: none !important;
  color: var(--cream) !important;
  transition: border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}
.gpg-author-list-card:hover {
  border-color: var(--cyan);
  transform: translateY(-3px);
  box-shadow: 0 10px 22px rgba(255, 106, 77, 0.20);
}
.gpg-author-list-cover {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background: rgba(0, 0, 0, 0.35);
}
.gpg-author-list-pane {
  position: relative;
  aspect-ratio: 2 / 3;
  overflow: hidden;
  border-right: 1px solid rgba(0, 0, 0, 0.4);
}
.gpg-author-list-pane:last-child { border-right: 0; }
.gpg-author-list-pane img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.gpg-author-list-body {
  padding: 12px 14px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.gpg-author-list-name {
  font-family: var(--display);
  font-size: 14px;
  font-weight: 700;
  color: var(--cream);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gpg-author-list-sum {
  font-size: 12px;
  color: rgba(231, 238, 247, 0.78);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── Contributions tab — Score card + Leaderboard + Rules ── */
.gpg-author-score-card {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 24px;
  align-items: center;
  padding: 22px;
  background: linear-gradient(135deg, rgba(255, 106, 77, 0.10) 0%, rgba(255, 140, 115, 0.10) 100%);
  border: 1px solid var(--border-soft);
  border-radius: 12px;
}
.gpg-author-score-total {
  text-align: center;
  padding: 14px;
  background: rgba(0, 0, 0, 0.25);
  border-radius: 10px;
}
.gpg-author-score-num {
  font-family: var(--display);
  font-size: 48px;
  font-weight: 800;
  color: var(--cyan);
  line-height: 1;
  text-shadow: 0 4px 12px rgba(255, 106, 77, 0.30);
}
.gpg-author-score-label {
  margin-top: 8px;
  font-family: var(--display);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.gpg-author-score-breakdown {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.gpg-author-score-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid var(--border-soft);
  border-radius: 6px;
  font-size: 13px;
}
.gpg-author-score-key {
  font-family: var(--display);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--cream);
}
.gpg-author-score-val {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  color: var(--muted);
}
.gpg-author-score-val small { font-size: 11px; opacity: 0.7; }
.gpg-author-score-val strong { color: var(--cream); font-size: 14px; font-weight: 700; }

/* Leaderboard window */
.gpg-author-lb {
  display: flex;
  flex-direction: column;
  background: rgba(0, 0, 0, 0.20);
  border: 1px solid var(--border-soft);
  border-radius: 10px;
  overflow: hidden;
}
.gpg-author-lb-row {
  display: grid;
  grid-template-columns: 90px 40px 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 10px 18px;
  border-bottom: 1px solid var(--border-soft);
  text-decoration: none !important;
  color: var(--cream) !important;
  transition: background 0.15s ease;
}
.gpg-author-lb-row:last-child { border-bottom: 0; }
.gpg-author-lb-row:hover { background: rgba(255, 255, 255, 0.04); }
.gpg-author-lb-row.is-self {
  background: rgba(255, 106, 77, 0.10);
  border-left: 3px solid var(--cyan);
  padding-left: 15px;
}
.gpg-author-lb-row.is-self:hover { background: rgba(255, 106, 77, 0.16); }
.gpg-author-lb-rank {
  font-family: var(--display);
  font-size: 14px;
  font-weight: 700;
  color: var(--muted);
  letter-spacing: 0.04em;
}
.gpg-author-lb-row.is-self .gpg-author-lb-rank { color: var(--cyan); }
.gpg-author-lb-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  overflow: hidden;
  display: inline-flex;
}
.gpg-author-lb-avatar img { width: 100%; height: 100%; object-fit: cover; }
.gpg-author-lb-name {
  font-family: var(--display);
  font-size: 14px;
  font-weight: 600;
  color: var(--magenta, #ff8c73);
  text-decoration: underline;
  text-decoration-color: rgba(255, 140, 115, 0.35);
  text-underline-offset: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gpg-author-lb-row:hover .gpg-author-lb-name { color: var(--cyan); }
.gpg-author-lb-row.is-self .gpg-author-lb-name { color: var(--cyan); }
.gpg-author-lb-score {
  font-family: var(--display);
  font-size: 15px;
  font-weight: 800;
  color: var(--cream);
}
.gpg-author-lb-total {
  margin-top: 12px;
  text-align: center;
  font-size: 12px;
  color: var(--muted);
}

/* Scoring rules cards */
.gpg-author-rules {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.gpg-author-rule {
  padding: 16px 14px;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid var(--border-soft);
  border-radius: 8px;
  text-align: center;
  font-size: 12px;
  color: var(--muted);
}
.gpg-author-rule strong {
  display: block;
  font-family: var(--display);
  font-size: 24px;
  font-weight: 800;
  color: var(--cyan);
  margin-bottom: 4px;
}
@media (max-width: 700px) {
  .gpg-author-score-card { grid-template-columns: 1fr; }
  .gpg-author-lb-row { grid-template-columns: 80px 32px 1fr auto; gap: 10px; padding: 10px 12px; }
  .gpg-author-rules { grid-template-columns: 1fr; }
}

/* Member info card */
.gpg-author-meta-row {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 0;
  font-size: 12px;
}
.gpg-author-meta-key { color: var(--muted); }
.gpg-author-meta-val { color: var(--cream); font-weight: 600; }

/* =====================================================================
 * IMDb-style Hero Banner (.gpg-hero--imdb)
 * ---------------------------------------------------------------------
 * Movie-theme reskin: replaces the full-width slider with a split
 * layout — left stage (active backdrop/trailer + meta + prev/next),
 * right "Up next" rail (vertical list of remaining picks).
 * Active slide markup (.gpg-hero-slide) is unchanged from the base
 * file so the existing JS activator keeps working untouched.
 * ===================================================================== */
.gpg-hero--imdb {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  overflow: visible;
  /* Override the base hero's clamp() height — the stage owns sizing
     via its own aspect-ratio, so this wrapper just stretches to fit. */
  height: auto;
  min-height: 0;
}
.gpg-hero--imdb.has-upnext {
  grid-template-columns: minmax(0, 1fr) 340px;
}

/* Stage — left column. The base .gpg-hero-slide rules already give us
   absolute layering inside .gpg-hero-track; we just reset the wrapper
   chrome so the stage looks like its own card. */
.gpg-hero--imdb .gpg-hero-stage {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 8px;
  overflow: hidden;
  background: var(--bg);
  border: 1px solid var(--border-soft);
  min-height: 320px;
}
.gpg-hero--imdb .gpg-hero-track {
  position: absolute;
  inset: 0;
}
/* Override base hero slide overlays so this layout's foot block can
   sit directly on the artwork without the centred dark veil + the
   blurred ::before backdrop (we want crisp artwork edge-to-edge). */
.gpg-hero--imdb .gpg-hero-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transform: none;
  transition: opacity 0.4s ease, visibility 0s linear 0.4s;
  background-size: cover;
  background-position: center;
  display: block;
  padding: 0;
  gap: 0;
}
.gpg-hero--imdb .gpg-hero-slide.is-active {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.4s ease;
  z-index: 1;
}
/* Nuke the base blurred ::before — its `background:inherit` was
   re-painting the slide's backdrop softly behind the trailer iframe,
   producing the dimmed fringe on either side of the centred video. */
.gpg-hero--imdb .gpg-hero-slide::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(14, 15, 19, 0.20) 0%,
    rgba(14, 15, 19, 0.55) 55%,
    rgba(14, 15, 19, 0.95) 100%);
  filter: none;
  transform: none;
  z-index: 1;
}
/* Also drop the base side-vignette so the foot block isn't darkened
   on both edges — our bottom gradient already does the legibility job. */
.gpg-hero--imdb .gpg-hero-slide::after {
  display: none;
}

/* Trailer iframe — fill the stage; click overlay anchor sits above.
   Base CSS gives .gpg-hero-trailer a max-width:640px flex item with
   a cyan glow border. Reset every one of those properties so the
   iframe genuinely spans the full stage. */
.gpg-hero--imdb .gpg-hero-trailer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  min-width: 0;
  flex: none;
  aspect-ratio: auto;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  margin: 0;
  background: #000;
  z-index: 0;
  align-self: stretch;
}
.gpg-hero--imdb .gpg-hero-trailer iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  pointer-events: none;
}
.gpg-hero--imdb .gpg-hero-trailer-link {
  position: absolute;
  inset: 0;
  z-index: 3;
}
.gpg-hero--imdb .gpg-hero-trailer-play,
.gpg-hero--imdb .gpg-hero-trailer-cap {
  display: none; /* foot block has its own play button */
}

/* Foot row — poster + play CTA + title/meta laid out as a flex row
   anchored to the slide's bottom. Single row prevents the column
   pile-up where a long title would overflow upward into the poster. */
.gpg-hero--imdb .gpg-hero-foot {
  position: absolute;
  left: 22px;
  right: 22px;
  bottom: 22px;
  display: flex;
  align-items: flex-end;
  gap: 18px;
  z-index: 2;
}
.gpg-hero--imdb .gpg-hero-poster,
.gpg-hero--imdb .gpg-hero-slide.has-trailer .gpg-hero-poster {
  flex: 0 0 auto;
  width: 100px;
  height: 150px;
  aspect-ratio: auto;
  background-size: cover;
  background-position: top center;
  background-color: rgba(0, 0, 0, 0.4);
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  /* Strip the base's cyan rim — pure cinematic shadow only. */
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.55);
}
/* Big circular play button — sits between the poster and the meta.
   The triangle is an inline SVG (rendered in PHP) — `fill:currentColor`
   means the hover colour swap is just a `color:` change. SVG sizing is
   explicit (20×20 viewBox) so flex + line-height never interfere. */
/* Big circular play button. Base `.gpg-hero-cta` (line ~1108) ships
   a pill style with `color:#0e0f13 !important` and a cyan background
   — both need !important to override here, otherwise SVG fill (which
   tracks currentColor) renders as dark ink invisible on the backdrop. */
.gpg-hero--imdb .gpg-hero-cta {
  flex: 0 0 auto !important;
  width: 60px !important;
  height: 60px !important;
  padding: 0 !important;
  border-radius: 50% !important;
  background: rgba(0, 0, 0, 0.55) !important;
  border: 2px solid #ff6a4d !important;
  color: #ff6a4d !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-bottom: 28px;
  font-size: 0 !important;
  letter-spacing: 0 !important;
  text-decoration: none !important;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45) !important;
  transition: background 0.18s ease, transform 0.18s ease, color 0.18s ease, border-color 0.18s ease !important;
  line-height: 1 !important;
}
.gpg-hero--imdb .gpg-hero-cta:hover {
  background: #ff6a4d !important;
  color: #0e0f13 !important;
  transform: scale(1.06) !important;
  box-shadow: 0 10px 22px rgba(255, 106, 77, 0.45) !important;
}
.gpg-hero--imdb .gpg-hero-cta svg {
  display: block !important;
  width: 20px !important;
  height: 20px !important;
  margin-left: 3px; /* optical centring — triangle's visual mass sits left of geometric centre */
  fill: currentColor !important;
  flex-shrink: 0;
}
.gpg-hero--imdb .gpg-hero-content,
.gpg-hero--imdb .gpg-hero-slide.has-trailer .gpg-hero-content {
  flex: 1 1 auto;
  max-width: none;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-bottom: 14px;
}
/* Stage foot text — ALWAYS light on the dark backdrop gradient,
   regardless of the page's dark/light theme. The slide overlay is
   always dark (`linear-gradient(... rgba(14, 15, 19,*))`), so binding to
   --cream would flip the title to dark ink under light theme and
   make it disappear into the gradient. Literal cream colour fixes it. */
.gpg-hero--imdb .gpg-hero-title,
.gpg-hero--imdb .gpg-hero-slide.has-trailer .gpg-hero-title {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: 0.01em;
  margin: 0;
  color: #e9e7e1;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.95), 0 0 4px rgba(0, 0, 0, 0.85);
  line-height: 1.2;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.gpg-hero--imdb .gpg-hero-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  font-size: 13px;
  color: #e9e7e1;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.85);
}
.gpg-hero--imdb .gpg-hero-tag,
.gpg-hero--imdb .gpg-hero-year {
  color: rgba(233, 231, 225, 0.78);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
  font-size: 12px;
}
.gpg-hero--imdb .gpg-hero-rate {
  color: #ff6a4d;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.02em;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.gpg-hero--imdb .gpg-hero-rate > span {
  font-size: 14px;
}

/* Stage prev / next arrows — vertically centred on the stage edges. */
.gpg-hero--imdb .gpg-hero-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 42px;
  height: 60px;
  border: 0;
  background: rgba(0, 0, 0, 0.45);
  color: rgba(255, 255, 255, 0.9);
  cursor: pointer;
  display: grid;
  place-items: center;
  z-index: 4;
  transition: background 0.15s ease, color 0.15s ease;
}
.gpg-hero--imdb .gpg-hero-nav--prev { left: 0; border-radius: 0 6px 6px 0; }
.gpg-hero--imdb .gpg-hero-nav--next { right: 0; border-radius: 6px 0 0 6px; }
.gpg-hero--imdb .gpg-hero-nav:hover {
  background: rgba(0, 0, 0, 0.7);
  color: var(--gold);
}

/* Up next rail — right column. */
.gpg-hero-upnext {
  background: var(--surface, rgba(255, 255, 255, 0.02));
  border: 1px solid var(--border-soft);
  border-radius: 8px;
  padding: 16px;
  max-height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.gpg-hero-upnext-head {
  font-family: var(--serif);
  font-size: 18px;
  font-weight: 600;
  color: var(--gold);
  margin-bottom: 2px;
}
.gpg-hero-upnext-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow-y: auto;
  flex: 1 1 auto;
}
.gpg-hero-upnext-list::-webkit-scrollbar { width: 6px; }
.gpg-hero-upnext-list::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
.gpg-hero-upnext-item {
  list-style: none;
  margin: 0;
  padding: 0;
}
/* Active item — hidden, since it's already on the stage. */
.gpg-hero-upnext-item.is-active { display: none; }

.gpg-hero-upnext-btn {
  width: 100%;
  display: grid;
  grid-template-columns: 116px 1fr;
  gap: 10px;
  align-items: center;
  background: transparent;
  border: 0;
  padding: 0;
  text-align: left;
  cursor: pointer;
  color: var(--cream);
  transition: color 0.15s ease;
}
.gpg-hero-upnext-btn:hover { color: var(--gold); }
.gpg-hero-upnext-thumb {
  position: relative;
  width: 116px;
  height: 66px;
  border-radius: 6px;
  background-color: var(--elev);
  background-size: cover;
  background-position: center;
  overflow: hidden;
  /* Subtle gold rim + soft shadow so the thumbnails read as
     distinct surfaces against the dark rail bg. Hover bumps the
     rim to a stronger gold + adds a glow so the active target is
     obvious without changing the thumb's footprint. */
  border: 1px solid rgba(255, 106, 77, 0.30);
  box-shadow:
    0 4px 10px rgba(0, 0, 0, 0.45),
    inset 0 0 0 1px rgba(0, 0, 0, 0.20);
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}
.gpg-hero-upnext-btn:hover .gpg-hero-upnext-thumb {
  border-color: #ff6a4d;
  box-shadow:
    0 6px 16px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(255, 106, 77, 0.45),
    0 0 16px rgba(255, 106, 77, 0.28);
  transform: translateY(-1px);
}
/* Soft dark veil so the play icon stays legible over any backdrop. */
.gpg-hero-upnext-thumb::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.10), rgba(0,0,0,0.40));
  pointer-events: none;
}
.gpg-hero-upnext-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: rgba(255, 255, 255, 0.95);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 1; /* sit above the gradient veil */
  filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.7));
}
.gpg-hero-upnext-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.gpg-hero-upnext-name {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.25;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.gpg-hero-upnext-sub {
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Mobile — stack stage above the rail; shrink foot row items. */
@media (max-width: 880px) {
  .gpg-hero--imdb.has-upnext { grid-template-columns: 1fr; }
  .gpg-hero-upnext { max-height: 360px; }
  .gpg-hero--imdb .gpg-hero-foot {
    left: 14px;
    right: 14px;
    bottom: 14px;
    gap: 12px;
  }
  .gpg-hero--imdb .gpg-hero-poster { width: 70px; height: 105px; }
  .gpg-hero--imdb .gpg-hero-cta {
    width: 44px !important;
    height: 44px !important;
    margin-bottom: 16px;
  }
  .gpg-hero--imdb .gpg-hero-cta svg {
    width: 16px !important;
    height: 16px !important;
  }
  .gpg-hero--imdb .gpg-hero-title { font-size: 17px; }
  .gpg-hero--imdb .gpg-hero-meta { font-size: 10px; gap: 8px; }
}

/* Recently Visited — person/char favourite chip (replaces the rating
   chip for non-title items; they can't be rated 1-10 but they can be
   favourited). Same alignment + sizing as the rating chip. */
.gpg-rr-fav {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 700;
  color: #ff6a4d;
  white-space: nowrap;
}
.gpg-rr-fav svg {
  flex-shrink: 0;
  display: block;
}
.gpg-rr-fav-val { line-height: 1; }

/* =====================================================================
 * Born Today widget — round-avatar grid of people whose birthday is
 * today (any year), ranked by popularity (meter ASC).
 * ===================================================================== */
.gpg-born-today {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 14px;
}
.gpg-bt-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 8px 4px;
  border-radius: 8px;
  text-decoration: none;
  color: inherit;
  transition: background 0.18s ease, transform 0.18s ease;
}
.gpg-bt-card:hover {
  background: rgba(255, 106, 77, 0.06);
  transform: translateY(-2px);
}
.gpg-bt-avatar {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  background-color: var(--surface, rgba(255, 255, 255, 0.04));
  background-size: cover;
  background-position: center top;
  border: 2px solid var(--border-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.gpg-bt-card:hover .gpg-bt-avatar {
  border-color: var(--gold);
  box-shadow: 0 0 0 1px var(--gold), 0 6px 16px rgba(0, 0, 0, 0.35);
}
.gpg-bt-initial {
  font-family: var(--serif);
  font-size: 30px;
  font-weight: 600;
  color: var(--muted);
}
.gpg-bt-meta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  text-align: center;
  min-width: 0;
  width: 100%;
}
.gpg-bt-name {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.25;
  color: var(--cream);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.gpg-bt-card:hover .gpg-bt-name { color: var(--gold); }
.gpg-bt-age {
  font-size: 10px;
  color: var(--muted);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* ─────────────────────────────────────────────────────────────────────
   Recently Released (list view) — keep the cards inside the widget.
   The track was `1fr` (= minmax(auto, 1fr)), so it could not shrink below
   the card's min-content width. `.gpg-rr-title` is nowrap, and with the
   default `min-width: auto` its min-content is the full, unwrapped title —
   a long game name pushed the track past the column and the cards spilled
   out over the panel's right border. minmax(0, …) plus min-width: 0 down
   the flex chain lets the title ellipsize instead. */
.gpg-recent-released--list { grid-template-columns: minmax(0, 1fr); }
.gpg-recent-released .gpg-rr-card,
.gpg-recent-released .gpg-rr-meta,
.gpg-recent-released .gpg-rr-title { min-width: 0; }