:root {
  --bg: #0e0e10;
  --surface-from: #2a2a35;
  --surface-to: #1a1a22;
  --border: #2f2f3a;
  --border-hover: #5a5a7a;
  --text: #ffffff;
  --muted: #999999;
  --accent: #ff6bcb;
  --max-width: 1200px;
  --radius: 12px;
  --gap: 16px;
}

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  position: relative;
  overflow-x: hidden;
}

/* Ambient background blobs — slow drifting tones behind everything */
body::before, body::after,
.ambient-blob {
  content: '';
  position: fixed;
  border-radius: 50%;
  filter: blur(140px);
  z-index: 0;
  pointer-events: none;
  will-change: transform;
}
body::before {
  width: 620px; height: 620px;
  background: var(--accent);
  opacity: 0.18;
  top: -160px; left: -180px;
  animation: drift-a 28s ease-in-out infinite alternate;
}
body::after {
  width: 620px; height: 620px;
  background: #4a78ff;
  opacity: 0.16;
  bottom: -220px; right: -200px;
  animation: drift-b 36s ease-in-out infinite alternate;
}
.ambient { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
.ambient-blob { display: block; }
.ambient-blob-c {
  width: 480px; height: 480px;
  background: #5fffd2;
  opacity: 0.10;
  top: 30%; left: 60%;
  animation: drift-c 42s ease-in-out infinite alternate;
}
.ambient-blob-d {
  width: 380px; height: 380px;
  background: #ffb347;
  opacity: 0.09;
  top: 65%; left: 5%;
  animation: drift-d 33s ease-in-out infinite alternate;
}
.ambient-blob-e {
  width: 320px; height: 320px;
  background: #c061ff;
  opacity: 0.12;
  top: 12%; left: 45%;
  animation: drift-e 47s ease-in-out infinite alternate;
}
@keyframes drift-a { from { transform: translate(0, 0); }   to { transform: translate(80px, 60px); } }
@keyframes drift-b { from { transform: translate(0, 0); }   to { transform: translate(-60px, -90px); } }
@keyframes drift-c { from { transform: translate(0, 0) scale(1); } to { transform: translate(-90px, 50px) scale(1.1); } }
@keyframes drift-d { from { transform: translate(0, 0) scale(1); } to { transform: translate(70px, -60px) scale(0.95); } }
@keyframes drift-e { from { transform: translate(0, 0) scale(1); } to { transform: translate(-40px, 80px) scale(1.05); } }

/* Subtle film grain overlay — fixed across viewport, always above blobs but below content */
html::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.06;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' seed='5'/><feColorMatrix values='0 0 0 0 1   0 0 0 0 1   0 0 0 0 1   0 0 0 0.6 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 160px 160px;
}

/* Lift content above the ambient blobs and grain */
.page-header, .page-main, .page-footer { position: relative; z-index: 1; }

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

/* Header */
.page-header {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 48px 32px 24px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}
.header-titles { min-width: 0; }
.wordmark {
  font-size: clamp(32px, 6vw, 56px);
  font-weight: 800;
  letter-spacing: -1.5px;
  margin: 0;
  position: relative;
  background: linear-gradient(110deg, #ffffff 30%, var(--accent) 50%, #ffffff 70%);
  background-size: 250% 100%;
  background-position: 100% 0;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: wordmark-shimmer 7s ease-in-out infinite;
}
.wordmark::before {
  /* Soft accent halo behind the wordmark text */
  content: attr(data-text);
  position: absolute;
  inset: 0;
  background: none;
  -webkit-text-fill-color: transparent;
  color: transparent;
  text-shadow: 0 0 32px rgba(255, 107, 203, 0.45), 0 0 12px rgba(255, 107, 203, 0.35);
  z-index: -1;
  pointer-events: none;
}
@keyframes wordmark-shimmer {
  0% { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}
.tagline {
  color: var(--muted);
  margin: 4px 0 0;
  font-size: 14px;
}

/* Support / buy-me-a-coffee button (used in the header and the bottom bar) */
.support-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.2px;
  color: #fff;
  padding: 9px 16px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(255, 107, 203, 0.22), rgba(255, 179, 71, 0.18));
  border: 1px solid rgba(255, 107, 203, 0.4);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  white-space: nowrap;
  transition: transform 220ms cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 220ms, border-color 220ms, background 220ms;
}
.support-btn-icon { font-size: 15px; line-height: 1; }
.support-btn:hover,
.support-btn:focus-visible {
  transform: translateY(-2px);
  border-color: rgba(255, 107, 203, 0.7);
  box-shadow: 0 10px 28px -8px rgba(255, 107, 203, 0.5), 0 0 0 3px rgba(255, 107, 203, 0.14);
  background: linear-gradient(135deg, rgba(255, 107, 203, 0.32), rgba(255, 179, 71, 0.26));
}
.header-support { margin-top: 6px; }

