/* GamECLicKs.com shared styles for the front page and section pages (split from index.html 2026-10-13). */
/* ── CONFIG ─────────────────────────────────────────────────── */
:root {
  --bg:       #05060a;
  --bg-up:    #090b14;
  --bg-card:  #0c0e1a;
  --green:    #00ff41;
  --green-dim:#00cc33;
  --green-dk: #003312;
  --cyan:     #00e5ff;
  --purple:   #bd00ff;
  --yellow:   #ffd700;
  --red:      #ff1744;
  --text:     #b0c8b0;
  --text-sec: #7a9a7a;
  --border:   #1a2a1a;
  --ps:       #0070d1;
  --xbox:     #107c10;
  --sw:       #e60012;
  --pc:       #1b9ef7;
  --mob:      #ff6b35;
}

/* ── RESET ──────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  line-height: 1.6;
  overflow-x: hidden;
}

/* Scanline overlay */
body::after {
  content: '';
  position: fixed; inset: 0;
  background: repeating-linear-gradient(0deg, transparent, transparent 3px, rgba(0,255,65,0.012) 3px, rgba(0,255,65,0.012) 4px);
  pointer-events: none;
  z-index: 9999;
}

/* Custom scrollbar */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--green-dim); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--green); }

a { color: var(--green); text-decoration: none; }
a:hover { color: var(--cyan); }
img { max-width: 100%; height: auto; display: block; }

/* ── HEADER ─────────────────────────────────────────────────── */
#site-header {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 1000;
  background: rgba(5,6,10,0.88);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border);
}
.header-inner {
  max-width: 1280px; margin: 0 auto;
  padding: 0 24px;
  height: 64px;
  display: flex; align-items: center; gap: 32px;
}
.logo-link { flex-shrink: 0; }
.logo-link img { height: 38px; width: auto; }
.main-nav {
  display: flex; gap: 4px; align-items: center;
  flex: 1; overflow-x: auto;
  scrollbar-width: none;
}
.main-nav::-webkit-scrollbar { display: none; }
.main-nav a {
  font-family: 'Orbitron', sans-serif;
  font-size: 0.65rem; font-weight: 700;
  letter-spacing: 2px; text-transform: uppercase;
  color: var(--text-sec);
  padding: 6px 12px;
  border-radius: 2px;
  transition: color 0.2s, background 0.2s;
  white-space: nowrap;
}
.main-nav a:hover { color: var(--green); background: rgba(0,255,65,0.06); }
.nav-cta {
  flex-shrink: 0;
  font-family: 'Orbitron', sans-serif;
  font-size: 0.65rem; font-weight: 700;
  letter-spacing: 2px;
  background: var(--green);
  color: #000;
  padding: 7px 16px;
  border-radius: 2px;
  transition: background 0.2s, box-shadow 0.2s;
}
.nav-cta:hover { background: var(--cyan); color: #000; box-shadow: 0 0 16px rgba(0,229,255,0.4); }

/* ── HERO ───────────────────────────────────────────────────── */
#hero {
  position: relative;
  display: flex; align-items: flex-start; justify-content: center;
  text-align: center;
  overflow: hidden;
  padding: 64px 0 56px;
}
#matrix-canvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  opacity: 0.35;
}
.hero-content {
  position: relative; z-index: 1;
  width: 100%; padding: 28px 24px 0;
}
.hero-logo { display: block; margin: 0 auto 18px; max-width: none; width: min(80vw, 1100px); height: auto; }
.hero-sub, h1.hero-sub {
  font-family: 'Orbitron', sans-serif;
  font-size: clamp(1rem, 3vw, 1.4rem);
  font-weight: 900;
  letter-spacing: 8px;
  text-transform: uppercase;
  color: var(--green);
  animation: glitch 5s infinite;
  display: inline-block;
  margin-bottom: 20px;
}
.hero-desc {
  font-size: 1rem;
  color: var(--text-sec);
  max-width: 500px; margin: 0 auto 36px;
  line-height: 1.7;
}
.hero-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.btn-primary {
  font-family: 'Orbitron', sans-serif;
  font-size: 0.7rem; font-weight: 700;
  letter-spacing: 2px;
  background: var(--green); color: #000;
  padding: 12px 28px; border-radius: 2px;
  transition: all 0.2s;
}
.btn-primary:hover { background: var(--cyan); color: #000; box-shadow: 0 0 24px rgba(0,229,255,0.45); }
.btn-ghost {
  font-family: 'Orbitron', sans-serif;
  font-size: 0.7rem; font-weight: 700;
  letter-spacing: 2px;
  border: 1px solid var(--green); color: var(--green);
  padding: 12px 28px; border-radius: 2px;
  transition: all 0.2s;
}
.btn-ghost:hover { background: rgba(0,255,65,0.08); box-shadow: 0 0 16px rgba(0,255,65,0.2); }
.hero-scroll {
  position: absolute; bottom: 32px; left: 50%; transform: translateX(-50%);
  animation: bounce 2s infinite;
  z-index: 1;
}
.hero-scroll span {
  display: block; width: 24px; height: 24px;
  border-right: 2px solid var(--green); border-bottom: 2px solid var(--green);
  transform: rotate(45deg);
  margin: -8px auto;
}

@keyframes glitch {
  0%,91%,100% { transform: none; color: var(--green); text-shadow: none; }
  92% { transform: translate(-3px,0) skewX(-4deg); color: var(--cyan); text-shadow: 3px 0 var(--purple); }
  93% { transform: translate(3px,0) skewX(3deg); color: var(--purple); text-shadow: -3px 0 var(--cyan); }
  94% { transform: none; color: var(--green); }
  95% { transform: translate(-1px,0); }
  96% { transform: none; }
}
@keyframes bounce {
  0%,100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(8px); }
}
@keyframes shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── SECTIONS ───────────────────────────────────────────────── */
.section-inner { max-width: 1280px; margin: 0 auto; padding: 80px 24px; }
.section-head { margin-bottom: 40px; }
.section-label {
  font-family: 'Share Tech Mono', monospace;
  font-size: 0.7rem; color: var(--green);
  letter-spacing: 5px; text-transform: uppercase;
  display: block; margin-bottom: 10px;
}
.section-title {
  font-family: 'Orbitron', sans-serif;
  font-size: clamp(1.4rem, 3.5vw, 2.2rem);
  font-weight: 900; color: #fff;
  text-transform: uppercase; letter-spacing: 2px;
  margin-bottom: 12px;
}
.section-desc { color: var(--text-sec); max-width: 560px; }
.section-intro {
  max-width: 780px; margin: 18px 0 26px;
  font-size: 0.9rem; color: var(--text); line-height: 1.75;
}
.section-intro p { margin-bottom: 12px; }
.section-intro p:last-child { margin-bottom: 0; }
.section-intro a { color: var(--cyan); }
.data-note {
  border-left: 2px solid var(--border); padding-left: 14px;
  font-size: 0.82rem; color: var(--text-sec); margin-top: 6px;
}
.section-head-row { display: flex; align-items: flex-end; gap: 20px; flex-wrap: wrap; margin-bottom: 40px; }
.section-head-row .section-head { margin-bottom: 0; }

