/* =========================================================
   game punk — design tokens
   ========================================================= */
:root {
  /* Brand colours (Retro Pixel Punk palette) */
  --gp-bg:        #2D1B4E;
  --gp-surface:   #3A2560;
  --gp-border:    #4E3778;
  --gp-purple:    #FF00A0;
  --gp-pink:      #00F0FF;
  --gp-yellow:    #FF6B35;
  --gp-text:      #FFF8E7;
  --gp-muted:     #B9A9D9;
  /* Lightened from the original #7A6A9E, which sat at ~3.2:1 against
     --gp-bg — under the 4.5:1 WCAG AA floor for the small text
     (footer notes, price-checked timestamps, chart dates) it's used on.
     #9689BC keeps the same muted-lavender hue at ~4.8:1. */
  --gp-muted-2:   #9689BC;

  /* Glow tints — same hues as --gp-purple/--gp-pink, used for hover/focus glows */
  --gp-purple-glow: rgba(255, 0, 160, 0.35);
  --gp-pink-glow:   rgba(0, 240, 255, 0.25);

  /* Type */
  --font-display: "Archivo Black", "Arial Black", sans-serif;
  --font-body:    "Inter", -apple-system, sans-serif;
  --font-mono:    "Space Mono", "Courier New", monospace;

  /* Layout */
  --wrap-width: 1080px;
  --radius-md: 10px;
  --radius-lg: 16px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--gp-bg);
  color: var(--gp-text);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}

/* Faint fixed atmosphere glows so the hero's neon feel carries through the
   rest of the page instead of stopping dead at the hero's bottom edge.
   Kept far below anything that would touch text contrast. */
body {
  position: relative;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(480px 360px at 92% 0%, rgba(255, 0, 160, 0.07), transparent 70%),
    radial-gradient(420px 320px at 4% 60%, rgba(0, 240, 255, 0.05), transparent 70%);
}

.wrap {
  max-width: var(--wrap-width);
  margin: 0 auto;
  padding: 0 24px;
}

a { color: inherit; text-decoration: none; }

/* =========================================================
   Focus visibility (keyboard nav)
   ========================================================= */
a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--gp-yellow);
  outline-offset: 2px;
  border-radius: 4px;
}

/* =========================================================
   Logo (used in header + footer)
   ========================================================= */
.logo-link {
  display: inline-block;
  line-height: 0;
  transition: opacity 0.15s ease;
}

.logo-link:hover { opacity: 0.85; }

.site-logo {
  height: 46px;
  width: auto;
  display: block;
}

.site-logo-small { height: 30px; }

.about-logo-wrap {
  display: flex;
  justify-content: center;
  margin: 8px 0 40px;
}

.about-logo {
  height: 120px;
  width: auto;
  display: block;
}

/* =========================================================
   Header
   ========================================================= */
.site-header {
  border-bottom: 1px solid var(--gp-border);
  padding: 20px 0;
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.main-nav {
  display: flex;
  gap: 28px;
  font-size: 14px;
  font-weight: 500;
}

.main-nav a {
  color: var(--gp-text);
  opacity: 0.85;
  transition: opacity 0.15s ease, color 0.15s ease;
}

.main-nav a:hover {
  opacity: 1;
  color: var(--gp-yellow);
}

/* =========================================================
   Hero
   ========================================================= */
.hero {
  position: relative;
  padding: 72px 0 48px;
  text-align: left;
  overflow: hidden;
  background-color: var(--gp-bg);
}

/* Ambient gradient texture over the solid canvas — stronger over the left side,
   where the kicker/subtitle/search-bar text sits, so it never has to fight the
   hero-title-img's own colour for contrast. */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      90deg,
      rgba(45, 27, 78, 0.88) 0%,
      rgba(45, 27, 78, 0.72) 42%,
      rgba(45, 27, 78, 0.22) 100%
    ),
    linear-gradient(
      180deg,
      rgba(45, 27, 78, 0.84) 0%,
      rgba(45, 27, 78, 0.92) 100%
    );
  z-index: 0;
}

.hero .wrap {
  position: relative;
  z-index: 1;
}

.hero-kicker {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gp-yellow);
  margin: 0 0 14px;
}

.hero-title {
  margin: 0 0 20px;
  max-width: 920px;
}

/* The title graphic already has its own uneven transparency baked in from the
   spray-paint art itself — this radial mask adds a deliberate, even fade so the
   image's rectangular edges dissolve into the hero's canvas rather than cutting
   off hard, letting the paint-burst rays trail off instead of stopping dead. */