/* Bottom support bar — a prominent, centered version above the footer */
.support-bar {
  position: relative;
  z-index: 1;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 16px 32px 8px;
  display: flex;
  justify-content: center;
}
.support-btn-large {
  font-size: 15px;
  padding: 13px 26px;
  animation: support-pulse 3s ease-in-out infinite;
}
.support-btn-large .support-btn-icon { font-size: 18px; }
.support-btn-large:hover,
.support-btn-large:focus-visible { animation-play-state: paused; }
@keyframes support-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 107, 203, 0); }
  55%      { box-shadow: 0 0 26px -2px rgba(255, 107, 203, 0.45); }
}

/* Main */
.page-main {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 32px 48px;
}
.hero-slot { margin-bottom: 32px; }
.error-slot {
  color: var(--muted);
  text-align: center;
  padding: 64px 0;
  font-size: 14px;
}

/* Hero */
.hero-link {
  display: block;
  animation: enter-up 700ms cubic-bezier(0.2, 0.8, 0.2, 1) backwards;
  perspective: 1400px;
}
.hero {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  min-height: 360px;
  background-color: var(--surface-to);
  border: 1px solid var(--border);
  transform-style: preserve-3d;
  transform:
    rotateX(var(--rotate-x, 0deg))
    rotateY(var(--rotate-y, 0deg))
    translateY(var(--lift, 0px));
  transition: transform 120ms ease-out, border-color 180ms, box-shadow 180ms;
  animation: hero-breathe 5.4s ease-in-out infinite;
}
@keyframes hero-breathe {
  0%, 100% {
    box-shadow:
      0 12px 36px -16px rgba(0, 0, 0, 0.5),
      0 0 0 0 rgba(255, 107, 203, 0.0);
  }
  50% {
    box-shadow:
      0 18px 56px -16px rgba(0, 0, 0, 0.55),
      0 0 32px -2px rgba(255, 107, 203, 0.28);
  }
}
.hero::before {
  /* Background image lives on this layer so we can pan/zoom it without
     disturbing the chip, the overlay, or the hover transform on .hero. */
  content: '';
  position: absolute;
  inset: 0;
  background-image: var(--hero-image);
  background-size: cover;
  background-position: center;
  transform: scale(1.06);
  animation: ken-burns 28s ease-in-out infinite alternate;
  z-index: 0;
}
.hero::after {
  /* Cursor spotlight */
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    260px circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
    rgba(255, 255, 255, 0.18),
    transparent 65%
  );
  opacity: 0;
  transition: opacity 250ms ease-out;
  pointer-events: none;
  z-index: 3;
}
.hero-link:hover .hero,
.hero-link:focus-visible .hero {
  --lift: -2px;
  border-color: var(--border-hover);
  box-shadow: 0 18px 50px -10px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 107, 203, 0.25);
}
.hero-link:hover .hero::after,
.hero-link:focus-visible .hero::after { opacity: 1; }
@keyframes ken-burns {
  from { transform: scale(1.06) translate(0, 0); }
  to   { transform: scale(1.14) translate(-2%, 1.5%); }
}
.hero-chip {
  position: absolute;
  top: 16px;
  right: 16px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--accent);
  background: rgba(0,0,0,0.45);
  backdrop-filter: blur(10px) saturate(150%);
  -webkit-backdrop-filter: blur(10px) saturate(150%);
  padding: 5px 12px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  z-index: 2;
  animation: chip-pulse 2.6s ease-in-out infinite;
}
@keyframes chip-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 107, 203, 0.0); }
  50%      { box-shadow: 0 0 18px 4px rgba(255, 107, 203, 0.55); }
}
.hero-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 32px;
  background: linear-gradient(to top, rgba(0,0,0,0.85) 25%, rgba(0,0,0,0.4) 55%, transparent 75%);
  z-index: 1;
}
.hero-title {
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 800;
  letter-spacing: -0.8px;
  margin: 0 0 8px;
}
.hero-blurb {
  color: #ddd;
  margin: 0 0 16px;
  max-width: 560px;
}
.hero-cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #fff;
  color: #000;
  padding: 9px 18px;
  border-radius: 8px;
  font-weight: 700;
  font-size: 14px;
  width: fit-content;
  transition: transform 220ms cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 220ms;
  box-shadow: 0 0 0 0 rgba(255, 107, 203, 0);
}
/* Soft outward halo on the Play button — keeps gently inviting a click. */
.hero-cta::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: 0 0 0 0 rgba(255, 107, 203, 0.55);
  animation: cta-halo 2.6s ease-in-out infinite;
}
@keyframes cta-halo {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 107, 203, 0.5); }
  60%      { box-shadow: 0 0 0 14px rgba(255, 107, 203, 0); }
}
.hero-link:hover .hero-cta,
.hero-link:focus-visible .hero-cta {
  transform: translateY(-1px) scale(1.04);
  box-shadow: 0 8px 24px -4px rgba(255, 107, 203, 0.55), 0 0 0 4px rgba(255, 107, 203, 0.18);
}
.hero-link:hover .hero-cta::after,
.hero-link:focus-visible .hero-cta::after { animation-play-state: paused; }