/* ── LIVE BADGE ─────────────────────────────────────────────── */
.live-badge {
  display: inline-flex; align-items: center; gap: 7px;
  background: rgba(255,23,68,0.1);
  border: 1px solid rgba(255,23,68,0.35);
  color: var(--red);
  padding: 3px 10px;
  font-family: 'Share Tech Mono', monospace;
  font-size: 0.68rem; letter-spacing: 2px;
  border-radius: 2px;
}
.live-badge::before {
  content: ''; width: 7px; height: 7px;
  border-radius: 50%; background: var(--red);
  animation: blink 1.2s infinite;
}
@keyframes blink { 0%,100% { opacity: 1; } 50% { opacity: 0.2; } }

/* ── API NOTICE ─────────────────────────────────────────────── */
.api-notice {
  background: rgba(0,229,255,0.06);
  border: 1px solid rgba(0,229,255,0.2);
  border-radius: 4px;
  padding: 16px 20px;
  margin-bottom: 28px;
  font-family: 'Share Tech Mono', monospace;
  font-size: 0.8rem; color: var(--cyan);
}
.api-notice a { color: var(--cyan); text-decoration: underline; }
.api-credit {
  margin-top: 24px;
  font-family: 'Share Tech Mono', monospace;
  font-size: 0.68rem; color: var(--text-sec);
  text-align: right;
}
.api-credit a { color: var(--text-sec); }
.api-credit a:hover { color: var(--green); }

/* ── FILTER TABS ────────────────────────────────────────────── */
.filter-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 32px; }
.filter-tab {
  font-family: 'Orbitron', sans-serif;
  font-size: 0.62rem; font-weight: 700;
  letter-spacing: 2px; text-transform: uppercase;
  color: var(--text-sec);
  background: transparent;
  border: 1px solid var(--border);
  padding: 7px 16px; border-radius: 2px;
  cursor: pointer;
  transition: all 0.2s;
}
.filter-tab:hover, .filter-tab.active {
  color: var(--green);
  border-color: var(--green);
  background: rgba(0,255,65,0.05);
}
.filter-tab[data-platform="ps5"].active    { color: var(--ps);   border-color: var(--ps);   background: rgba(0,112,209,0.08); }
.filter-tab[data-platform="xbox"].active   { color: var(--xbox); border-color: var(--xbox); background: rgba(16,124,16,0.08); }
.filter-tab[data-platform="switch"].active { color: var(--sw);   border-color: var(--sw);   background: rgba(230,0,18,0.08); }
.filter-tab[data-platform="pc"].active     { color: var(--pc);   border-color: var(--pc);   background: rgba(27,158,247,0.08); }
.filter-tab[data-platform="mobile"].active { color: var(--mob);  border-color: var(--mob);  background: rgba(255,107,53,0.08); }