.hero-title-img {
  display: block;
  width: 100%;
  height: auto;
  mask-image: radial-gradient(ellipse 55% 55% at 50% 50%, #000 28%, rgba(0, 0, 0, 0.5) 52%, transparent 82%);
  -webkit-mask-image: radial-gradient(ellipse 55% 55% at 50% 50%, #000 28%, rgba(0, 0, 0, 0.5) 52%, transparent 82%);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.hero-sub {
  font-size: 17px;
  color: var(--gp-muted);
  margin: 0 0 32px;
  max-width: 480px;
}

/* Scoped to the homepage hero specifically — Privacy/Terms/Error/StatusCode
   reuse .hero-sub for smaller subtitle text and shouldn't grow with this. */
.hero .hero-sub {
  font-size: 22px;
  font-weight: 500;
}

.search-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 520px;
}

.search-input-wrap {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
}

.search-input-icon {
  position: absolute;
  left: 16px;
  width: 17px;
  height: 17px;
  color: var(--gp-muted-2);
  pointer-events: none;
}

.search-input {
  width: 100%;
  background: var(--gp-surface);
  border: 1px solid var(--gp-border);
  border-radius: var(--radius-md);
  padding: 14px 16px 14px 42px;
  color: var(--gp-text);
  font-family: var(--font-body);
  font-size: 15px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.search-input::placeholder { color: var(--gp-muted-2); }

.search-input:focus {
  outline: none;
  border-color: var(--gp-purple);
  box-shadow: 0 0 0 3px var(--gp-purple-glow);
}

.search-btn {
  background: var(--gp-purple);
  color: var(--gp-text);
  border: none;
  border-radius: var(--radius-md);
  padding: 14px 24px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 15px;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.search-btn:hover {
  background: #D1008C;
  transform: translateY(-1px);
  box-shadow: 0 6px 18px var(--gp-purple-glow);
}

.search-btn:active { transform: translateY(0); }

.logo-link:focus-visible {
  outline: 2px solid var(--gp-yellow);
  outline-offset: 2px;
}

/* =========================================================
   Filters
   ========================================================= */
.filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 8px 0 24px;
}

.filter-pill {
  background: var(--gp-surface);
  border: 1px solid var(--gp-border);
  color: var(--gp-muted);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  padding: 7px 16px;
  border-radius: 20px;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.filter-pill:hover {
  border-color: var(--gp-purple);
  color: var(--gp-text);
}

.filter-pill:active { transform: scale(0.96); }

.filter-pill.is-active {
  background: var(--gp-purple);
  border-color: var(--gp-purple);
  color: var(--gp-text);
  box-shadow: 0 4px 14px var(--gp-purple-glow);
}

/* =========================================================
   Game grid + cards
   ========================================================= */
.game-section {
  margin-bottom: 40px;
}

.game-section:last-of-type {
  margin-bottom: 72px;
}

.game-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 14px;
}

.game-card {
  background: var(--gp-surface);
  border: 1px solid var(--gp-border);
  border-radius: var(--radius-lg);
  padding: 18px;
  display: flex;
  gap: 16px;
  min-width: 0;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.game-card:hover {
  border-color: var(--gp-purple);
  transform: translateY(-2px);
  box-shadow: 0 10px 28px -8px var(--gp-purple-glow), 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* .game-card sets display:flex, which otherwise beats the browser's
   default [hidden] { display: none } rule and keeps "hidden" cards visible. */
.game-card[hidden] {
  display: none;
}

.game-thumb {
  width: 72px;
  height: 72px;
  border-radius: 8px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 18px;
  color: var(--gp-bg);
}

.game-thumb.game-thumb-cover {
  object-fit: cover;
}

.game-info { flex: 1; min-width: 0; }

.game-info-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.game-title {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 15px;
  margin: 0;
  color: var(--gp-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.discount-badge {
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 9px;
  border-radius: 20px;
  background: var(--gp-pink);
  color: #123338;
  white-space: nowrap;
}

.preorder-badge {
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 9px;
  border-radius: 20px;
  background: var(--gp-purple);
  color: var(--gp-text);
  white-space: nowrap;
}

.game-meta {
  font-size: 12px;
  color: var(--gp-muted);
  margin: 4px 0 0;
}

.platform-tag {
  display: inline-block;
  padding: 2px 9px;
  border: 1px solid var(--gp-muted-2);
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--gp-muted);
}

.dlc-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 1px 6px;
  border-radius: 4px;
  background: var(--gp-border);
  color: var(--gp-muted);
  margin-right: 6px;
  vertical-align: middle;
}

.format-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 1px 6px;
  border-radius: 4px;
  background: var(--gp-border);
  color: var(--gp-muted);
  margin-left: 6px;
  vertical-align: middle;
}

.game-meta strong {
  color: var(--gp-text);
}

.game-price-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  font-family: var(--font-mono);
}

.price-was {
  font-size: 12px;
  color: var(--gp-muted-2);
  text-decoration: line-through;
}

.price-now {
  font-size: 18px;
  font-weight: 700;
  color: var(--gp-yellow);
}

.store-name {
  font-size: 11px;
  color: var(--gp-muted);
  font-family: var(--font-body);
}

/* =========================================================
   Empty state
   ========================================================= */
.empty-state {
  text-align: center;
  color: var(--gp-muted);
  font-size: 14px;
  padding: 48px 0 72px;
}

.empty-state-icon {
  width: 64px;
  height: auto;
  color: var(--gp-border);
  margin-bottom: 16px;
}

.empty-state-text {
  margin: 0;
}

/* =========================================================
   Footer
   ========================================================= */
.site-footer {
  border-top: 1px solid var(--gp-border);
  padding: 28px 0;
}

.footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}

.footer-notes {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-end;
}

.footer-note {
  font-size: 12px;
  color: var(--gp-muted-2);
  margin: 0;
}

.footer-note a {
  color: var(--gp-muted);
  text-decoration: underline;
}

.footer-note a:hover { color: var(--gp-text); }

/* =========================================================
   Motion preference
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

/* =========================================================
   Game detail page
   ========================================================= */
.game-page {
  padding-top: 32px;
  padding-bottom: 72px;
}

.back-link {
  display: inline-block;
  font-size: 13px;
  color: var(--gp-muted);
  margin-bottom: 24px;
  transition: color 0.15s ease;
}

.back-link:hover { color: var(--gp-text); }

.breadcrumb-trail { margin-bottom: 12px; }

.breadcrumb-trail ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 13px;
  color: var(--gp-muted);
}

.breadcrumb-trail li:not(:last-child)::after {
  content: "/";
  margin-left: 6px;
  color: var(--gp-muted);
}

.breadcrumb-trail a {
  color: var(--gp-muted);
  transition: color 0.15s ease;
}

.breadcrumb-trail a:hover { color: var(--gp-text); }