/* Grid */
.grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--gap);
}

/* Tile */
.tile { display: contents; }
.tile-link {
  position: relative;
  display: flex;
  flex-direction: column;
  background: linear-gradient(160deg, var(--surface-from), var(--surface-to));
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  height: 100%;
  isolation: isolate;
  transform-style: preserve-3d;
  transform:
    perspective(1100px)
    rotateX(var(--rotate-x, 0deg))
    rotateY(var(--rotate-y, 0deg))
    scale(var(--scale, 1));
  transition: transform 120ms ease-out, border-color 220ms, box-shadow 260ms;
  animation: enter-up 500ms cubic-bezier(0.2, 0.8, 0.2, 1) backwards;
  animation-delay: calc(var(--stagger-i, 0) * 60ms);
}
.tile-link::before {
  /* Cursor spotlight */
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    220px circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
    rgba(255, 107, 203, 0.18),
    transparent 60%
  );
  opacity: 0;
  transition: opacity 220ms ease-out;
  pointer-events: none;
  z-index: 3;
  border-radius: inherit;
}
.tile-link::after {
  /* Diagonal shine sweep */
  content: '';
  position: absolute;
  top: -50%;
  left: -120%;
  width: 60%;
  height: 220%;
  background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.10) 45%, rgba(255, 255, 255, 0.18) 50%, rgba(255, 255, 255, 0.10) 55%, transparent 100%);
  transform: skewX(-18deg);
  transition: left 700ms cubic-bezier(0.2, 0.8, 0.2, 1);
  pointer-events: none;
  z-index: 2;
}
.tile-link:hover,
.tile-link:focus-visible {
  --scale: 1.03;
  border-color: rgba(255, 107, 203, 0.55);
  box-shadow:
    0 18px 40px -12px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(255, 107, 203, 0.35),
    0 0 28px -4px rgba(255, 107, 203, 0.45);
}
.tile-link:hover::before,
.tile-link:focus-visible::before { opacity: 1; }
.tile-link:hover::after,
.tile-link:focus-visible::after { left: 200%; }

.tile-image {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--surface-to);
  overflow: hidden;
}
.tile-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 500ms cubic-bezier(0.2, 0.8, 0.2, 1), filter 500ms;
}
.tile-link:hover .tile-image img,
.tile-link:focus-visible .tile-image img {
  transform: scale(1.07);
  filter: brightness(1.05) saturate(1.1);
}

/* Shared entrance keyframes — used by hero and each tile */
@keyframes enter-up {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
.tile-blurb {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0;
  padding: 12px;
  background: linear-gradient(to top, rgba(0,0,0,0.92), rgba(0,0,0,0));
  color: #eee;
  font-size: 12px;
  line-height: 1.4;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 180ms, transform 180ms;
}
.tile-link:hover .tile-blurb,
.tile-link:focus-visible .tile-blurb { opacity: 1; transform: translateY(0); }
.tile-body {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 12px 14px;
}
.tile-title {
  font-size: 15px;
  font-weight: 600;
  margin: 0;
  letter-spacing: -0.2px;
  /* truncate long titles like "The Adventures of the Small Electrician" */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tile-tag {
  flex: 0 0 auto;
  font-size: 11px;
  color: #ccc;
  background: rgba(255,255,255,0.06);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 3px 10px;
  border-radius: 999px;
  transition: color 220ms, border-color 220ms, background 220ms;
}
.tile-link:hover .tile-tag,
.tile-link:focus-visible .tile-tag {
  color: #fff;
  border-color: rgba(255, 107, 203, 0.35);
  background: rgba(255, 107, 203, 0.12);
}

/* Footer */
.page-footer {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 32px;
  color: var(--muted);
  font-size: 13px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.page-footer p { margin: 0; }
.page-footer a { color: var(--muted); text-decoration: underline; }

/* Visitor counter */
.visitor-counter {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
}
.visitor-counter-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #4ade80;
  box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.8);
  animation: pulse-dot 2.2s ease-in-out infinite;
}
.visitor-counter-label {
  text-transform: uppercase;
  letter-spacing: 1.4px;
  font-weight: 600;
  color: var(--muted);
}
.visitor-counter-value {
  font-family: ui-monospace, "SF Mono", "Cascadia Mono", "Roboto Mono", Menlo, Consolas, monospace;
  font-weight: 700;
  font-size: 13px;
  color: var(--accent);
  background: rgba(255, 107, 203, 0.10);
  border: 1px solid rgba(255, 107, 203, 0.28);
  padding: 3px 12px;
  border-radius: 6px;
  letter-spacing: 1px;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 12px rgba(255, 107, 203, 0.45);
  min-width: 5ch;
  text-align: center;
}
@keyframes pulse-dot {
  0%, 100% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.7); }
  50%      { box-shadow: 0 0 0 6px rgba(74, 222, 128, 0); }
}