/* ── GAMES GRID ─────────────────────────────────────────────── */
.games-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
}
.game-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 3px;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.25s, border-color 0.25s, box-shadow 0.25s;
  position: relative;
}
.game-card::before {
  content: '';
  position: absolute; top: 0; left: 0;
  width: 14px; height: 14px;
  border-top: 2px solid var(--green);
  border-left: 2px solid var(--green);
  z-index: 2;
  opacity: 0;
  transition: opacity 0.2s;
}
.game-card::after {
  content: '';
  position: absolute; bottom: 0; right: 0;
  width: 14px; height: 14px;
  border-bottom: 2px solid var(--green);
  border-right: 2px solid var(--green);
  z-index: 2;
  opacity: 0;
  transition: opacity 0.2s;
}
.game-card:hover { transform: translateY(-4px); border-color: var(--green); box-shadow: 0 8px 32px rgba(0,255,65,0.12); }
.game-card:hover::before, .game-card:hover::after { opacity: 1; }
.game-cover {
  width: 100%; height: 130px;
  background: linear-gradient(135deg, #0c1a0c 0%, #1a2a1a 100%);
  background-size: cover; background-position: center;
  position: relative;
}
.meta-score {
  position: absolute; top: 8px; right: 8px;
  font-family: 'Orbitron', sans-serif;
  font-size: 0.7rem; font-weight: 700;
  padding: 2px 8px; border-radius: 2px;
}
.meta-green { background: #267b26; color: #fff; }
.meta-yellow { background: #8a7800; color: #fff; }
.meta-red { background: #7a1a1a; color: #fff; }
.game-info { padding: 12px 14px; }
.game-name {
  font-family: 'Orbitron', sans-serif;
  font-size: 0.72rem; font-weight: 700;
  color: #fff;
  margin-bottom: 6px;
  line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.game-platforms {
  font-family: 'Share Tech Mono', monospace;
  font-size: 0.62rem; color: var(--text-sec);
  margin-bottom: 8px;
}
.game-rating { display: flex; align-items: center; gap: 8px; }
.rating-bar {
  flex: 1; height: 3px;
  background: var(--border); border-radius: 2px; overflow: hidden;
}
.rating-fill { height: 100%; background: var(--green); border-radius: 2px; }
.rating-num {
  font-family: 'Share Tech Mono', monospace;
  font-size: 0.68rem; color: var(--green); flex-shrink: 0;
}

/* Skeleton */
.game-card.skeleton { pointer-events: none; }
.game-card.skeleton .game-cover {
  background: linear-gradient(90deg, var(--bg-card) 25%, var(--bg-up) 50%, var(--bg-card) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}
.game-card.skeleton .game-info { padding: 12px 14px; }
.game-card.skeleton .game-info::before {
  content: '';
  display: block; height: 12px; border-radius: 2px; margin-bottom: 8px;
  background: linear-gradient(90deg, var(--bg-card) 25%, var(--bg-up) 50%, var(--bg-card) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}
.game-card.skeleton .game-info::after {
  content: '';
  display: block; height: 8px; width: 60%; border-radius: 2px;
  background: linear-gradient(90deg, var(--bg-card) 25%, var(--bg-up) 50%, var(--bg-card) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

/* ── DEALS SECTION ──────────────────────────────────────────── */
#deals { background: var(--bg-up); }
.deals-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
}
.deal-card {
  display: flex; flex-direction: column;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 3px; overflow: hidden;
  transition: transform 0.25s, border-color 0.25s, box-shadow 0.25s;
  color: var(--text);
}
.deal-card:hover { transform: translateY(-3px); border-color: var(--yellow); box-shadow: 0 8px 28px rgba(255,215,0,0.1); color: var(--text); }
.deal-thumb {
  position: relative;
  background: var(--bg-up);
  height: 100px; overflow: hidden;
}
.deal-thumb img { width: 100%; height: 100%; object-fit: cover; }
.deal-badge {
  position: absolute; top: 8px; left: 8px;
  background: var(--red);
  color: #fff;
  font-family: 'Orbitron', sans-serif;
  font-size: 0.65rem; font-weight: 700;
  padding: 2px 8px; border-radius: 2px;
}
.deal-info { padding: 12px 14px; flex: 1; display: flex; flex-direction: column; }
.deal-name {
  font-family: 'Inter', sans-serif;
  font-size: 0.82rem; font-weight: 600;
  color: #fff; margin-bottom: 8px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.deal-price { display: flex; align-items: baseline; gap: 8px; margin-bottom: 8px; }
.price-sale {
  font-family: 'Orbitron', sans-serif;
  font-size: 1.1rem; font-weight: 700; color: var(--green);
}
.price-orig {
  font-family: 'Share Tech Mono', monospace;
  font-size: 0.78rem; color: var(--text-sec);
  text-decoration: line-through;
}
.deal-meta { display: flex; align-items: center; gap: 8px; margin-top: auto; }
.deal-store {
  font-family: 'Share Tech Mono', monospace;
  font-size: 0.65rem; color: var(--text-sec);
}

/* ── PLATFORM HUB ───────────────────────────────────────────── */
.platforms-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 20px;
}
.platform-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 28px 24px;
  transition: transform 0.25s, border-color 0.25s, box-shadow 0.25s;
  position: relative; overflow: hidden;
}
.platform-card::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--pcolor, var(--green));
}
.platform-card:hover {
  transform: translateY(-5px);
  border-color: var(--pcolor, var(--green));
  box-shadow: 0 12px 36px color-mix(in srgb, var(--pcolor, var(--green)) 20%, transparent);
}
.platform-icon {
  font-family: 'Orbitron', sans-serif;
  font-size: 2rem; font-weight: 900;
  color: var(--pcolor, var(--green));
  margin-bottom: 12px;
  line-height: 1;
}
.platform-card h3 {
  font-family: 'Orbitron', sans-serif;
  font-size: 0.85rem; font-weight: 700;
  color: #fff; margin-bottom: 16px;
  text-transform: uppercase; letter-spacing: 1px;
}
.platform-card h3 a { color: inherit; }
.platform-card h3 a:hover { color: var(--pcolor, var(--green)); }
.platform-links { list-style: none; display: flex; flex-direction: column; gap: 6px; }
.platform-links a {
  font-size: 0.82rem; color: var(--text-sec);
  display: flex; align-items: center; gap: 6px;
  transition: color 0.2s;
}
.platform-links a::before { content: '›'; color: var(--pcolor, var(--green)); }
.platform-links a:hover { color: #fff; }
.platform-links a strong { color: #fff; font-weight: 600; }

/* ── RESOURCES ──────────────────────────────────────────────── */
#resources { background: var(--bg-up); }
.resources-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 24px;
}
.resource-note {
  font-size: 0.78rem; color: var(--text-sec);
  line-height: 1.6; margin-bottom: 12px;
}
.resource-group h4, .resource-group h2 {
  font-family: 'Share Tech Mono', monospace;
  font-size: 0.7rem; color: var(--green);
  letter-spacing: 3px; text-transform: uppercase;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}
.resource-group ul { list-style: none; display: flex; flex-direction: column; gap: 5px; }
.resource-group a {
  font-size: 0.85rem; color: var(--text);
  transition: color 0.15s, padding-left 0.15s;
  display: block;
}
.resource-group a:hover { color: var(--green); padding-left: 6px; }

/* ── AFFILIATE STRIP ────────────────────────────────────────── */
#affiliate {
  background: linear-gradient(135deg, #050a05, #080e08);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.affiliate-inner {
  max-width: 1280px; margin: 0 auto;
  padding: 48px 24px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px; align-items: center;
}
.affiliate-text .section-label { display: block; margin-bottom: 10px; }
.affiliate-text h2 {
  font-family: 'Orbitron', sans-serif;
  font-size: clamp(1.2rem, 3vw, 1.8rem);
  font-weight: 900; color: #fff;
  text-transform: uppercase; letter-spacing: 1px;
  margin-bottom: 12px;
}
.affiliate-text p { color: var(--text-sec); font-size: 0.9rem; margin-bottom: 20px; }
.affiliate-btn {
  display: inline-block;
  font-family: 'Orbitron', sans-serif;
  font-size: 0.68rem; font-weight: 700;
  letter-spacing: 2px;
  background: var(--yellow); color: #000;
  padding: 10px 24px; border-radius: 2px;
  transition: all 0.2s;
}
.affiliate-btn:hover { background: var(--green); color: #000; }
.affiliate-features { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
a.affiliate-feature { text-decoration: none; }
.affiliate-feature {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 3px; padding: 14px 16px;
  cursor: pointer;
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
  display: block;
}
.affiliate-feature:hover {
  border-color: var(--yellow);
  box-shadow: 0 4px 20px rgba(255,215,0,0.12);
  transform: translateY(-2px);
}
.affiliate-feature-icon {
  font-family: 'Share Tech Mono', monospace;
  font-size: 1.2rem; color: var(--green);
  margin-bottom: 6px;
}
.affiliate-feature h5, .affiliate-feature h3 {
  font-family: 'Orbitron', sans-serif;
  font-size: 0.62rem; font-weight: 700;
  color: #fff; text-transform: uppercase;
  letter-spacing: 1px; margin-bottom: 4px;
}
.affiliate-feature p { font-size: 0.72rem; color: var(--text-sec); }

/* ── FOOTER ─────────────────────────────────────────────────── */
#site-footer {
  background: var(--bg);
  border-top: 1px solid var(--border);
}
.footer-inner {
  max-width: 1280px; margin: 0 auto;
  padding: 56px 24px 32px;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 40px;
}
.footer-brand img { height: 36px; width: auto; margin-bottom: 16px; }
.footer-brand p { font-size: 0.82rem; color: var(--text-sec); line-height: 1.6; max-width: 260px; }
.footer-col h4, .footer-col h3 {
  font-family: 'Share Tech Mono', monospace;
  font-size: 0.65rem; color: var(--green);
  letter-spacing: 3px; text-transform: uppercase;
  margin-bottom: 14px;
}
.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 6px; }
.footer-col a { font-size: 0.82rem; color: var(--text-sec); transition: color 0.15s; }
.footer-col a:hover { color: var(--green); }
.footer-bottom {
  max-width: 1280px; margin: 0 auto;
  padding: 20px 24px 28px;
  display: flex; justify-content: space-between; align-items: center;
  border-top: 1px solid var(--border);
  flex-wrap: wrap; gap: 12px;
}
.footer-bottom p { font-family: 'Share Tech Mono', monospace; font-size: 0.72rem; color: var(--text-sec); }
.footer-bottom a { font-family: 'Share Tech Mono', monospace; font-size: 0.72rem; color: var(--text-sec); transition: color 0.15s; }
.footer-bottom a:hover { color: var(--green); }

/* Fade-in animation */
.fade-up { opacity: 0; transform: translateY(24px); transition: opacity 0.5s, transform 0.5s; }
.fade-up.visible { opacity: 1; transform: translateY(0); }
.no-games { font-family: 'Share Tech Mono', monospace; font-size: 0.8rem; color: var(--text-sec); padding: 40px 0; text-align: center; }

/* ── RESPONSIVE ─────────────────────────────────────────────── */
@media (max-width: 1240px) {
  .header-inner { gap: 16px; }
  .main-nav a { padding: 6px 8px; letter-spacing: 1px; }
}
@media (max-width: 1120px) {
  .nav-cta { display: none; }
}
@media (max-width: 900px) {
  .footer-inner { grid-template-columns: 1fr 1fr; }
  .affiliate-inner { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .header-inner { gap: 16px; }
  .main-nav a { padding: 6px 8px; }
  .nav-cta { display: none; }
  .main-nav { -webkit-mask-image: linear-gradient(to right, #000 80%, transparent); mask-image: linear-gradient(to right, #000 80%, transparent); }
  .section-inner { padding: 52px 18px; }
  .section-head { margin-bottom: 28px; }
  #hero { padding-bottom: 72px; }
  .footer-inner { grid-template-columns: 1fr; gap: 28px; }
  .footer-bottom { flex-direction: column; text-align: center; }
  .affiliate-features { grid-template-columns: 1fr; }
}
/* ── PLATFORM DESCRIPTIONS ─────────────────────────────────── */
.platform-desc {
  font-size: 0.78rem; color: var(--text-sec); line-height: 1.65;
  margin-top: 12px; padding-top: 12px;
  border-top: 1px solid var(--border);
}
.platform-desc a { color: var(--cyan); }
.affiliate-disclosure {
  font-size: 0.7rem; color: var(--text-sec);
  margin-top: 14px; line-height: 1.6;
}
.footer-disclosure {
  max-width: 1280px; margin: 0 auto;
  padding: 0 24px 20px;
  font-size: 0.72rem; color: var(--text-sec); line-height: 1.7;
}

/* ── ABOUT SECTION ──────────────────────────────────────────── */
#about { background: var(--bg-up); }
.about-inner {
  max-width: 960px; margin: 0 auto;
  padding: 80px 24px;
}
.about-inner h2 {
  font-family: 'Orbitron', sans-serif;
  font-size: clamp(1.4rem, 3vw, 2rem);
  font-weight: 900; color: var(--green);
  letter-spacing: 2px; margin-bottom: 24px;
}
.about-inner p {
  font-size: 0.95rem; color: var(--text); line-height: 1.8;
  margin-bottom: 16px; max-width: 800px;
}
.about-inner p:last-child { margin-bottom: 0; }

/* ── FAQ SECTION ────────────────────────────────────────────── */
#faq { background: var(--bg); }
.faq-inner {
  max-width: 960px; margin: 0 auto;
  padding: 80px 24px;
}
.faq-inner > .section-label {
  font-family: 'Share Tech Mono', monospace;
  font-size: 0.65rem; color: var(--green);
  letter-spacing: 3px; text-transform: uppercase;
  display: block; margin-bottom: 10px;
}
.faq-inner > h2 {
  font-family: 'Orbitron', sans-serif;
  font-size: clamp(1.4rem, 3vw, 2rem);
  font-weight: 900; color: var(--text);
  margin-bottom: 40px;
}
.faq-list { display: flex; flex-direction: column; gap: 0; }
.faq-item {
  border-top: 1px solid var(--border);
  padding: 24px 0;
}
.faq-item:last-child { border-bottom: 1px solid var(--border); }
.faq-item h3 {
  font-family: 'Orbitron', sans-serif;
  font-size: 0.9rem; font-weight: 700;
  color: var(--green); margin-bottom: 10px;
  letter-spacing: 0.5px;
}
.faq-item p {
  font-size: 0.9rem; color: var(--text); line-height: 1.75;
}

/* ── WEEKLY DROP ────────────────────────────────────────────── */
#weekly { background: var(--bg-up); }
.update-stamp {
  font-family: 'Share Tech Mono', monospace; font-size: 0.68rem;
  color: var(--yellow); border: 1px solid var(--yellow);
  padding: 6px 12px; letter-spacing: 2px; text-transform: uppercase;
  white-space: nowrap;
}
.weekly-subhead {
  font-family: 'Orbitron', sans-serif; font-size: 0.85rem; font-weight: 700;
  color: var(--green); letter-spacing: 2px; text-transform: uppercase;
  margin: 40px 0 16px;
}
.price-table-wrap { overflow-x: auto; border: 1px solid var(--border); }
.price-table { width: 100%; border-collapse: collapse; min-width: 640px; }
.price-table th {
  font-family: 'Share Tech Mono', monospace; font-size: 0.62rem;
  color: var(--text-sec); text-transform: uppercase; letter-spacing: 2px;
  text-align: left; padding: 12px 16px; border-bottom: 1px solid var(--border);
  background: var(--bg-card);
}
.price-table td { font-size: 0.85rem; color: var(--text); padding: 12px 16px; border-bottom: 1px solid var(--border); }
.price-table tr:last-child td { border-bottom: none; }
.price-table .price { font-family: 'Share Tech Mono', monospace; color: var(--green); font-size: 0.9rem; white-space: nowrap; }
.price-table .alert { color: var(--yellow); font-size: 0.78rem; }
.price-table .buy-link { font-family: 'Share Tech Mono', monospace; font-size: 0.75rem; color: var(--cyan); white-space: nowrap; }
/* Phones: one card per console instead of a sideways-scrolling table, so the "Check price" link is never off-screen */
@media (max-width: 640px) {
  .price-table { min-width: 0; }
  .price-table thead { display: none; }
  .price-table tr { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; padding: 14px 16px; border-bottom: 1px solid var(--border); }
  .price-table tr:last-child { border-bottom: none; }
  .price-table td { padding: 0; border: none; }
  .price-table td:first-child { font-weight: 600; }
  .price-table td:nth-child(3), .price-table td:nth-child(4) { grid-column: 1 / -1; }
  .price-table .buy-link { display: inline-block; padding: 6px 0 2px; font-size: 0.8rem; }
}
.sale-links { display: flex; flex-wrap: wrap; gap: 12px; }
.sale-pill {
  font-family: 'Share Tech Mono', monospace; font-size: 0.75rem;
  color: var(--text); border: 1px solid var(--border); background: var(--bg-card);
  padding: 10px 16px; transition: border-color 0.15s, color 0.15s;
}
.sale-pill:hover { border-color: var(--green); color: var(--green); }
.sale-pill .ends { color: var(--yellow); }
.news-list { list-style: none; display: flex; flex-direction: column; gap: 12px; }
.news-list li { font-size: 0.88rem; color: var(--text); line-height: 1.6; padding-left: 18px; position: relative; }
.news-list li::before { content: '>'; position: absolute; left: 0; color: var(--green); font-family: 'Share Tech Mono', monospace; }
.news-list a { color: var(--cyan); }
.blog-teasers { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.blog-teasers a { font-size: 0.9rem; color: var(--text); }
.blog-teasers a:hover { color: var(--green); }
.blog-teasers .tdate { font-family: 'Share Tech Mono', monospace; font-size: 0.7rem; color: var(--text-sec); margin-right: 10px; }

/* ── FEATURE STORY + STORY CARDS (added 2026-10-13) ─────────────
   Generated by tools/build-homepage-cards.py from blog/index.html.
   The newest article with GamECLicKs.com feature art is the feature. */
.hero-logo { width: min(62vw, 780px); margin-bottom: 10px; }
#hero .hero-sub { margin-bottom: 22px; }
/* Homepage h1 is the logo itself (alt text carries the words), 2026-10-13 */
.hero-title { margin: 0 0 26px; line-height: 0; }
.hero-title .hero-logo { margin-bottom: 0; }
.feature-story {
  display: grid; grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr); align-items: stretch;
  max-width: 1120px; margin: 0 auto; text-align: left;
  background: rgba(12,14,26,0.92); border: 1px solid var(--border);
  color: var(--text); transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}
/* green box only while highlighted, like the other story cards (2026-10-20) */
.feature-story:hover, .feature-story:focus-visible { color: var(--text); border-color: var(--green); box-shadow: 0 0 56px rgba(0,255,65,0.22); transform: translateY(-2px); }
.fs-img { overflow: hidden; background: #000; min-width: 0; min-height: 300px; position: relative; width: 100%; } /* width: Safari won't stretch an aspect-ratio grid item whose only child is absolute; without it the phone feature image is 0px wide */
.fs-img img { position: absolute; inset: 0; }
.fs-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fs-body { padding: 26px 28px; display: flex; flex-direction: column; justify-content: center; gap: 12px; }
.fs-kicker { font-family: 'Share Tech Mono', monospace; font-size: 0.72rem; letter-spacing: 3px; text-transform: uppercase; color: var(--green); }
.fs-title { font-family: 'Orbitron', sans-serif; font-weight: 900; font-size: clamp(1.15rem, 2.2vw, 1.7rem); line-height: 1.2; color: #fff; }
.fs-dek { font-size: 0.92rem; line-height: 1.6; color: var(--text-sec); }
.fs-cta { font-family: 'Orbitron', sans-serif; font-size: 0.7rem; font-weight: 700; letter-spacing: 2px; color: #000; background: var(--green); padding: 10px 18px; align-self: flex-start; margin-top: 4px; }
.feature-story:hover .fs-cta { background: var(--cyan); }

.story-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.story-card { display: flex; flex-direction: column; background: var(--bg-card); border: 1px solid var(--border); color: var(--text); transition: border-color 0.2s, transform 0.2s; }
.story-card:hover { border-color: var(--green); transform: translateY(-2px); color: var(--text); }
.sc-img { aspect-ratio: 16 / 9; overflow: hidden; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 50% 40%, #10331a 0%, var(--bg-card) 70%); }
.sc-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sc-img.contain img { width: 78%; height: 78%; object-fit: contain; }
.sc-body { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 6px; }
.sc-tag { font-family: 'Share Tech Mono', monospace; font-size: 0.66rem; letter-spacing: 1.5px; text-transform: uppercase; color: var(--text-sec); }
.sc-title { font-size: 0.88rem; font-weight: 600; line-height: 1.4; color: #e6f2e6; }
.story-card:hover .sc-title { color: var(--green); }

.news-list li.has-thumb { display: grid; grid-template-columns: 84px 1fr; gap: 14px; align-items: start; padding-left: 0; }
.news-list li.has-thumb::before { display: none; }
.news-thumb { width: 84px; aspect-ratio: 16 / 9; object-fit: cover; border: 1px solid var(--border); background: var(--bg-card); display: block; margin-top: 3px; }

@media (max-width: 1000px) { .story-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .feature-story { grid-template-columns: minmax(0, 1fr); }
  .fs-img { min-height: 0; aspect-ratio: 16 / 9; }
  .fs-body { padding: 18px 18px 20px; }
}
@media (max-width: 640px) {
  .hero-logo { width: min(80vw, 420px); }
  .story-grid { grid-template-columns: 1fr; gap: 10px; }
  .story-card { flex-direction: row; }
  .sc-img { width: 120px; flex-shrink: 0; aspect-ratio: 16 / 10; }
  .sc-body { padding: 10px 12px; justify-content: center; }
  .news-list li.has-thumb { grid-template-columns: 64px 1fr; gap: 10px; }
  .news-thumb { width: 64px; }
}

/* ── NEW RELEASES ───────────────────────────────────────────── */
#new-releases { background: var(--bg-up); }
.releases-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 20px; margin-top: 8px;
}
.release-card {
  background: var(--bg-card); border: 1px solid var(--border);
  display: flex; flex-direction: column; overflow: hidden;
  transition: border-color 0.15s, transform 0.15s;
}
.release-card:hover { border-color: var(--green); transform: translateY(-2px); }
.release-img {
  display: flex; align-items: center; justify-content: center;
  aspect-ratio: 16 / 10; width: 100%;
  background: radial-gradient(circle at 50% 40%, #10331a 0%, var(--bg-card) 70%);
  border-bottom: 1px solid var(--border);
}
.release-img img { max-height: 76%; max-width: 76%; object-fit: contain; }
.release-img { overflow: hidden; }
.release-img img[src*="/images/art/"] { width: 100%; height: 100%; max-width: none; max-height: none; object-fit: cover; }
.release-body { padding: 18px 18px 20px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.release-date {
  font-family: 'Share Tech Mono', monospace; font-size: 0.62rem;
  letter-spacing: 1.5px; text-transform: uppercase; color: var(--yellow);
}
.release-date.released { color: var(--green); }
.release-body h3, .release-body h2 {
  font-family: 'Orbitron', sans-serif; font-size: 0.92rem; font-weight: 700;
  color: var(--text); line-height: 1.35;
}
.release-platforms { display: flex; gap: 6px; flex-wrap: wrap; }
.release-platform-tag {
  font-family: 'Share Tech Mono', monospace; font-size: 0.6rem;
  letter-spacing: 1px; padding: 2px 7px; border: 1px solid currentColor;
  text-transform: uppercase;
}
.release-platform-tag.ps { color: var(--ps); }
.release-platform-tag.xbox { color: var(--xbox); }
.release-platform-tag.sw { color: var(--sw); }
.release-platform-tag.pc { color: var(--pc); }
.release-buy {
  margin-top: auto; padding-top: 10px;
  font-family: 'Share Tech Mono', monospace; font-size: 0.72rem;
  color: var(--green); border-top: 1px solid var(--border);
  display: block; padding-top: 12px;
}
.release-buy:hover { color: var(--cyan); }
/* ── NEWSLETTER ─────────────────────────────────────────────── */
#newsletter { background: var(--bg-up); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.nl-inner { max-width: 720px; margin: 0 auto; padding: 64px 24px; text-align: center; }
.nl-inner h2 {
  font-family: 'Orbitron', sans-serif; font-weight: 900;
  font-size: clamp(1.3rem, 3vw, 1.9rem); color: var(--green);
  letter-spacing: 1px; margin-bottom: 14px;
}
.nl-inner > p { color: var(--text); font-size: 0.95rem; line-height: 1.75; margin-bottom: 8px; }
.nl-meta { font-size: 0.8rem; color: var(--text-sec); margin-bottom: 26px; }
.nl-form { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.nl-form input[type="email"] {
  flex: 1 1 300px; max-width: 380px;
  background: var(--bg-card); border: 1px solid var(--border);
  color: var(--text); padding: 14px 16px;
  font-family: 'Inter', sans-serif; font-size: 0.9rem;
}
.nl-form input[type="email"]:focus { outline: none; border-color: var(--green); }
.nl-form input[type="email"]::placeholder { color: var(--text-sec); }
.nl-form button {
  background: var(--green); color: #04140a; border: none;
  font-family: 'Orbitron', sans-serif; font-weight: 700; font-size: 0.8rem;
  letter-spacing: 1px; text-transform: uppercase;
  padding: 14px 26px; cursor: pointer; transition: background 0.15s, transform 0.15s;
}
.nl-form button:hover { background: #6dff8f; transform: translateY(-1px); }
.nl-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.nl-fine { font-size: 0.75rem; color: var(--text-sec); margin-top: 18px; line-height: 1.6; }
.nl-fine a { color: var(--text-sec); text-decoration: underline; }
.release-press-note {
  font-size: 0.6rem; color: var(--text-sec); font-family: 'Share Tech Mono', monospace;
  letter-spacing: 0.5px; margin-top: -4px;
}

/* Section pages: clear the fixed header */
body.subpage main { padding-top: 64px; }

/* Front page: lead stories + explore tiles (2026-10-13) */
#latest .section-inner { padding-top: 56px; }
#explore { background: var(--bg-up); }
.sc-dek { font-size: 0.8rem; line-height: 1.5; color: var(--text-sec); }
.explore-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1000px) { .explore-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .explore-grid { grid-template-columns: 1fr; } }
.weekly-more { margin-top: 20px; font-family: 'Share Tech Mono', monospace; font-size: 0.8rem; }
.weekly-more a { color: var(--cyan); }

/* Accessibility: in-text links are underlined, not just colored (2026-10-13) */
section p a:not([class]), section li a:not([class]), section td a:not([class]) { text-decoration: underline; text-underline-offset: 2px; }

/* AVIF <picture> wrappers (added at build time) must not change layout (2026-10-13) */
picture { display: contents; }

/* Original buying guidance under the live feeds (2026-10-13) */
.section-guide { margin-top: 34px; padding-top: 26px; border-top: 1px solid var(--border); }
.section-guide h2 { font-family: 'Orbitron', sans-serif; font-size: 1rem; letter-spacing: 1.5px; color: var(--green); margin-bottom: 14px; text-transform: uppercase; }

/* Anchor links land below the sticky/fixed header (2026-10-14) */
[id] { scroll-margin-top: 84px; }

/* Gaming gear deals on the Deals page (manufacturer product photos, 2026-10-16) */
.gear-deals { margin: 8px 0 44px; }
.gear-title { font-family: 'Orbitron', sans-serif; font-size: 1.05rem; letter-spacing: 1.5px; text-transform: uppercase; color: var(--green); margin: 10px 0 12px; }
.gear-intro { max-width: 780px; font-size: 0.9rem; line-height: 1.7; color: var(--text); margin-bottom: 20px; }
.gear-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.gear-card { display: flex; flex-direction: column; background: var(--bg-card); border: 1px solid var(--border); color: var(--text); transition: border-color 0.2s, transform 0.2s; }
.gear-card:hover { border-color: var(--green); transform: translateY(-2px); color: var(--text); }
.gear-img { aspect-ratio: 4 / 3; background: #0c0e1a; overflow: hidden; width: 100%; } /* matches the backdrop baked into the cutouts */
.gear-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gear-body { padding: 14px 14px 16px; display: flex; flex-direction: column; gap: 7px; flex: 1; }
.gear-body h3 { font-family: 'Orbitron', sans-serif; font-size: 0.82rem; line-height: 1.35; color: #fff; }
.gear-body p { font-size: 0.8rem; line-height: 1.55; color: var(--text-sec); }
.gear-badge { align-self: flex-start; font-family: 'Share Tech Mono', monospace; font-size: 0.68rem; letter-spacing: 1.5px; text-transform: uppercase; padding: 3px 8px; }
.gear-badge.sale { background: var(--green); color: #000; }
.gear-badge.seller { border: 1px solid var(--cyan); color: var(--cyan); }
.gear-list { font-family: 'Share Tech Mono', monospace; font-size: 0.74rem; color: var(--text); margin-top: auto; }
.gear-cta { font-family: 'Share Tech Mono', monospace; font-size: 0.78rem; color: var(--green); }
.gear-credit { font-size: 0.66rem; color: var(--text-sec); }
@media (max-width: 1000px) { .gear-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .gear-grid { grid-template-columns: 1fr; } }