.breadcrumb-trail li[aria-current="page"] {
  color: var(--gp-text);
}

.breadcrumb-platform {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 9px;
  border: 1px solid var(--gp-muted-2);
  border-radius: 20px;
  color: var(--gp-muted);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.game-hero {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  padding-bottom: 32px;
  margin-bottom: 32px;
  border-bottom: 1px solid var(--gp-border);
}

.game-hero-thumb {
  width: 120px;
  height: 120px;
  border-radius: 14px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 34px;
  color: var(--gp-bg);
}

.game-hero-thumb.game-hero-cover {
  width: 120px;
  height: 160px;
  object-fit: contain;
  background: var(--gp-surface);
  border: 1px solid var(--gp-border);
}

.game-hero-title-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.game-hero-title {
  font-family: var(--font-display);
  font-size: clamp(28px, 4vw, 40px);
  margin: 0 0 6px;
  letter-spacing: -0.5px;
}

.rating-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 20px;
  background: var(--gp-yellow);
  color: var(--gp-bg);
}

.game-hero-meta {
  font-size: 14px;
  color: var(--gp-muted);
  margin: 0;
}

.game-hero-meta strong {
  color: var(--gp-text);
}

.genre-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

.genre-tag {
  font-size: 11px;
  font-weight: 500;
  padding: 3px 10px;
  border-radius: 20px;
  background: var(--gp-surface);
  border: 1px solid var(--gp-border);
  color: var(--gp-muted);
}

.game-hero-summary {
  font-size: 14px;
  line-height: 1.5;
  color: var(--gp-muted);
  margin: 12px 0 0;
  max-width: 640px;
}

.affiliate-note {
  font-size: 13px;
  color: var(--gp-muted-2);
  margin: 20px 0 0;
  max-width: 640px;
}

.external-offers-note {
  margin: -8px 0 16px;
}

.external-offers-list .price-row {
  opacity: 0.85;
  border-style: dashed;
}

.section-heading {
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  color: var(--gp-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0 0 16px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.section-heading::before {
  content: "";
  width: 4px;
  height: 14px;
  flex-shrink: 0;
  background: var(--gp-purple);
  border-radius: 2px;
}

.expand-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--gp-muted);
  cursor: pointer;
  border-radius: 50%;
  transition: color 0.15s ease, background 0.15s ease, transform 0.15s ease;
}

.expand-toggle:hover {
  color: var(--gp-text);
  background: var(--gp-surface);
}

.expand-toggle:active { transform: scale(0.88); }

.expand-arrow {
  width: 12px;
  height: 8px;
  transition: transform 0.15s ease;
}

.expand-toggle.is-expanded .expand-arrow {
  transform: rotate(180deg);
}

.price-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.price-row {
  display: grid;
  grid-template-columns: 56px 1fr auto auto auto;
  align-items: center;
  gap: 16px;
  background: var(--gp-surface);
  border: 1px solid var(--gp-border);
  border-radius: var(--radius-md);
  padding: 14px 18px;
}

.price-row.is-best {
  border-color: var(--gp-purple);
  background: linear-gradient(90deg, rgba(255, 0, 160, 0.08), var(--gp-surface) 60%);
  box-shadow: 0 0 0 1px rgba(255, 0, 160, 0.15), 0 8px 24px -10px var(--gp-purple-glow);
}

.price-row.is-unavailable {
  opacity: 0.55;
}

.unavailable-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 1px 6px;
  border-radius: 4px;
  background: var(--gp-border);
  color: var(--gp-muted);
  margin-left: 6px;
  vertical-align: middle;
}

.price-cta.is-disabled {
  background: var(--gp-border);
  color: var(--gp-muted);
  cursor: default;
}

.price-cta.is-disabled:hover {
  background: var(--gp-border);
  transform: none;
  box-shadow: none;
}

.price-rank {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  color: var(--gp-muted);
  text-align: center;
}

.price-rank-star {
  width: 10px;
  height: 10px;
}

.price-row.is-best .price-rank {
  color: var(--gp-bg);
  background: var(--gp-purple);
  border-radius: 20px;
  padding: 4px 0;
  font-size: 11px;
  text-transform: uppercase;
}