/* Cursor-follow ambient glow (positioned by cursor.js).
   Sits at z-index 0 — behind cards, in front of the body blobs — so it
   shows in the gutters and around the hero without washing out screenshots. */
.cursor-glow {
  position: fixed;
  left: 0;
  top: 0;
  width: 760px;
  height: 760px;
  margin-left: -380px;
  margin-top: -380px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 107, 203, 0.22), transparent 62%);
  filter: blur(30px);
  pointer-events: none;
  z-index: 0;
  opacity: 0;
  transition: opacity 600ms ease-out;
  will-change: transform;
  mix-blend-mode: screen;
}
.cursor-glow.cursor-glow-visible { opacity: 1; }

/* Custom text selection — accent on dark */
::selection { background: rgba(255, 107, 203, 0.55); color: #fff; }

/* Footer link — animated underline that draws on hover */
.page-footer a {
  position: relative;
  text-decoration: none;
  padding-bottom: 2px;
}
.page-footer a::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 380ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.page-footer a:hover,
.page-footer a:focus-visible { color: #fff; }
.page-footer a:hover::after,
.page-footer a:focus-visible::after { transform: scaleX(1); }

/* Focus */
a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition: none !important;
    animation: none !important;
  }
  .tile-link { transform: none !important; }
  .tile-link:hover, .tile-link:focus-visible { transform: none !important; }
  .tile-link::after { display: none; }
  .tile-link:hover .tile-image img,
  .tile-link:focus-visible .tile-image img { transform: none; filter: none; }
  .hero { transform: none !important; }
  .hero-link:hover .hero, .hero-link:focus-visible .hero { transform: none !important; }
  .hero::before { transform: scale(1.06); }
  .hero::after, .tile-link::before { display: none; }
  body::before, body::after,
  .ambient-blob { opacity: 0; }
  html::after { display: none; }
}

/* Responsive */
@media (max-width: 640px) {
  .page-header, .page-main, .page-footer { padding-left: 20px; padding-right: 20px; }
  .hero { min-height: 280px; }
  .hero-overlay { padding: 20px; }
  .page-footer { justify-content: flex-start; }
}

/* ===========================================================
   Game detail page (cpapgarage.html and future siblings)
   =========================================================== */

