/* =========================================================
   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-image: url('../img/hero-bg.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: var(--gp-bg); /* fallback shown until the image loads */
}

/* Overlay to keep text readable over the background image — eased back
   slightly from the original (0.9/0.78/0.3, 0.88/0.94) so more of the
   controller illustration shows through on the right without giving up
   contrast where the headline actually sits. */
.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 {
  font-family: var(--font-display);
  font-size: clamp(40px, 6vw, 72px);
  line-height: 1.02;
  margin: 0 0 20px;
  letter-spacing: -1px;
}

.hero-accent {
  color: var(--gp-pink);
  text-shadow: 0 0 28px var(--gp-pink-glow);
}

/* Full stops styled as a small angled panel, echoing the "u" panel in the logo */
.stop-mark {
  display: inline-block;
  width: 0.28em;
  height: 0.62em;
  margin-left: 0.06em;
  margin-bottom: -0.03em;
  background: var(--gp-purple);
  clip-path: polygon(0% 0%, 100% 16%, 84% 100%, 0% 88%);
  vertical-align: baseline;
}

.hero-accent .stop-mark {
  background: var(--gp-text);
}

.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;
  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;
}

.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: baseline;
  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);
}

.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;
    grid-template-areas:
      "rank store"
      "rank discount"
      "rank amount"
      "rank cta";
    row-gap: 6px;
  }
  .price-rank { grid-area: rank; }
  .price-store { grid-area: store; }
  .price-discount { grid-area: discount; }
  .price-amount-group { grid-area: amount; }
  .price-cta { grid-area: cta; justify-self: end; }
}

.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;
  }
}