.price-store {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.price-store-name {
  font-size: 15px;
  font-weight: 600;
  color: var(--gp-text);
}

.price-checked {
  font-size: 11px;
  color: var(--gp-muted-2);
}

.price-discount {
  font-size: 12px;
  font-weight: 600;
  color: var(--gp-yellow);
  white-space: nowrap;
}

.price-discount.is-none { color: var(--gp-muted-2); }

.price-amount-group {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-family: var(--font-mono);
  white-space: nowrap;
}

.price-amount-was {
  font-size: 12px;
  color: var(--gp-muted-2);
  text-decoration: line-through;
}

.price-amount-usd {
  font-size: 12px;
  color: var(--gp-muted-2);
}

.price-approx {
  font-style: italic;
  font-size: 11px;
  font-weight: 400;
  margin-right: 3px;
}

.price-amount-now {
  font-size: 18px;
  font-weight: 700;
  color: var(--gp-yellow);
}

.price-cta {
  background: var(--gp-purple);
  color: var(--gp-text);
  font-size: 13px;
  font-weight: 600;
  padding: 8px 16px;
  border-radius: 8px;
  white-space: nowrap;
  transition: background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.price-cta:hover {
  background: #D1008C;
  transform: translateY(-1px);
  box-shadow: 0 4px 14px var(--gp-purple-glow);
}

.price-cta:active { transform: translateY(0); }

@media (max-width: 640px) {
  .price-row {
    grid-template-columns: 40px 1fr auto;
    grid-template-areas:
      "rank store store"
      "rank discount discount"
      "rank amount cta";
    row-gap: 6px;
    column-gap: 12px;
  }
  .price-rank { grid-area: rank; }
  .price-store { grid-area: store; }
  .price-discount { grid-area: discount; }
  /* min-width:0 lets the grid track shrink below the amount group's
     nowrap intrinsic width — without it, a wide value (e.g. the CheapShark
     rows' "$49.99 approx £41.22") refused to shrink and pushed .price-cta
     past the card edge instead of onto the same row. The USD/approx portion
     is also just supplementary context (the section intro already explains
     the conversion) — hiding it on narrow screens keeps the row to the GBP
     price alone, with plenty of room for Get deal beside it. */
  .price-amount-group { grid-area: amount; min-width: 0; }
  .price-amount-usd, .price-approx { display: none; }
  .price-cta { grid-area: cta; justify-self: end; align-self: center; }
}

.report-price-link {
  margin: 10px 0 0;
  font-size: 13px;
}

.report-price-link a {
  color: var(--gp-muted);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.report-price-link a:hover { color: var(--gp-text); }

.price-history-stats {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--gp-muted);
  margin: -8px 0 16px;
}

.admin-summary {
  font-family: var(--font-mono);
  font-size: 15px;
  color: var(--gp-text);
}

.admin-empty {
  font-size: 14px;
  color: var(--gp-muted);
}

.admin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  margin-bottom: 32px;
}

.admin-table th,
.admin-table td {
  text-align: left;
  padding: 8px 12px;
  border-bottom: 1px solid var(--gp-border);
}

.admin-table th {
  color: var(--gp-muted);
  font-weight: 600;
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 0.06em;
}

.admin-table td:not(:first-child),
.admin-table th:not(:first-child) {
  text-align: right;
  font-family: var(--font-mono);
}

/* Text labels ("Synced 2 hours ago"), not numbers — override the numeric
   right-align/mono styling above even though it's not the first column. */
.admin-table .admin-cell-label {
  text-align: left;
  font-family: var(--font-body);
  color: var(--gp-muted);
}

.price-history-stats strong {
  font-weight: 700;
}

.price-history-stats strong.is-low { color: var(--gp-yellow); }
.price-history-stats strong.is-high { color: var(--gp-pink); }

.price-chart-heading {
  margin-top: 44px;
}

.price-chart-card {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas:
    "axis chart"
    "gap  dates";
  column-gap: 14px;
  background: linear-gradient(180deg, rgba(255, 0, 160, 0.05), transparent 40%);
  border: 1px solid rgba(255, 0, 160, 0.4);
  border-radius: var(--radius-lg);
  padding: 20px;
}

.price-chart-axis {
  grid-area: axis;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex-shrink: 0;
}

.price-chart-axis-label {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  color: var(--gp-text);
  white-space: nowrap;
}

.price-chart-scroll {
  grid-area: chart;
  overflow: visible;
}

.price-chart-wrap {
  position: relative;
  height: 120px;
}

.price-chart {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.price-chart-line {
  fill: none;
  stroke: var(--gp-purple);
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.price-chart-fill {
  stroke: none;
  fill: var(--gp-purple);
  fill-opacity: 0.18;
}

/* A plain positioned div rather than an SVG <circle> — the chart's viewBox is
   stretched non-uniformly (preserveAspectRatio="none"), which would render a
   true SVG circle as a squashed ellipse. left/top percentages place this at
   the same point without inheriting that distortion. */
.price-chart-dot {
  position: absolute;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--gp-bg);
  border: 2px solid var(--gp-purple);
  transform: translate(-50%, -50%);
  transition: background 0.15s ease, border-color 0.15s ease;
}

.price-chart-dot:hover {
  background: var(--gp-yellow);
  border-color: var(--gp-yellow);
}

.price-chart-dates {
  grid-area: dates;
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--gp-muted-2);
}

/* =========================================================
   Game not found state
   ========================================================= */
.empty-game-state {
  max-width: 480px;
  padding: 48px 0 32px;
}

.empty-game-title {
  font-family: var(--font-display);
  font-size: clamp(28px, 4vw, 40px);
  margin: 0 0 12px;
  letter-spacing: -0.5px;
}

.empty-game-sub {
  font-size: 15px;
  color: var(--gp-muted);
  margin: 0 0 28px;
}

.empty-game-back {
  display: inline-block;
  font-size: 13px;
  color: var(--gp-muted);
  text-decoration: underline;
  transition: color 0.15s ease;
}

.empty-game-back:hover { color: var(--gp-text); }

/* =========================================================
   Small screens
   ========================================================= */
@media (max-width: 560px) {
  .header-inner { flex-direction: column; gap: 14px; align-items: flex-start; }
  .search-bar { flex-direction: column; }
  .game-grid { grid-template-columns: 1fr; }

  .game-hero {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }

  .game-hero-thumb,
  .game-hero-thumb.game-hero-cover {
    width: 96px;
    height: 96px;
  }
}

/* 2026 comparison-first redesign — background/surface/border stay the black
   comparison-first canvas, but the accent, text, and muted tones revert to the
   original Retro Pixel Punk brand palette (see the dead :root at the top of this
   file) instead of the lime-green scheme this section had drifted to.
   --gp-yellow (the primary accent slot — badges, prices, CTAs) is pink rather
   than the palette's own orange, per direct request. */
:root {
  --gp-bg: #070b0f;
  --gp-surface: #0d1319;
  --gp-surface-2: #111820;
  --gp-border: #202a34;
  --gp-text: #fff8e7;
  --gp-muted: #b9a9d9;
  --gp-muted-2: #7a6a9e;
  --gp-yellow: #ff00a0;
  --gp-purple: #ff00a0;
  --gp-pink: #00f0ff;
}

body { background: var(--gp-bg); }
.wrap { max-width: 1180px; }
.site-header { background: rgba(7,11,15,.94); border-bottom: 1px solid var(--gp-border); position: sticky; top: 0; z-index: 20; backdrop-filter: blur(18px); }
.header-inner { min-height: 70px; gap: 34px; }
.site-logo { width: 154px; height: auto; }
.wordmark { color:var(--gp-yellow); font:900 23px/1 'Archivo Black',sans-serif; letter-spacing:-1.5px; font-style:italic; }
.wordmark span { color:#fff; }
.wordmark-small { font-size:18px; }
.main-nav { margin-right: auto; gap: 24px; font-size: 12px; }
.header-actions { display: flex; gap: 17px; font-size: 12px; color: var(--gp-muted); }
.header-actions a:hover { color: var(--gp-yellow); }

.hero { padding: 0; background: var(--gp-bg); border-bottom: 1px solid var(--gp-border); }
.hero .wrap { min-height: 430px; display: grid; grid-template-columns: minmax(390px, 47%) 1fr; grid-template-rows: 1fr auto; position: relative; }
.hero::before { display: none; }
.hero-copy { align-self: center; padding: 36px 0 26px; position: relative; z-index: 2; }
.hero-kicker { color: var(--gp-purple); font-size: 11px; margin-bottom: 12px; }
.hero-title { display: flex; flex-direction: column; font-family: Impact,'Archivo Black',sans-serif; font-size: clamp(50px,5vw,70px); line-height: .86; letter-spacing: -1px; text-transform: uppercase; margin: 0 0 20px; }
.hero-title span,.hero-title strong { display:block; }
.hero-title strong { color: var(--gp-yellow); font-weight: inherit; }
.hero .hero-sub { font-size: 16px; line-height: 1.55; max-width: 410px; margin-bottom: 24px; }
.hero-art { position: absolute; inset: 0 0 72px 34%; background: linear-gradient(90deg,var(--gp-bg) 0%,transparent 28%),linear-gradient(0deg,var(--gp-bg) 0%,transparent 22%),url('/img/hero-punk-v2.png') 57% center/cover no-repeat; opacity:.96; }
.search-bar { max-width: 560px; padding: 4px; border: 1px solid #2c3742; background: rgba(13,19,25,.96); border-radius: 6px; }
.search-input { border: 0; background: transparent; padding: 13px 15px; }
.search-input:focus { box-shadow:none; border:0; }
.search-btn { border-radius:4px; min-width:112px; background:linear-gradient(135deg,#ff3fb5,#d1008c); }
.search-btn:hover { background:#d1008c; }
.trust-strip { grid-column:1/-1; display:grid; grid-template-columns:repeat(4,1fr); position:relative; z-index:3; border-top:1px solid var(--gp-border); padding:14px 10px; }
.trust-strip span { display:grid; grid-template-columns:30px 1fr; grid-template-rows:auto auto; font-size:12px; font-weight:600; }
.trust-strip b { grid-row:1/3; color:var(--gp-purple); font-size:22px; }
.trust-strip small { color:var(--gp-muted-2); font-size:10px; font-weight:400; margin-top:2px; }

@media (max-width:760px){
  .header-actions{display:none}.main-nav{gap:14px}.main-nav a:nth-child(n+3){display:none}
  .hero .wrap{grid-template-columns:1fr;min-height:540px}.hero-art{inset:0 0 118px 12%;opacity:.45}.hero-copy{padding-top:56px}.hero-title{font-size:58px}.trust-strip{grid-template-columns:1fr 1fr;gap:18px}.search-bar{flex-direction:row}
}

.home-content-head { display:flex; justify-content:space-between; align-items:end; padding-top:34px; }
/* Same fix as .game-card[hidden] above — the class's own display:flex otherwise
   beats the browser's default [hidden] { display:none } rule, which left the
   "Best selling games"/"Today's best deals" headings visibly stranded above
   search results even after site.js set hidden on them. */
.home-content-head[hidden] { display:none; }
.home-content-head h2,.platform-panel h2 { margin:0; font-family:var(--font-display); text-transform:uppercase; letter-spacing:-.02em; }
.home-content-head span { color:var(--gp-muted-2); font-size:12px; }
.filter-row { margin:18px 0 26px; padding-bottom:16px; border-bottom:1px solid var(--gp-border); }
.filter-pill { border-radius:4px; padding:8px 18px; background:transparent; }
.filter-pill.is-active { background:var(--gp-yellow); border-color:var(--gp-yellow); color:#071006; }
.section-heading { color:var(--gp-text); font-size:13px; margin-bottom:12px; }
.game-grid { grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }
.game-card { display:block; padding:0; overflow:hidden; border-radius:6px; position:relative; }
.game-card:hover { border-color:var(--gp-yellow); transform:translateY(-3px); box-shadow:0 16px 34px rgba(0,0,0,.3); }
.game-info { padding:14px; }
.game-info-top { min-height:38px; }
.game-title { font-size:14px; white-space:normal; line-height:1.25; }
.discount-badge,.preorder-badge { position:absolute; top:0; left:0; border-radius:3px; padding:5px 8px; background:var(--gp-yellow); color:#071006; font-weight:800; }
.game-meta { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.game-price-row { margin-top:10px; }
.price-now { color:var(--gp-yellow); }
.platform-panel { margin:56px 0 0; padding:34px; border:1px solid var(--gp-border); background:linear-gradient(120deg,#0d1319,#10151d); display:flex; justify-content:space-between; gap:30px; align-items:center; }
.eyebrow { color:var(--gp-purple); font-size:11px; letter-spacing:.12em; text-transform:uppercase; font-weight:700; margin:0 0 8px; }
.platform-tiles { display:flex; flex-wrap:wrap; gap:8px; }
.platform-tiles span { border:1px solid #303b46; border-radius:5px; padding:14px 20px; font:700 12px var(--font-mono); color:#dfe5e8; background:#0a0f14; }
.site-stats { display:grid; grid-template-columns:repeat(4,1fr); border:1px solid var(--gp-border); border-top:0; margin-bottom:60px; }
.site-stats span { padding:24px; display:flex; flex-direction:column; text-align:center; color:var(--gp-muted); font-size:11px; border-right:1px solid var(--gp-border); }
.site-stats span:last-child { border:0; }
.site-stats strong { color:var(--gp-text); font:700 28px var(--font-mono); }

.game-page { max-width:1080px; }
.back-link { display:none; }
.breadcrumb-trail { margin:4px 0 24px; }
.game-hero { display:grid; grid-template-columns:176px 1fr; gap:26px; padding:0 0 26px; align-items:start; }
.game-hero-thumb.game-hero-cover,.game-hero-thumb { width:176px; height:234px; border-radius:8px; object-fit:cover; border:1px solid var(--gp-border); box-shadow:0 16px 34px rgba(0,0,0,.45); }
.game-hero-title { font-family:var(--font-body); font-size:34px; letter-spacing:-1px; }
.game-hero-summary { max-width:580px; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.best-price-card { position:relative; display:grid; grid-template-columns:1.2fr 1fr auto auto; gap:24px; align-items:center; border:1px solid var(--gp-yellow); border-radius:6px; background:linear-gradient(100deg,rgba(255,0,160,.08),transparent 60%); padding:24px 22px; margin-bottom:28px; }
.best-price-label { position:absolute; left:0; top:-13px; background:var(--gp-yellow); color:#071006; padding:5px 13px; border-radius:3px 3px 0 0; font:800 10px var(--font-body); text-transform:uppercase; }
.best-price-store,.best-price-number,.best-price-format { display:flex; flex-direction:column; }
.best-price-store strong { font-size:18px; text-transform:uppercase; }
.best-price-card small { color:var(--gp-muted-2); font-size:10px; margin-top:5px; }
.best-price-format { font-size:12px; color:var(--gp-text); border:1px solid var(--gp-border); border-radius:6px; padding:10px 14px; background:rgba(245,247,248,.04); }
.best-price-number { color:var(--gp-yellow); font:700 30px var(--font-mono); }
.best-price-number small { color:var(--gp-yellow); text-transform:uppercase; }
.best-price-cta { display:flex; gap:24px; align-items:center; background:var(--gp-yellow); color:#071006; padding:14px 20px; border-radius:4px; font-size:13px; font-weight:800; text-transform:uppercase; }
.compare-heading span { color:var(--gp-muted-2); font-size:10px; font-weight:500; }
.price-list { gap:0; border:1px solid var(--gp-border); border-radius:6px; overflow:hidden; }
.price-row,.price-row.is-best { border:0; border-bottom:1px solid var(--gp-border); border-radius:0; background:var(--gp-surface); }
.price-row:last-child { border-bottom:0; }
.price-row.is-best { box-shadow:inset 3px 0 var(--gp-yellow); }
.price-row.is-best .price-rank { background:var(--gp-yellow); color:#071006; }
.price-cta { background:transparent; border:1px solid var(--gp-border); }
.price-cta:hover { background:var(--gp-purple); }
.price-chart-card { border-color:var(--gp-border); background:var(--gp-surface); }
.price-chart-line { stroke:var(--gp-yellow); }.price-chart-fill{fill:var(--gp-yellow)}.price-chart-dot{border-color:var(--gp-yellow)}

@media(max-width:900px){.game-grid{grid-template-columns:repeat(2,1fr)}.game-hero{grid-template-columns:120px 1fr}.game-hero-thumb.game-hero-cover,.game-hero-thumb{width:120px;height:160px}.best-price-card{grid-template-columns:1fr 1fr}.best-price-cta{justify-content:center}.platform-panel{align-items:flex-start;flex-direction:column}}
@media(max-width:560px){.game-grid{grid-template-columns:1fr 1fr}.game-thumb,.game-thumb.game-thumb-cover{height:auto}.game-info{padding:10px}.store-name{display:none}.game-hero{grid-template-columns:90px 1fr;gap:14px}.game-hero-thumb.game-hero-cover,.game-hero-thumb{width:90px;height:120px}.game-hero-title{font-size:24px}.game-hero-summary{display:none}.best-price-card{grid-template-columns:1fr}.platform-panel{padding:24px}.site-stats{grid-template-columns:1fr}.site-stats span{border-right:0;border-bottom:1px solid var(--gp-border)}}

/* Reference-matched platform and retailer marks */
.card-arrow { margin-left:auto; display:block; width:29px; height:29px; transition:transform .15s ease; }
.game-card:hover .card-arrow { transform:translateX(2px); }
.price-store-name .store-logo { margin-top:0; }

.platform-tiles .platform-logo { min-width:128px; min-height:54px; border:1px solid #303b46; border-radius:5px; padding:10px 16px; display:flex; align-items:center; justify-content:center; gap:10px; font:700 13px/1.05 var(--font-body); color:#f4f6f7; background:#0a0f14; text-align:left; }
.platform-logo b { font:700 18px/1 var(--font-body); color:#fff; white-space:nowrap; }
.ps-logo b { font-size:12px; letter-spacing:-2px; }
.xbox-logo b { display:grid; place-items:center; width:23px; height:23px; border:2px solid #fff; border-radius:50%; font-size:12px; }
.pc-logo b { width:26px; height:18px; border:2px solid #fff; border-bottom-width:3px; font-size:0; position:relative; }
.pc-logo b::after { content:''; position:absolute; left:7px; right:7px; bottom:-7px; border-top:2px solid #fff; }
.switch-logo,.switch2-logo { font-size:10px !important; }
.switch-logo b,.switch2-logo b { font-size:22px; }

/* Every retailer logo — whether the source asset is a flat SVG mark or a self-contained
   PNG badge with its own baked-in background — sits inside the same soft bordered chip
   next to the store's name, so the row reads as one consistent retailer strip instead of
   a mismatched grab of raw brand assets at inconsistent sizes, and every store is
   identifiable by name even where the mark alone isn't (e.g. Fanatical/IndieGala at
   icon size). */
.store-logo { display:inline-flex; align-items:center; justify-content:flex-start; gap:6px; max-width:100%; min-height:26px; margin-top:8px; padding:4px 10px; border-radius:6px; background:rgba(245,247,248,.06); border:1px solid rgba(245,247,248,.1); color:var(--gp-text); font:700 11px/1 var(--font-body); letter-spacing:.01em; }
.store-logo img { display:block; width:auto; max-width:52px; height:16px; object-fit:contain; flex-shrink:0; }
.store-logo img[src*='.svg'] { filter:brightness(0) invert(1); }
.store-logo-name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; }
/* Green Man Gaming's artwork is a dark wordmark on a transparent background — the one
   logo in the set that needs a light backing plate rather than the shared translucent chip. */
.store-logo:has(img[src*='green-man-gaming']) { background:#eef1f4; border-color:#eef1f4; color:#1c1f24; }
.store-logo-large .store-logo { min-height:34px; margin-top:0; padding:6px 14px; border-radius:7px; font-size:13px; gap:8px; }
.store-logo-large .store-logo img { max-width:64px; height:21px; }
.price-store-name .store-logo { min-height:24px; font-size:10px; gap:5px; }
.price-store-name .store-logo img { max-width:42px; height:14px; }
.store-logo-fallback { background:rgba(245,247,248,.04); color:var(--gp-muted); font-size:11px; font-weight:700; letter-spacing:.02em; text-transform:uppercase; }

.platform-tiles .platform-logo { padding:11px 18px; }
.platform-logo img { display:block; width:auto; max-width:106px; height:28px; object-fit:contain; filter:brightness(0) invert(1); }
.platform-logo.switch2-logo img { max-width:90px; height:34px; }

.platform-panel .filter-row { margin:0; padding:0; border:0; }
.platform-panel .filter-pill.platform-logo { cursor:pointer; }
.platform-panel .filter-pill.platform-logo.is-active { background:var(--gp-yellow); border-color:var(--gp-yellow); }
.platform-panel .filter-pill.platform-logo.is-active img { filter:brightness(0); }

.platform-panel { margin-top:34px; margin-bottom:18px; }
.home-content-head { padding-top:18px; }

/* Static prototype homepage port */
body { overflow-x:hidden; }
.hero .wrap { width:min(1440px,92%); max-width:1440px; min-height:525px; grid-template-columns:1fr; grid-template-rows:1fr auto; }
.hero-copy { align-self:start; padding-top:46px; }
.hero-title { font-family:'Barlow Condensed',Impact,sans-serif; font-size:clamp(62px,6.4vw,92px); line-height:.79; letter-spacing:1px; text-shadow:2px 2px 0 #222; margin-bottom:20px; }
.hero .hero-sub { font-size:20px; line-height:1.45; color:#f7f8fa; margin-bottom:20px; }
/* The horizontal fade alone left the trust-strip's rightmost item (sitting low,
   under the least-darkened part of the art) with poor text contrast — this adds
   a bottom-anchored vertical darken so the whole strip stays legible regardless
   of how bright the art is at any given horizontal position. */
.hero-art { inset:0 0 0 0; background:linear-gradient(90deg,rgba(2,7,10,.48),rgba(2,7,10,.04)),linear-gradient(180deg,transparent 55%,rgba(2,7,10,.6) 100%),url('/img/hero-punk-v2.png') center/cover no-repeat; }
.search-bar { height:68px; max-width:980px; margin-top:20px; padding:0; border:2px solid #303a48; border-radius:9px; }
.search-icon { color:#fff; font-size:32px; margin:0 18px; transform:rotate(-20deg); }
.search-input { height:100%; font-size:17px; }
.search-btn { align-self:stretch; min-width:175px; border-radius:7px; }
.trust-strip { width:min(1100px,100%); grid-column:1; align-self:end; border:0; padding:20px 0 25px; gap:35px; }
.trust-strip span { grid-template-columns:42px 1fr; font-size:13px; }
.trust-strip b { font-size:38px; }
.trust-strip img { grid-row:1/3; width:38px; height:38px; object-fit:contain; align-self:center; }
.trust-strip small { font-size:12px; margin-top:5px; }

body > main > .wrap { width:min(1440px,92%); max-width:1440px; }
.home-content-head { padding-top:34px; align-items:center; }
.home-content-head h2 { font:800 21px/1 'Inter',sans-serif; letter-spacing:0; }
.home-content-head a { color:var(--gp-purple); font-weight:600; font-size:14px; }

/* Repurposes the old dead .expand-toggle chevron-button (still styled as a tiny
   22px circle above) into the "View all X" text trigger — same class so site.js's
   existing .expand-toggle wiring picks it up unchanged, this just overrides the
   circle sizing back to a plain text link matching .home-content-head a. */
.section-expand { display:flex; align-items:center; gap:6px; width:max-content; height:auto; padding:0; margin:14px 0 0 auto; border:none; border-radius:0; background:none; color:var(--gp-purple); font:600 14px var(--font-body); cursor:pointer; }
.section-expand:hover { color:var(--gp-text); background:none; }
.platform-group .game-section { margin:24px 0 0; }
.game-grid { grid-template-columns:repeat(4,1fr); gap:22px; }
.game-card { border-radius:9px; background:linear-gradient(145deg,#0b1319,#070c10); }
.game-thumb,.game-thumb.game-thumb-cover {
  width:100%;
  height:auto;
  aspect-ratio:4 / 5;
  object-fit:cover;
  object-position:center top;
  background:#080d12;
}
.game-info { padding:16px; }
.game-title { font-size:16px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.game-price-row { margin:6px 0 0; }
.price-now { font-size:21px; }
.card-arrow { width:38px; height:38px; }
.discount-badge,.preorder-badge { padding:9px 16px; border-radius:0; clip-path:polygon(0 0,100% 0,92% 100%,0 100%); }

.platform-panel { margin:48px 0 0; padding:10px 0 34px; border:0; background:none; display:block; }
.platform-panel h2 { font:800 21px/1 'Inter',sans-serif; margin:0 0 24px; }
.platform-panel .filter-row { display:grid; grid-template-columns:repeat(5,1fr); gap:18px; }
.platform-tiles .platform-logo { min-width:0; height:83px; border-radius:9px; background:linear-gradient(#0c141a,#080e13); }
.platform-panel .filter-pill.platform-logo.is-active { background:linear-gradient(#0c141a,#080e13); border-color:var(--gp-purple); }
.platform-panel .filter-pill.platform-logo.is-active img { filter:brightness(0) invert(1); }
.platform-logo img { max-width:118px; height:34px; }
.bestselling-head { padding-top:12px; }
.bestselling-platform-group .game-section { margin-bottom:42px; }
.site-stats { margin:0 calc(50% - 50vw); padding:30px max(8vw,40px); border-left:0; border-right:0; grid-template-columns:repeat(4,1fr); }
.site-stats span { display:flex; flex-direction:column; align-items:center; text-align:center; padding:8px 16px; position:static; }
.site-stats span::before { display:none; }
.site-stats img { position:static; width:44px; height:44px; object-fit:contain; margin-bottom:10px; }
.site-stats strong { font-size:27px; }

@media(max-width:900px){.hero .wrap{min-height:595px}.hero-art{background-position:64% center}.game-grid{grid-template-columns:repeat(2,1fr)}.platform-panel .filter-row{grid-template-columns:repeat(3,1fr)}}
@media(max-width:560px){.hero .wrap{min-height:530px}.hero-title{font-size:62px}.hero .hero-sub{font-size:16px}.search-icon{display:none}.search-input{padding-left:15px;font-size:13px}.search-btn{min-width:95px}.trust-strip{grid-template-columns:1fr 1fr;gap:12px}.game-grid{grid-template-columns:1fr}.game-thumb,.game-thumb.game-thumb-cover{height:auto}.platform-panel .filter-row{grid-template-columns:repeat(5,1fr);gap:6px}.site-stats{grid-template-columns:1fr 1fr;gap:24px}}

/* Mobile reverts to the original develop-branch card layout — a small square
   thumbnail beside the title/price, rather than the redesign's full-width
   poster card — plus smaller platform/trust-strip icons. Desktop and tablet
   keep the current poster-card treatment untouched. */
@media(max-width:560px){
  .game-card{display:flex;align-items:flex-start;gap:12px;padding:14px;border-radius:10px}
  .game-thumb,.game-thumb.game-thumb-cover{width:72px;height:72px;aspect-ratio:auto;border-radius:8px;flex-shrink:0;object-fit:cover;object-position:center top}
  /* Grid with named areas, not flex-wrap: a flex row let the store logo and
     price/arrow drop onto separate lines the moment a longer store name (e.g.
     "Nintendo eShop") wouldn't fit both on one row — and column-only grid
     auto-placement (no explicit row) turned out just as unreliable, since
     store-logo comes after game-price-row in the DOM and sparse packing
     doesn't reliably backfill the row price claimed first. Named areas place
     both deterministically regardless of source order: price+arrow always
     gets its full "auto" column, and the store logo's own text-overflow:
     ellipsis (see .store-logo-name) truncates a long name instead of wrapping. */
  .game-info{padding:0;flex:1;min-width:0;display:grid;grid-template-columns:1fr auto;grid-template-areas:"top top" "meta meta" "store price";column-gap:8px;row-gap:4px;align-items:center}
  .game-info-top{grid-area:top;min-height:0}
  .game-meta{grid-area:meta;margin-top:0}
  .discount-badge,.preorder-badge{position:static;padding:2px 9px;border-radius:20px;clip-path:none;flex-shrink:0}
  .game-title{font-size:14px;-webkit-line-clamp:1}
  /* Store logo (left) and price+arrow (right) share the grid's bottom row. */
  .store-logo{grid-area:store;min-width:0;margin-top:4px}
  .game-price-row{grid-area:price;margin-top:4px;flex-shrink:0}
  .price-now{font-size:16px}
  .card-arrow{width:26px;height:26px}
  .platform-logo img,.platform-logo.switch2-logo img{max-width:60px;height:20px}
  .platform-tiles .platform-logo{height:56px}
  .trust-strip img{width:26px;height:26px}
  /* An earlier mobile pass hid the description entirely (display:none) to
     save space — restored here with the same 3-line clamp desktop already
     uses, rather than left full-length. */
  .game-hero-summary{display:-webkit-box}
}