.detail-header {
  position: relative;
  z-index: 1;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 24px 32px 8px;
}
.back-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.4px;
  padding: 8px 14px 8px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.03);
  transition: color 180ms, border-color 180ms, background 180ms, transform 180ms;
}
.back-link:hover, .back-link:focus-visible {
  color: var(--text);
  border-color: var(--border-hover);
  background: rgba(255, 255, 255, 0.06);
  transform: translateX(-2px);
}
.back-arrow {
  font-size: 16px;
  transition: transform 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.back-link:hover .back-arrow,
.back-link:focus-visible .back-arrow { transform: translateX(-3px); }

.detail-main {
  position: relative;
  z-index: 1;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 16px 32px 64px;
}

/* Hero on the detail page. Larger and richer than the index hero. */
.detail-hero {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  min-height: 420px;
  border: 1px solid var(--border);
  background: var(--surface-to);
  margin-bottom: 48px;
  isolation: isolate;
  animation: enter-up 700ms cubic-bezier(0.2, 0.8, 0.2, 1) backwards;
}
.detail-hero-bg {
  position: absolute;
  inset: 0;
  background-image: var(--hero-image);
  background-size: cover;
  background-position: center;
  transform: scale(1.06);
  animation: ken-burns 28s ease-in-out infinite alternate;
  z-index: 0;
}
.detail-hero::before {
  /* Stronger overlay so the text on top stays readable. */
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, rgba(0,0,0,0.92) 10%, rgba(0,0,0,0.65) 45%, rgba(0,0,0,0.25) 75%, rgba(0,0,0,0.55) 100%),
    linear-gradient(to right, rgba(0,0,0,0.55), rgba(0,0,0,0));
  z-index: 1;
}
.detail-hero-inner {
  position: relative;
  z-index: 2;
  padding: 48px 40px 40px;
  max-width: 640px;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 420px;
  justify-content: flex-end;
}
.detail-chip {
  display: inline-block;
  width: fit-content;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--accent);
  background: rgba(0,0,0,0.45);
  backdrop-filter: blur(10px) saturate(150%);
  -webkit-backdrop-filter: blur(10px) saturate(150%);
  padding: 5px 12px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  margin: 0 0 16px;
}
.detail-title {
  font-size: clamp(36px, 6vw, 56px);
  font-weight: 800;
  letter-spacing: -1.2px;
  margin: 0 0 6px;
  line-height: 1.05;
}
.detail-tagline {
  color: var(--accent);
  font-size: clamp(15px, 1.4vw, 18px);
  font-weight: 600;
  letter-spacing: 0.3px;
  margin: 0 0 14px;
  text-shadow: 0 0 24px rgba(255, 107, 203, 0.35);
}
.detail-lede {
  color: #ddd;
  font-size: 15px;
  line-height: 1.6;
  margin: 0 0 24px;
  max-width: 560px;
}
.detail-cta-row {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.detail-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  color: #000;
  padding: 11px 22px;
  border-radius: 8px;
  font-weight: 700;
  font-size: 14px;
  width: fit-content;
  transition: transform 220ms cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 220ms;
  box-shadow: 0 0 0 0 rgba(255, 107, 203, 0);
}
.detail-cta:hover, .detail-cta:focus-visible {
  transform: translateY(-1px) scale(1.04);
  box-shadow: 0 8px 24px -4px rgba(255, 107, 203, 0.55), 0 0 0 4px rgba(255, 107, 203, 0.18);
}
.detail-cta-icon { font-size: 12px; }
.detail-cta-hint {
  color: var(--muted);
  font-size: 12px;
}
.detail-cta-large {
  padding: 14px 28px;
  font-size: 15px;
}

/* Sections shared layout */
.detail-section {
  margin: 0 0 56px;
  animation: enter-up 700ms cubic-bezier(0.2, 0.8, 0.2, 1) backwards;
  animation-delay: 120ms;
}
.detail-section-title {
  font-size: clamp(22px, 2.4vw, 28px);
  font-weight: 700;
  letter-spacing: -0.4px;
  margin: 0 0 20px;
  position: relative;
  padding-left: 14px;
}
.detail-section-title::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  bottom: 8px;
  width: 4px;
  border-radius: 4px;
  background: linear-gradient(to bottom, var(--accent), #4a78ff);
}

/* About — two columns */
.detail-about {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 36px;
  align-items: start;
}
.detail-about-text p {
  margin: 0 0 14px;
  color: #ddd;
  font-size: 15px;
  line-height: 1.7;
}
.detail-about-text strong { color: var(--text); }

.detail-features {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.detail-features li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  background: linear-gradient(160deg, var(--surface-from), var(--surface-to));
  border: 1px solid var(--border);
  border-radius: 10px;
  transition: border-color 220ms, transform 220ms;
}
.detail-features li:hover {
  border-color: rgba(255, 107, 203, 0.35);
  transform: translateX(2px);
}
.detail-feature-dot {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-top: 8px;
  background: var(--accent);
  box-shadow: 0 0 12px rgba(255, 107, 203, 0.6);
}
.detail-features strong {
  display: block;
  font-size: 14px;
  margin-bottom: 2px;
}
.detail-features p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

/* Six-step gameplay loop */
.loop-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--gap);
  counter-reset: loop;
}
.loop-step {
  position: relative;
  padding: 20px 18px 18px;
  background: linear-gradient(160deg, var(--surface-from), var(--surface-to));
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  isolation: isolate;
  transform-style: preserve-3d;
  transform:
    perspective(1100px)
    rotateX(var(--rotate-x, 0deg))
    rotateY(var(--rotate-y, 0deg));
  transition: transform 120ms ease-out, border-color 220ms, box-shadow 260ms;
}
.loop-step::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    180px circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
    rgba(255, 107, 203, 0.14),
    transparent 60%
  );
  opacity: 0;
  transition: opacity 220ms;
  pointer-events: none;
  z-index: 0;
}
.loop-step:hover {
  border-color: rgba(255, 107, 203, 0.4);
  box-shadow: 0 14px 36px -10px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 107, 203, 0.25);
}
.loop-step:hover::before { opacity: 1; }
.loop-step-n {
  display: inline-block;
  font-family: ui-monospace, "SF Mono", "Cascadia Mono", "Roboto Mono", Menlo, Consolas, monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.6px;
  color: var(--accent);
  background: rgba(255, 107, 203, 0.10);
  border: 1px solid rgba(255, 107, 203, 0.28);
  padding: 3px 10px;
  border-radius: 6px;
  margin-bottom: 12px;
  position: relative;
  z-index: 1;
}
.loop-step h3 {
  margin: 0 0 6px;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.2px;
  position: relative;
  z-index: 1;
}
.loop-step p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
  position: relative;
  z-index: 1;
}

/* Screenshot gallery */
.gallery {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--gap);
}
.gallery-item {
  margin: 0;
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--surface-to);
  transform-style: preserve-3d;
  transform:
    perspective(1100px)
    rotateX(var(--rotate-x, 0deg))
    rotateY(var(--rotate-y, 0deg));
  transition: transform 120ms ease-out, border-color 220ms, box-shadow 260ms;
}
.gallery-item:hover {
  border-color: rgba(255, 107, 203, 0.4);
  box-shadow: 0 18px 40px -12px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 107, 203, 0.3);
}
.gallery-item-wide { grid-column: 1 / -1; }
.gallery-item img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  transition: transform 500ms cubic-bezier(0.2, 0.8, 0.2, 1), filter 500ms;
}
.gallery-item:hover img {
  transform: scale(1.04);
  filter: brightness(1.05) saturate(1.1);
}
.gallery-item figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 14px 16px;
  background: linear-gradient(to top, rgba(0,0,0,0.92) 30%, rgba(0,0,0,0));
  color: #eee;
  font-size: 13px;
  line-height: 1.4;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 220ms, transform 220ms;
}
.gallery-item:hover figcaption {
  opacity: 1;
  transform: translateY(0);
}

/* Bottom CTA section */
.detail-footer-cta {
  text-align: center;
  padding: 40px 24px;
  background: linear-gradient(160deg, rgba(255, 107, 203, 0.08), rgba(74, 120, 255, 0.06));
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-top: 16px;
}
.detail-footer-cta .detail-section-title {
  padding-left: 0;
  margin-bottom: 8px;
}
.detail-footer-cta .detail-section-title::before { display: none; }
.detail-footer-cta-sub {
  color: var(--muted);
  font-size: 14px;
  margin: 0 0 22px;
}
.detail-footer-cta .detail-cta { margin: 0 auto; }

/* Detail responsive */
@media (max-width: 760px) {
  .detail-header, .detail-main { padding-left: 20px; padding-right: 20px; }
  .detail-hero { min-height: 360px; }
  .detail-hero-inner { padding: 32px 24px 28px; min-height: 360px; }
  .detail-about { grid-template-columns: 1fr; gap: 24px; }
  .gallery { grid-template-columns: 1fr; }
  .gallery-item-wide { grid-column: auto; }
}

/* Stats strip — sits under the hero, big numbers + label */
.stats-strip {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--gap);
  margin: -32px 0 48px;
  padding: 18px 8px;
  background: linear-gradient(160deg, rgba(255, 107, 203, 0.06), rgba(74, 120, 255, 0.05));
  border: 1px solid var(--border);
  border-radius: var(--radius);
  position: relative;
  z-index: 2;
}
.stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 8px 4px;
  border-right: 1px solid rgba(255, 255, 255, 0.04);
}
.stat:last-child { border-right: none; }
.stat-n {
  font-family: ui-monospace, "SF Mono", "Cascadia Mono", "Roboto Mono", Menlo, Consolas, monospace;
  font-size: clamp(22px, 3vw, 32px);
  font-weight: 800;
  letter-spacing: -0.5px;
  background: linear-gradient(110deg, #fff 20%, var(--accent) 60%, #fff 90%);
  background-size: 200% 100%;
  background-position: 100% 0;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: wordmark-shimmer 9s ease-in-out infinite;
}
.stat-l {
  color: var(--muted);
  font-size: 11px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  font-weight: 600;
}

/* Section lede / subhead text reused across new sections */
.section-lede {
  color: #ddd;
  font-size: 15px;
  line-height: 1.7;
  margin: 0 0 24px;
  max-width: 760px;
}
.section-lede strong { color: var(--text); }
.subhead {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--accent);
  margin: 32px 0 16px;
}

/* Brands strip */
.brands-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 8px;
}
.brand-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px 8px 8px;
  background: linear-gradient(160deg, var(--surface-from), var(--surface-to));
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  transition: border-color 220ms, transform 220ms;
}
.brand-pill:hover { border-color: rgba(255, 107, 203, 0.45); transform: translateY(-1px); }
.brand-pill-tag {
  font-family: ui-monospace, "SF Mono", "Cascadia Mono", "Roboto Mono", Menlo, Consolas, monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  padding: 4px 8px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--accent);
}
.brand-rm  .brand-pill-tag { color: #4ade80; }
.brand-ph  .brand-pill-tag { color: #60a5fa; }
.brand-fp  .brand-pill-tag { color: #fbbf24; }
.brand-bmc .brand-pill-tag { color: #f472b6; }
.brand-low .brand-pill-tag { color: #c084fc; }

/* Part tier grid */
.tier-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--gap);
}
.tier-card {
  position: relative;
  padding: 18px 18px 16px;
  background: linear-gradient(160deg, var(--surface-from), var(--surface-to));
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  transform-style: preserve-3d;
  transform:
    perspective(1100px)
    rotateX(var(--rotate-x, 0deg))
    rotateY(var(--rotate-y, 0deg));
  transition: transform 120ms ease-out, border-color 220ms, box-shadow 260ms;
}
.tier-card:hover { border-color: rgba(255, 107, 203, 0.4); box-shadow: 0 14px 30px -10px rgba(0,0,0,0.5); }
.tier-card::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(to right, transparent, var(--tier-color, var(--accent)), transparent);
}
.tier-refurb  { --tier-color: #94a3b8; }
.tier-oem     { --tier-color: #4ade80; }
.tier-premium { --tier-color: var(--accent); }
.tier-generic { --tier-color: #fbbf24; }
.tier-label {
  display: inline-block;
  font-size: 11px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--tier-color, var(--accent));
}
.tier-q {
  display: inline-block;
  margin-left: 8px;
  font-family: ui-monospace, "SF Mono", "Cascadia Mono", "Roboto Mono", Menlo, Consolas, monospace;
  font-size: 11px;
  color: var(--muted);
  background: rgba(255,255,255,0.04);
  padding: 2px 8px;
  border-radius: 4px;
}
.tier-card p {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

/* Origin chip list (where machines come from) */
.origin-chips {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.origin-chips li {
  font-size: 12px;
  font-weight: 600;
  color: #ddd;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 5px 12px;
  border-radius: 999px;
  letter-spacing: 0.3px;
  transition: background 200ms, border-color 200ms, color 200ms;
}
.origin-chips li:hover {
  background: rgba(255, 107, 203, 0.10);
  border-color: rgba(255, 107, 203, 0.35);
  color: var(--text);
}

/* Split grid — two-up cards for Sell-or-Rent, Crew-vs-Rival, Rare-vs-Prestige */
.split-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--gap);
}
.split-card {
  padding: 22px 22px 20px;
  background: linear-gradient(160deg, var(--surface-from), var(--surface-to));
  border: 1px solid var(--border);
  border-radius: var(--radius);
  position: relative;
  overflow: hidden;
  transform-style: preserve-3d;
  transform:
    perspective(1100px)
    rotateX(var(--rotate-x, 0deg))
    rotateY(var(--rotate-y, 0deg));
  transition: transform 120ms ease-out, border-color 220ms, box-shadow 260ms;
}
.split-card:hover {
  border-color: rgba(255, 107, 203, 0.4);
  box-shadow: 0 14px 36px -10px rgba(0,0,0,0.55), 0 0 0 1px rgba(255, 107, 203, 0.25);
}
.split-card header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}
.split-card h3 {
  font-size: 18px;
  font-weight: 700;
  margin: 0;
  letter-spacing: -0.2px;
}
.split-icon {
  font-size: 22px;
  filter: drop-shadow(0 0 8px rgba(255, 107, 203, 0.35));
}
.split-card p {
  margin: 0 0 10px;
  color: #ddd;
  font-size: 14px;
  line-height: 1.6;
}
.split-card p:last-child { margin-bottom: 0; }
.split-card strong { color: var(--text); }
.split-sell { border-color: rgba(74, 222, 128, 0.18); }
.split-rent { border-color: rgba(96, 165, 250, 0.20); }
.mini-list {
  list-style: none;
  margin: 8px 0 12px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.mini-list li {
  position: relative;
  padding-left: 14px;
  color: #ccc;
  font-size: 13px;
  line-height: 1.5;
}
.mini-list li::before {
  content: '▸';
  position: absolute;
  left: 0;
  color: var(--accent);
}
.mini-list strong { color: var(--text); }
.mini-note {
  font-size: 12px;
  color: var(--muted);
  font-style: italic;
  margin: 8px 0 0;
}

/* Buyer grid — many small archetype cards */
.buyer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}
.buyer-card {
  padding: 14px 14px 12px;
  background: linear-gradient(160deg, var(--surface-from), var(--surface-to));
  border: 1px solid var(--border);
  border-radius: 10px;
  transition: border-color 220ms, transform 220ms, box-shadow 260ms;
  transform-style: preserve-3d;
  transform:
    perspective(1100px)
    rotateX(var(--rotate-x, 0deg))
    rotateY(var(--rotate-y, 0deg));
}
.buyer-card:hover {
  border-color: rgba(255, 107, 203, 0.4);
  box-shadow: 0 10px 24px -8px rgba(0,0,0,0.5);
}
.buyer-icon {
  font-size: 22px;
  display: block;
  margin-bottom: 4px;
  filter: drop-shadow(0 0 8px rgba(255, 107, 203, 0.25));
}
.buyer-card strong {
  display: block;
  font-size: 14px;
  margin-bottom: 4px;
  letter-spacing: -0.1px;
}
.buyer-card p {
  margin: 0;
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.5;
}
.buyer-card em { color: #ddd; font-style: italic; }
.buyer-more {
  color: var(--muted);
  font-size: 13px;
  font-style: italic;
  max-width: 760px;
  margin: 8px 0 0;
}

/* Upgrade tree — three vertical tier columns */
.upgrade-tree {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap);
}
.upgrade-tier {
  padding: 20px 18px;
  background: linear-gradient(160deg, var(--surface-from), var(--surface-to));
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transform-style: preserve-3d;
  transform:
    perspective(1100px)
    rotateX(var(--rotate-x, 0deg))
    rotateY(var(--rotate-y, 0deg));
  transition: transform 120ms ease-out, border-color 220ms, box-shadow 260ms;
}
.upgrade-tier:hover { border-color: rgba(255, 107, 203, 0.35); }
.upgrade-tier-head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.upgrade-tier-head h3 {
  font-size: 15px;
  font-weight: 700;
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
}
.upgrade-tier-n {
  font-family: ui-monospace, "SF Mono", "Cascadia Mono", "Roboto Mono", Menlo, Consolas, monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.6px;
  color: var(--accent);
  background: rgba(255, 107, 203, 0.10);
  border: 1px solid rgba(255, 107, 203, 0.28);
  padding: 3px 10px;
  border-radius: 6px;
}
.upgrade-tier-count {
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 1px;
  text-transform: uppercase;
}
.upgrade-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.upgrade-list li {
  position: relative;
  padding: 6px 8px 6px 14px;
  font-size: 13px;
  color: #ddd;
  line-height: 1.45;
  border-radius: 6px;
  transition: background 180ms;
}
.upgrade-list li:hover { background: rgba(255, 107, 203, 0.06); }
.upgrade-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 11px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  opacity: 0.55;
}
.upgrade-list li.dim { color: var(--muted); font-style: italic; }
.upgrade-list strong { color: var(--text); }

/* Achievements grid */
.achievements {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px;
}
.achievements li {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  column-gap: 12px;
  align-items: center;
  padding: 10px 14px;
  background: linear-gradient(160deg, var(--surface-from), var(--surface-to));
  border: 1px solid var(--border);
  border-radius: 10px;
  transition: border-color 220ms, transform 220ms;
}
.achievements li:hover { border-color: rgba(255, 107, 203, 0.4); transform: translateY(-1px); }
.ach-i {
  grid-row: 1 / 3;
  font-size: 22px;
  filter: drop-shadow(0 0 8px rgba(255, 107, 203, 0.3));
}
.achievements strong {
  font-size: 13px;
  letter-spacing: -0.1px;
}
.ach-d {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.4;
}

/* Responsive tweaks */
@media (max-width: 960px) {
  .stats-strip { grid-template-columns: repeat(3, 1fr); }
  .stat:nth-child(4), .stat:nth-child(5) { border-right: none; }
  .split-grid { grid-template-columns: 1fr; }
  .upgrade-tree { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .stats-strip { grid-template-columns: repeat(2, 1fr); margin-top: -16px; }
  .stat { border-right: none; }
  .tier-grid { grid-template-columns: 1fr; }
  .buyer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
  .buyer-grid { grid-template-columns: 1fr; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .detail-hero-bg { animation: none; transform: none; }
  .loop-step { transform: none !important; }
  .loop-step:hover { transform: none !important; }
  .gallery-item { transform: none !important; }
  .gallery-item:hover img { transform: none; filter: none; }
  .stat-n { animation: none; -webkit-text-fill-color: var(--accent); color: var(--accent); }
  .tier-card, .split-card, .buyer-card, .upgrade-tier { transform: none !important; }
}