/* ==========================================================================
   CC Games — site.css
   The whole public site in one stylesheet (replaces styles.css,
   improvements.css, mobile.css and slideshow.css).

   Rules of the house:
     - Everything is driven by the tokens in :root. Change a colour there.
     - No inline styles anywhere in the templates: the Content-Security-Policy
       blocks style="" attributes on purpose (see includes/security.php).
     - Animations only use transform/opacity, and all of them switch off for
       visitors who ask for reduced motion.
   ========================================================================== */

/* ── Font (self-hosted: no third-party requests, no tracking) ─────────────── */
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url('../fonts/outfit-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url('../fonts/outfit-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ── Tokens ──────────────────────────────────────────────────────────────── */
:root {
  color-scheme: dark;

  --bg:         #060a14;
  --bg-elev:    #0a1120;
  --surface:    #0d1628;
  --surface-2:  #121d34;
  --surface-3:  #192744;
  /* SOLID colours, not rgba: a see-through 1px border lets a bright image or
     gradient show through its anti-aliased rounded corner, which read as
     coloured "bleeding" pixels around every card. These are what the old
     translucent values looked like over the navy background. */
  --line:        #1a2438;
  --line-strong: #283350;
  --line-hover:  #3a5687;

  --text:   #eef3ff;
  --text-2: #b6c2de;
  --muted:  #8494b6;

  --brand:    #3b82ff;
  --brand-hi: #74a8ff;
  --violet:   #8b5cf6;
  --pink:     #ff4fa3;
  --green:    #34d399;
  --amber:    #fbbf24;
  --danger:   #f87171;

  --grad:      linear-gradient(120deg, #3b82ff 0%, #8b5cf6 52%, #ff4fa3 100%);
  --grad-soft: linear-gradient(135deg, rgba(59, 130, 255, 0.22), rgba(139, 92, 246, 0.18) 55%, rgba(255, 79, 163, 0.16));

  --radius-sm: 10px;
  --radius:    16px;
  --radius-lg: 22px;
  --radius-xl: 30px;

  --shadow:    0 12px 32px -14px rgba(0, 0, 0, 0.7);
  --shadow-lg: 0 32px 64px -24px rgba(0, 0, 0, 0.8);
  /* No 1px ring in here: a second translucent ring outside the border was
     part of the fringing. The hover border colour does that job. */
  --glow:      0 30px 50px -28px rgba(59, 130, 255, 0.8), 0 18px 36px -24px rgba(139, 92, 246, 0.7);

  --container: 1200px;
  --gutter:    clamp(16px, 4vw, 32px);
  --header-h:  72px;
  --ease:      cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);       /* fast start, long soft landing */
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* a little overshoot, for small pops */
  --font:      'Outfit', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

/* ── Base ────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
/* The hidden attribute always wins. Without this, a card's own display:flex
   overrode it and the Games search / Dev Blog filters hid nothing. */
[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + 16px);
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--text);
  font: 400 1rem/1.6 var(--font);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  /* clip, not hidden: hidden would turn body into a scroll container. */
  overflow-x: clip;
}
main { flex: 1; }

img, svg { display: block; max-width: 100%; }
img { height: auto; }
/* <picture> wraps every image for WebP; let it behave like the <img>. */
picture { display: contents; }

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

h1, h2, h3, h4 {
  margin: 0;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
p { margin: 0; text-wrap: pretty; }

:focus-visible {
  outline: 2px solid var(--brand-hi);
  outline-offset: 3px;
  border-radius: 6px;
}
::selection { background: rgba(59, 130, 255, 0.4); color: #fff; }

.icon { width: 20px; height: 20px; flex-shrink: 0; }

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

.skip-link {
  position: absolute;
  left: 16px;
  top: -80px;
  z-index: 1000;
  padding: 10px 18px;
  border-radius: 12px;
  background: var(--brand);
  color: #fff;
  font-weight: 600;
  transition: top 0.2s var(--ease);
}
.skip-link:focus { top: 12px; }

/* ── Layout helpers ──────────────────────────────────────────────────────── */
.container {
  width: min(100% - 2 * var(--gutter), var(--container));
  margin-inline: auto;
}
.container--narrow { width: min(100% - 2 * var(--gutter), 820px); }

.section { padding-block: clamp(44px, 6vw, 80px); }
.section + .section { padding-top: clamp(12px, 2vw, 28px); }
.section--tight { padding-block: clamp(28px, 4vw, 48px); }

.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px 32px;
  flex-wrap: wrap;
  margin-bottom: clamp(24px, 3.5vw, 40px);
}
.section-head > div { max-width: 640px; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brand-hi);
}
.eyebrow .icon { width: 16px; height: 16px; }

.section-title { font-size: clamp(1.9rem, 3.6vw, 2.8rem); }
.lede {
  margin-top: 14px;
  color: var(--text-2);
  font-size: clamp(1.02rem, 1.4vw, 1.18rem);
  max-width: 62ch;
}

/* Gradient-filled words. The headings use tight negative letter-spacing, so
   the last letter's ink pokes past the end of its box, and a text-clipped
   background stops at the box: the end of "millions" / "studio" was cut off.
   Padding (cancelled by negative margins, so nothing moves) widens the paint
   area, and `clone` gives every wrapped line its own padded box. */
.text-gradient {
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  padding: 0.04em 0.12em 0.12em 0.04em;
  margin: 0 -0.12em 0 -0.04em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--brand-hi);
  font-weight: 600;
  transition: gap 0.2s var(--ease), color 0.2s;
}
.link-arrow .icon { width: 18px; height: 18px; }
.link-arrow:hover { gap: 12px; color: var(--text); }

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 48px;
  padding: 0 22px;
  border: 1px solid transparent;
  border-radius: 999px;
  font: 600 1rem/1 var(--font);
  white-space: nowrap;
  cursor: pointer;
  transition: transform 0.2s var(--ease), box-shadow 0.25s var(--ease),
              background-color 0.2s, background-position 0.5s var(--ease), border-color 0.2s, color 0.2s;
}
.btn .icon { width: 18px; height: 18px; }
.btn:active { transform: translateY(0) scale(0.98); }

.btn-primary {
  color: #fff;
  background: linear-gradient(120deg, #3b82ff 0%, #8b5cf6 35%, #ff4fa3 70%, #8b5cf6 100%) no-repeat;
  background-size: 200% 100%;
  /* Sized from the outer edge and never tiled: otherwise the far (pink) end
     of the gradient wraps round into the 1px border on the left. */
  background-origin: border-box;
  box-shadow: 0 10px 28px -10px rgba(139, 92, 246, 0.8);
}
.btn-primary:hover {
  background-position: 100% 0;
  transform: translateY(-2px);
  box-shadow: 0 16px 36px -12px rgba(255, 79, 163, 0.7);
}

.btn-ghost {
  color: var(--text);
  background: rgba(255, 255, 255, 0.04);
  border-color: var(--line-strong);
}
.btn-ghost:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--line-hover);
  transform: translateY(-2px);
}

.btn-sm { height: 40px; padding: 0 16px; font-size: 0.92rem; }
.btn-lg { height: 56px; padding: 0 28px; font-size: 1.05rem; }
.btn-block { width: 100%; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: 0.65; cursor: progress; transform: none; }

.icon-btn {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text);
  cursor: pointer;
  transition: background-color 0.2s, border-color 0.2s, transform 0.2s var(--ease), opacity 0.2s;
}
.icon-btn:hover { background: rgba(255, 255, 255, 0.09); border-color: var(--line-hover); }
.icon-btn[disabled] { opacity: 0.35; cursor: default; }

/* ── Header ──────────────────────────────────────────────────────────────── */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  border-bottom: 1px solid transparent;
  background: rgba(6, 10, 20, 0.55);
  transition: background-color 0.3s, border-color 0.3s;
}
/* Near-opaque instead of backdrop-filter: blurring the page behind the
   header on every scrolled frame was a measured source of scroll jank. */
.site-header.is-scrolled,
.nav-open .site-header {
  background: rgba(6, 10, 20, 0.94);
  border-color: var(--line);
}

.header-inner {
  display: flex;
  align-items: center;
  gap: 24px;
  height: var(--header-h);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 1.22rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  flex-shrink: 0;
}
.brand img { width: 40px; height: 40px; transition: transform 0.4s var(--ease); }
.brand:hover img { transform: rotate(-8deg) scale(1.06); }

.site-nav {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}
.nav-list {
  display: flex;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.nav-link {
  display: block;
  padding: 9px 15px;
  border-radius: 999px;
  color: var(--text-2);
  font-weight: 500;
  white-space: nowrap;
  transition: color 0.2s, background-color 0.2s;
}
.nav-link:hover { color: var(--text); background: rgba(255, 255, 255, 0.06); }
.nav-link[aria-current="page"] {
  color: var(--text);
  background: rgba(59, 130, 255, 0.16);
  box-shadow: inset 0 0 0 1px #2b4170;
}
.nav-cta { margin-left: 6px; }
.nav-cta .icon { width: 16px; height: 16px; }

.nav-toggle {
  display: none;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-left: auto;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
  cursor: pointer;
}
.nav-toggle .icon-close { display: none; }
.nav-toggle[aria-expanded="true"] .icon-open { display: none; }
.nav-toggle[aria-expanded="true"] .icon-close { display: block; }

@media (max-width: 860px) {
  .js .nav-toggle { display: inline-grid; }

  .js .site-nav {
    position: fixed;
    top: var(--header-h);
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
    max-height: calc(100vh - var(--header-h));
    overflow-y: auto;
    padding: 12px var(--gutter) 28px;
    background: var(--bg);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-lg);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: opacity 0.25s var(--ease), transform 0.25s var(--ease), visibility 0s linear 0.25s;
  }
  .js .site-nav.is-open {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity 0.25s var(--ease), transform 0.25s var(--ease), visibility 0s;
  }
  .js .nav-list { flex-direction: column; gap: 4px; }
  .js .nav-link { padding: 14px 16px; font-size: 1.12rem; border-radius: 14px; }
  .js .nav-cta { margin: 4px 0 0; height: 52px; }

  /* Without JavaScript the menu simply wraps under the logo. */
  html:not(.js) .header-inner { flex-wrap: wrap; height: auto; padding-block: 12px; gap: 10px; }
  html:not(.js) .site-nav { width: 100%; overflow-x: auto; }
  html:not(.js) .nav-cta { display: none; }

  .nav-open body { overflow: hidden; }
}

/* ── Live dot ────────────────────────────────────────────────────────────── */
.live-dot {
  display: inline-block;
  vertical-align: middle;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--green);
  flex-shrink: 0;
  animation: live-pulse 2s infinite;
}
.live-dot--idle { background: var(--muted); animation: none; }
@keyframes live-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.55); }
  70%  { box-shadow: 0 0 0 9px rgba(52, 211, 153, 0); }
  100% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0); }
}

.live-chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 7px 16px 7px 12px;
  border-radius: 999px;
  background: rgba(52, 211, 153, 0.1);
  border: 1px solid #1b4a43;
  color: #b7f5dc;
  font-size: 0.92rem;
  font-weight: 600;
}
.live-chip strong { color: #fff; font-variant-numeric: tabular-nums; }

/* ── Hero glows (shared by the home hero and inner page heroes) ─────────── */
.hero, .page-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.hero::before, .page-hero::before {
  content: '';
  position: absolute;
  inset: -30% -10% 0;
  z-index: -2;
  background:
    radial-gradient(38% 46% at 14% 22%, rgba(59, 130, 255, 0.34), transparent 70%),
    radial-gradient(34% 42% at 86% 12%, rgba(139, 92, 246, 0.3), transparent 70%),
    radial-gradient(30% 38% at 68% 80%, rgba(255, 79, 163, 0.16), transparent 70%);
  /* Fade every glow out before the section ends: the pink one under the game
     art used to stop dead in a straight line above the stats. */
  -webkit-mask-image: linear-gradient(180deg, #000 62%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 62%, transparent 100%);
  pointer-events: none;
}
.hero::after, .page-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(rgba(148, 170, 220, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(148, 170, 220, 0.07) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse 75% 65% at 50% 25%, #000 25%, transparent 78%);
  mask-image: radial-gradient(ellipse 75% 65% at 50% 25%, #000 25%, transparent 78%);
  pointer-events: none;
}

/* ── Home hero ───────────────────────────────────────────────────────────── */
.hero { padding-block: clamp(40px, 7vw, 104px) clamp(48px, 7vw, 96px); }

.hero-grid {
  display: grid;
  grid-template-columns: 1.02fr 1fr;
  align-items: center;
  gap: clamp(36px, 5vw, 72px);
}
.hero .live-chip { margin-bottom: 24px; }
.hero h1 {
  font-size: clamp(2.6rem, 6.2vw, 4.7rem);
  line-height: 1.02;
  letter-spacing: -0.04em;
}
.hero .lede { margin-top: 22px; font-size: clamp(1.05rem, 1.5vw, 1.25rem); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }

.hero-proof {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
  margin-top: 36px;
  color: var(--muted);
  font-size: 0.95rem;
}
.hero-proof span { display: inline-flex; align-items: center; gap: 8px; }
.hero-proof strong { color: var(--text); font-weight: 700; }
.hero-proof .icon { width: 18px; height: 18px; color: var(--brand-hi); }

/* The fanned stack of game art on the right. */
.hero-art {
  position: relative;
  aspect-ratio: 1 / 0.84;
  width: 100%;
  max-width: 620px;
  margin-inline: auto;
}
.hero-card {
  --r: 0deg;
  position: absolute;
  width: 70%;
  aspect-ratio: 16 / 9;
  border-radius: 20px;
  overflow: hidden;
  background: var(--surface-2);
  border: 1px solid var(--line-strong);
  box-shadow: var(--shadow-lg);
  transform: rotate(var(--r));
  animation: float 8s ease-in-out var(--float-delay, 0s) infinite;
}
.hero-card img { width: 100%; height: 100%; object-fit: cover; }
.hero-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(6, 10, 20, 0.85));
}
.hero-card--1 { --r: -7deg; --float-delay: -2s; top: 2%;  left: 0; }
.hero-card--2 { --r: 6deg;  --float-delay: -5s; top: 12%; right: 0; }
.hero-card--3 {
  --r: -1.5deg;
  bottom: 4%;
  left: 13%;
  width: 76%;
  z-index: 2;
  border-color: var(--line-hover);
  box-shadow: var(--shadow-lg), 0 24px 90px -24px rgba(59, 130, 255, 0.75);
}
/* Dark pills, so the caption reads on bright (even white) game art. */
.hero-card-label {
  position: absolute;
  left: 14px;
  bottom: 14px;
  z-index: 1;
  max-width: calc(100% - 28px);
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(6, 10, 20, 0.82);
  border: 1px solid #2a3350;
  font-weight: 700;
  font-size: 0.95rem;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.hero-card .game-live { position: absolute; top: 12px; right: 12px; z-index: 1; }

@keyframes float {
  0%, 100% { transform: rotate(var(--r)) translateY(0); }
  50%      { transform: rotate(var(--r)) translateY(-12px); }
}

.hero-badge {
  position: absolute;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px 12px 12px;
  border-radius: 16px;
  background: rgba(13, 22, 40, 0.94);
  border: 1px solid var(--line-strong);
  box-shadow: var(--shadow);
  animation: float 7s ease-in-out infinite;
}
.hero-badge--a { top: -3%; left: 4%; animation-delay: -1s; }
.hero-badge--b { bottom: -6%; right: 2%; animation-delay: -4s; }
.hero-badge-icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--grad);
  color: #fff;
}
.hero-badge-icon .icon { width: 20px; height: 20px; }
.hero-badge strong { display: block; font-size: 1.15rem; line-height: 1.1; font-variant-numeric: tabular-nums; }
.hero-badge small { color: var(--muted); font-size: 0.8rem; }

/* ── Stats ───────────────────────────────────────────────────────────────── */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
/* Stat and value cards share one hover: lift, a soft coloured glow, the top
   hairline lighting up, a spotlight that follows the pointer (site.js sets
   --mx / --my), and the icon popping into the brand gradient. */
.stat-card, .value-card {
  --mx: 50%;
  --my: 0%;
  position: relative;
  isolation: isolate;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  overflow: hidden;
  background:
    radial-gradient(180px circle at 100% 0%, rgba(116, 168, 255, 0.12), transparent 70%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.015));
  transition: transform 0.5s var(--ease-out), border-color 0.4s var(--ease), box-shadow 0.5s var(--ease-out);
}
.stat-card { padding: 26px 24px; }
.stat-card::after, .value-card::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(280px circle at var(--mx) var(--my), rgba(116, 168, 255, 0.17), transparent 65%);
  opacity: 0;
  transition: opacity 0.4s var(--ease);
}
@media (hover: hover) {
  .stat-card:hover, .value-card:hover {
    transform: translateY(-6px);
    border-color: var(--line-hover);
    box-shadow: 0 28px 50px -30px rgba(59, 130, 255, 0.85), 0 14px 30px -24px rgba(139, 92, 246, 0.7);
  }
  .stat-card:hover::after, .value-card:hover::after { opacity: 1; }
  .stat-card:hover .stat-icon, .value-card:hover .stat-icon {
    transform: translateY(-2px) rotate(-8deg) scale(1.1);
    background: var(--grad);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 12px 26px -10px rgba(139, 92, 246, 0.9);
  }
}
.stat-icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  margin-bottom: 20px;
  border-radius: 14px;
  background: var(--grad-soft);
  background-origin: border-box;
  border: 1px solid #25365e;
  color: var(--brand-hi);
  transition: transform 0.55s var(--ease-spring), background 0.35s, color 0.35s, box-shadow 0.4s, border-color 0.35s;
}
.stat-icon .icon { width: 22px; height: 22px; }
.stat-value {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: clamp(2rem, 3.4vw, 2.75rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.stat-label { margin-top: 10px; color: var(--muted); font-weight: 500; }

/* ── Game cards ──────────────────────────────────────────────────────────── */
.game-card {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-lg);
  background: var(--surface);
  border: 1px solid var(--line);
  overflow: hidden;
  transition: transform 0.5s var(--ease-out), border-color 0.4s var(--ease), box-shadow 0.5s var(--ease-out);
}
.game-card:hover, .game-card:focus-within {
  transform: translateY(-8px);
  border-color: var(--line-hover);
  box-shadow: var(--glow);
}
.game-thumb {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--surface-2);
}
.game-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s var(--ease);
}
.game-card:hover .game-thumb img { transform: scale(1.07); }
/* The bottom fade is part of the picture (a mask showing the dark thumb
   background through it), not an overlay on top: an overlay stays put while
   the zooming picture is drawn on its own layer, and on hover the bottom row
   of the picture flickered out from under it. */
.game-thumb { background: #070b15; }
.game-thumb img {
  -webkit-mask-image: linear-gradient(180deg, #000 52%, rgba(0, 0, 0, 0.3));
  mask-image: linear-gradient(180deg, #000 52%, rgba(0, 0, 0, 0.3));
}
.game-thumb--empty {
  display: grid;
  place-items: center;
  background: var(--grad-soft);
}
.game-thumb--empty img { width: 64px; height: 64px; opacity: 0.6; object-fit: contain; -webkit-mask-image: none; mask-image: none; }

.game-live {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 11px 5px 9px;
  border-radius: 999px;
  background: rgba(6, 10, 20, 0.78);
  border: 1px solid #2a3350;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.game-thumb .game-live {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
}
.game-rank {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  display: grid;
  place-items: center;
  min-width: 32px;
  height: 32px;
  padding: 0 8px;
  border-radius: 10px;
  background: var(--grad);
  color: #fff;
  font-weight: 800;
  font-size: 0.85rem;
  box-shadow: 0 6px 18px -6px rgba(139, 92, 246, 0.9);
}

.game-play {
  position: absolute;
  right: 14px;
  bottom: 14px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--grad);
  color: #fff;
  box-shadow: 0 10px 24px -8px rgba(255, 79, 163, 0.9);
  opacity: 0;
  /* One movement only (a scale from its own centre) on its own layer, so it
     no longer slides and resizes at once while the card lifts and the art
     zooms underneath it. */
  transform: scale(0.6);
  will-change: transform, opacity;
  transition: opacity 0.25s var(--ease), transform 0.45s var(--ease-spring);
}
/* The play path is already drawn optically centred (its tip sits right of
   middle), so no extra nudge: the old 2px margin pushed it off centre. */
.game-play .icon { width: 20px; height: 20px; }
.game-card:hover .game-play,
.game-card:focus-within .game-play { opacity: 1; transform: none; }
@media (hover: none) {
  .game-play { opacity: 1; transform: none; width: 42px; height: 42px; }
}

.game-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
  padding: 18px 20px 20px;
}
.game-title { font-size: 1.15rem; font-weight: 700; line-height: 1.25; letter-spacing: -0.01em; }
/* One link per card, stretched over the whole card. */
.game-title a::after { content: ''; position: absolute; inset: 0; z-index: 3; }
.game-title a:focus-visible { outline: none; }
.game-card:has(.game-title a:focus-visible) { outline: 2px solid var(--brand-hi); outline-offset: 3px; }
.game-creator { margin-top: -6px; color: var(--muted); font-size: 0.86rem; }
.game-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin-top: auto;
  padding-top: 4px;
  color: var(--text-2);
  font-size: 0.92rem;
  font-variant-numeric: tabular-nums;
}
.game-meta span { display: inline-flex; align-items: center; gap: 7px; }
.game-meta .icon { width: 16px; height: 16px; color: var(--brand-hi); }

/* ── Rail (horizontal carousel, native scroll-snap) ──────────────────────── */
.rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 2 * 20px) / 3);
  gap: 20px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  /* A sideways-scrolling box clips everything that overflows it, the hover
     lift and glow included. So: room for them inside (padding), the same room
     taken back outside (negative margin), and the layout does not move. */
  padding: 18px 28px 60px;
  margin: -18px -28px -60px;
  scroll-padding-inline: 28px;
}
.rail::-webkit-scrollbar { display: none; }
.rail > * { scroll-snap-align: start; }
.rail-controls { display: flex; gap: 10px; }
/* Above the rail, whose glow padding reaches up into the heading and down here. */
.section-head, .rail-foot { position: relative; z-index: 1; }
.rail-foot { margin-top: 32px; }
html:not(.js) .rail-controls { display: none; }

/* ── Blog cards ──────────────────────────────────────────────────────────── */
.post-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.post-card {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-lg);
  background: var(--surface);
  border: 1px solid var(--line);
  overflow: hidden;
  transition: transform 0.5s var(--ease-out), border-color 0.4s var(--ease), box-shadow 0.5s var(--ease-out);
}
.post-card:hover, .post-card:focus-within {
  transform: translateY(-8px);
  border-color: var(--line-hover);
  box-shadow: var(--glow);
}
.post-thumb {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--surface-2);
}
.post-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s var(--ease); }
.post-card:hover .post-thumb img { transform: scale(1.05); }
.post-thumb--empty { display: grid; place-items: center; background: var(--grad-soft); }
.post-thumb--empty img { width: 72px; height: 72px; opacity: 0.55; object-fit: contain; }

.post-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
  padding: 20px 22px 22px;
}
.post-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  color: var(--muted);
  font-size: 0.85rem;
}
.chip {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  padding: 4px 11px;
  border-radius: 999px;
  background: rgba(59, 130, 255, 0.14);
  border: 1px solid #2a3d66;
  color: var(--brand-hi);
  font-size: 0.78rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.post-title { font-size: 1.22rem; font-weight: 700; line-height: 1.3; letter-spacing: -0.01em; }
.post-title a::after { content: ''; position: absolute; inset: 0; z-index: 1; }
.post-title a:focus-visible { outline: none; }
.post-card:has(.post-title a:focus-visible) { outline: 2px solid var(--brand-hi); outline-offset: 3px; }
.post-excerpt {
  color: var(--text-2);
  font-size: 0.97rem;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.post-more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: auto;
  padding-top: 6px;
  color: var(--brand-hi);
  font-weight: 600;
  font-size: 0.95rem;
}
.post-more .icon { width: 16px; height: 16px; transition: transform 0.25s var(--ease); }
.post-card:hover .post-more .icon { transform: translateX(4px); }

/* The newest post on the blog index gets a wide card. */
.post-card--feature { grid-column: 1 / -1; flex-direction: row; }
.post-card--feature .post-thumb { flex: 0 0 56%; aspect-ratio: auto; min-height: 320px; }
.post-card--feature .post-body { padding: clamp(24px, 3.5vw, 44px); justify-content: center; gap: 14px; }
.post-card--feature .post-title { font-size: clamp(1.5rem, 2.6vw, 2.1rem); line-height: 1.15; }
.post-card--feature .post-excerpt { -webkit-line-clamp: 4; font-size: 1.05rem; }
.post-card--feature .post-more { margin-top: 8px; }

/* ── Community band ──────────────────────────────────────────────────────── */
.cta-band {
  position: relative;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  align-items: center;
  gap: clamp(28px, 4vw, 56px);
  padding: clamp(28px, 5.5vw, 64px);
  border-radius: var(--radius-xl);
  border: 1px solid var(--line-strong);
  overflow: hidden;
  isolation: isolate;
  /* The colours stop inside the border, so the edge stays one even colour
     instead of turning blue on one side and pink on the other. */
  background-clip: padding-box;
  background:
    radial-gradient(60% 120% at 0% 0%, rgba(59, 130, 255, 0.45), transparent 60%),
    radial-gradient(55% 110% at 100% 100%, rgba(255, 79, 163, 0.32), transparent 60%),
    linear-gradient(135deg, #0f1a35 0%, #1a1142 100%);
}
.cta-band::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: radial-gradient(rgba(255, 255, 255, 0.09) 1px, transparent 1px);
  background-size: 22px 22px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 70%);
  mask-image: linear-gradient(90deg, transparent, #000 70%);
}
.cta-band h2 { font-size: clamp(1.9rem, 3.6vw, 2.8rem); }
.cta-band .lede { color: #cdd7f0; }
.cta-band .hero-actions { margin-top: 28px; }

.social-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.social-tile {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  border-radius: 18px;
  background: rgba(6, 10, 20, 0.5);
  background-clip: padding-box;
  border: 1px solid #2b3152;
  transition: transform 0.25s var(--ease), border-color 0.25s, background-color 0.25s;
}
.social-tile:hover {
  transform: translateY(-3px);
  background: rgba(6, 10, 20, 0.72);
  background-clip: padding-box;
  border-color: #46507a;
}
.social-tile .icon { width: 28px; height: 28px; }
.social-tile strong { display: block; font-weight: 700; }
.social-tile small { color: var(--muted); font-size: 0.82rem; }
.social-tile .tile-arrow { width: 16px; height: 16px; margin-left: auto; color: var(--muted); transition: transform 0.25s var(--ease), color 0.25s; }
.social-tile:hover .tile-arrow { transform: translate(2px, -2px); color: var(--text); }
.brand-roblox  { color: #fff; }
.brand-discord { color: #8b93ff; }
.brand-youtube { color: #ff3b5c; }
.brand-x       { color: #fff; }

/* ── Inner page hero ─────────────────────────────────────────────────────── */
.page-hero { padding-block: clamp(44px, 7vw, 92px) clamp(28px, 4vw, 44px); }
.page-hero::before { inset: -60% -10% -20%; opacity: 0.85; }
.page-hero h1 { font-size: clamp(2.3rem, 5.2vw, 3.8rem); letter-spacing: -0.035em; }

.inline-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 30px;
}
.inline-stat {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 10px 18px 10px 12px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--line);
}
.inline-stat .stat-icon { width: 38px; height: 38px; margin: 0; border-radius: 11px; }
.inline-stat .stat-icon .icon { width: 18px; height: 18px; }
.inline-stat strong { display: block; font-size: 1.2rem; line-height: 1.1; font-variant-numeric: tabular-nums; }
.inline-stat small { color: var(--muted); font-size: 0.82rem; }

/* ── Toolbar (search / sort / filters) ───────────────────────────────────── */
.toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-bottom: 28px;
}
html:not(.js) .toolbar { display: none; }
.search { position: relative; flex: 1 1 300px; max-width: 460px; }
.search .icon {
  position: absolute;
  left: 16px;
  top: 50%;
  width: 18px;
  height: 18px;
  transform: translateY(-50%);
  color: var(--muted);
  pointer-events: none;
}
.search input, .select {
  width: 100%;
  height: 48px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background-color: var(--surface);
  color: var(--text);
  font: 500 0.98rem var(--font);
  transition: border-color 0.2s, box-shadow 0.2s;
}
.search input { padding: 0 18px 0 46px; }
.search input::placeholder { color: var(--muted); }
.search input::-webkit-search-cancel-button { filter: invert(0.7); }
.select {
  width: auto;
  padding: 0 44px 0 18px;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238494b6' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 18px;
}
.select option { background: var(--surface); color: var(--text); }
.search input:focus, .select:focus {
  outline: none;
  border-color: var(--brand-hi);
  box-shadow: 0 0 0 4px rgba(59, 130, 255, 0.18);
}
.result-count { margin-left: auto; color: var(--muted); font-size: 0.92rem; }

.games-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(272px, 1fr));
  gap: 24px;
}

.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 30px; }
html:not(.js) .chips { display: none; }
.chip-btn {
  height: 40px;
  padding: 0 16px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: rgba(255, 255, 255, 0.03);
  color: var(--text-2);
  font: 500 0.92rem var(--font);
  cursor: pointer;
  transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}
.chip-btn:hover { color: var(--text); border-color: var(--line-hover); }
.chip-btn[aria-pressed="true"] {
  color: #fff;
  border-color: transparent;
  background: var(--grad) border-box;
  box-shadow: 0 8px 22px -10px rgba(139, 92, 246, 0.9);
}

.empty-state {
  grid-column: 1 / -1;
  padding: 64px 20px;
  text-align: center;
  color: var(--muted);
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-lg);
}
.empty-state .icon { width: 36px; height: 36px; margin: 0 auto 14px; color: var(--brand-hi); }
.empty-state strong { display: block; color: var(--text); font-size: 1.15rem; margin-bottom: 6px; }

/* ── Single blog post ────────────────────────────────────────────────────── */
.back-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 28px;
  color: var(--text-2);
  font-weight: 500;
  transition: color 0.2s, gap 0.2s var(--ease);
}
.back-link .icon { width: 18px; height: 18px; }
.back-link:hover { color: var(--text); gap: 12px; }

.article-header { padding-top: clamp(32px, 5vw, 56px); }
.article-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 18px;
  color: var(--muted);
  font-size: 0.92rem;
}
.article-meta span { display: inline-flex; align-items: center; gap: 6px; }
.article-meta .icon { width: 16px; height: 16px; }
.article-title {
  margin: 18px 0 0;
  font-size: clamp(2.1rem, 5vw, 3.4rem);
  letter-spacing: -0.035em;
  line-height: 1.06;
}
.article-hero {
  width: min(100% - 2 * var(--gutter), 1040px);
  margin: clamp(28px, 4vw, 44px) auto;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-xl);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--surface-2);
  box-shadow: var(--shadow-lg), 0 30px 120px -40px rgba(59, 130, 255, 0.45);
}
.article-hero img { width: 100%; height: 100%; object-fit: cover; }

.game-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 28px;
  margin-bottom: 40px;
  padding: 18px 20px;
  border-radius: var(--radius-lg);
  background: var(--surface);
  border: 1px solid var(--line);
}
.game-strip-stat { display: flex; align-items: center; gap: 12px; }
.game-strip-stat .stat-icon { width: 40px; height: 40px; margin: 0; border-radius: 12px; }
.game-strip-stat .stat-icon .icon { width: 18px; height: 18px; }
.game-strip-stat strong { display: flex; align-items: center; gap: 8px; font-size: 1.15rem; line-height: 1.1; font-variant-numeric: tabular-nums; }
.game-strip-stat small { color: var(--muted); font-size: 0.82rem; }
.game-strip .btn { margin-left: auto; }

/* blog_body_html() emits <p>, <ul>/<li> and <strong> — nothing else. */
.prose {
  color: var(--text-2);
  font-size: 1.12rem;
  line-height: 1.85;
}
.prose p, .prose ul { margin: 0 0 1.25em; }
.prose > :last-child { margin-bottom: 0; }
.prose strong { color: var(--text); font-weight: 700; }
.prose ul { padding-left: 1.3em; }
.prose li { margin-bottom: 0.45em; padding-left: 0.3em; }
.prose li::marker { color: var(--brand-hi); }

/* ── Reactions ───────────────────────────────────────────────────────────── */
.emoji { font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif; font-style: normal; line-height: 1; }

.post-reacts {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-left: auto;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--line);
  color: var(--text-2);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* The one-reaction button in the post's game bar: a bare heart beside the
   Play button, deliberately unlike the boxed stats to its left. Tap = like
   (tap again to take it back), hold = a picker of the others. site.js drives it. */
.react { position: relative; margin-left: auto; }
.game-strip .react + .btn { margin-left: 0; }
.react-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 10px 0 0;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--text-2);
  font: inherit;
  cursor: pointer;
  /* A long press must open the picker, not the phone's text/link menu. */
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  /* none, not manipulation: after a hold the finger slides onto the picker,
     and that slide must not scroll the page instead. */
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
}
.react-icon {
  position: relative;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  transition: background-color 0.25s var(--ease), transform 0.35s var(--ease-spring);
}
.react-heart {
  width: 27px;
  height: 27px;
  color: #6f7c99;
  fill: transparent;
  transition: color 0.2s, fill 0.2s, transform 0.35s var(--ease-spring);
}
.react-mine { font-size: 1.6rem; }
.react-btn.has-emoji .react-heart, .react-btn:not(.has-emoji) .react-mine { display: none; }
.react-btn[data-mine="love"] .react-heart { color: #ff3d7f; fill: #ff3d7f; }
.react-count {
  min-width: 1ch;
  font-size: 1.08rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  transition: color 0.2s;
}
.react-count:empty { display: none; }
.react-btn.is-on .react-count { color: #ff8fb3; }
@media (hover: hover) {
  .react-btn:hover .react-icon { background: #2a1630; }
  .react-btn:hover .react-heart { color: #ff4f8b; transform: scale(1.1); }
  .react-btn:hover .react-count { color: #ff8fb3; }
}
.react-btn.is-holding .react-icon { transform: scale(0.84); }
.react-btn:focus-visible { outline: none; }
.react-btn:focus-visible .react-icon { outline: 2px solid var(--brand-hi); outline-offset: 2px; }

/* Liking: the heart springs in, a ring flashes out and confetti dots fly. */
.react-btn.is-popping .react-heart, .react-btn.is-popping .react-mine { animation: react-pop 0.6s var(--ease-spring); }
.react-burst { position: absolute; inset: -8px; border-radius: 50%; pointer-events: none; opacity: 0; }
.react-burst::before {
  content: '';
  position: absolute;
  inset: 8px;
  border-radius: 50%;
  border: 2px solid #ff4f8b;
  opacity: 0;
}
.react-btn.is-popping .react-burst {
  animation: react-dots 0.7s var(--ease-out);
  background:
    radial-gradient(circle at 50% 5%,  #ff8fb3 2.5px, transparent 3px),
    radial-gradient(circle at 82% 18%, #a78bfa 2.5px, transparent 3px),
    radial-gradient(circle at 95% 50%, #ff8fb3 2.5px, transparent 3px),
    radial-gradient(circle at 82% 82%, #74a8ff 2.5px, transparent 3px),
    radial-gradient(circle at 50% 95%, #ff8fb3 2.5px, transparent 3px),
    radial-gradient(circle at 18% 82%, #fbbf24 2.5px, transparent 3px),
    radial-gradient(circle at 5% 50%,  #ff8fb3 2.5px, transparent 3px),
    radial-gradient(circle at 18% 18%, #a78bfa 2.5px, transparent 3px);
}
.react-btn.is-popping .react-burst::before { animation: react-ring 0.5s var(--ease-out); }
@keyframes react-dots {
  0%   { opacity: 0; transform: scale(0.45); }
  20%  { opacity: 1; }
  100% { opacity: 0; transform: scale(1.3); }
}
@keyframes react-ring {
  0%   { opacity: 0.9; transform: scale(0.3); }
  100% { opacity: 0; transform: scale(1.35); }
}

/* Top three reactions, overlapping like Facebook's. */
.react-stack { display: inline-flex; }
.react-stack .emoji {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  margin-left: -5px;
  border-radius: 50%;
  background: var(--surface-2);
  border: 2px solid var(--surface);
  font-size: 0.75rem;
}
.react-stack .emoji:first-child { margin-left: 0; }

.react-picker {
  position: absolute;
  left: -8px;
  bottom: calc(100% + 14px);
  z-index: 30;
  display: flex;
  gap: 2px;
  padding: 6px 8px;
  border-radius: 999px;
  background: #121b31;
  border: 1px solid var(--line-strong);
  box-shadow: 0 22px 44px -14px rgba(0, 0, 0, 0.85), 0 12px 40px -22px rgba(139, 92, 246, 0.7);
  transform-origin: 30px 100%;
  animation: picker-in 0.3s var(--ease-spring);
}
.react-picker[hidden] { display: none; }
.react-option {
  position: relative;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  animation: option-in 0.42s var(--ease-spring) backwards;
}
.react-option:nth-child(2) { animation-delay: 30ms; }
.react-option:nth-child(3) { animation-delay: 60ms; }
.react-option:nth-child(4) { animation-delay: 90ms; }
.react-option:nth-child(5) { animation-delay: 120ms; }
.react-option .emoji { font-size: 1.85rem; transition: transform 0.25s var(--ease-spring); }
.react-option:hover .emoji, .react-option.is-hot .emoji, .react-option:focus-visible .emoji { transform: translateY(-9px) scale(1.42); }
.react-option:focus-visible { outline: none; }
.react-option.is-mine::after {
  content: '';
  position: absolute;
  bottom: 1px;
  left: 50%;
  width: 5px;
  height: 5px;
  margin-left: -2.5px;
  border-radius: 50%;
  background: var(--pink);
}
.react-tip {
  position: absolute;
  bottom: calc(100% + 4px);
  left: 50%;
  padding: 3px 9px;
  border-radius: 999px;
  background: #060a14;
  border: 1px solid var(--line-strong);
  color: var(--text);
  font-size: 0.74rem;
  font-weight: 700;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 4px);
  transition: opacity 0.15s, transform 0.2s var(--ease-out);
}
.react-option:hover .react-tip, .react-option.is-hot .react-tip, .react-option:focus-visible .react-tip { opacity: 1; transform: translate(-50%, -12px); }

@keyframes picker-in {
  from { opacity: 0; transform: translateY(10px) scale(0.85); }
  to   { opacity: 1; transform: none; }
}
@keyframes option-in {
  from { opacity: 0; transform: translateY(12px) scale(0.6); }
  to   { opacity: 1; transform: none; }
}
@keyframes react-pop {
  0%   { transform: scale(0.35); }
  45%  { transform: scale(1.3); }
  70%  { transform: scale(0.92); }
  100% { transform: scale(1); }
}
/* The emoji that floats up from a fresh reaction. */
.reaction-float {
  position: absolute;
  left: 20px;
  top: 0;
  z-index: 31;
  pointer-events: none;
  font-size: 1.5rem;
  animation: react-float 0.9s var(--ease-out) forwards;
}
@keyframes react-float {
  from { opacity: 1; transform: translate(-50%, 0) scale(0.8); }
  to   { opacity: 0; transform: translate(-50%, -58px) scale(1.3); }
}
.react-error {
  position: absolute;
  left: 0;
  top: calc(100% + 8px);
  z-index: 30;
  padding: 6px 12px;
  border-radius: 10px;
  background: #2a1520;
  border: 1px solid #5c2a35;
  color: #fecaca;
  font-size: 0.82rem;
  white-space: nowrap;
}
html:not(.js) .react-btn { pointer-events: none; }

.article-footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-top: 48px;
  padding-top: 28px;
  border-top: 1px solid var(--line);
}

/* ── About ───────────────────────────────────────────────────────────────── */
.about-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  align-items: center;
  gap: clamp(32px, 5vw, 72px);
}
.about-copy p + p { margin-top: 18px; }
.about-copy p { color: var(--text-2); font-size: 1.08rem; line-height: 1.8; }
.about-copy strong { color: var(--text); }

.collage {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.collage figure {
  margin: 0;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--surface-2);
  box-shadow: var(--shadow);
}
.collage figure:nth-child(even) { transform: translateY(28px); }
.collage img { width: 100%; height: 100%; object-fit: cover; }

.values {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.value-card { padding: 28px; }   /* the look and hover are shared with .stat-card */
.value-card h3 { font-size: 1.2rem; margin-bottom: 10px; }
.value-card p { color: var(--text-2); }

/* Flex, not grid, so a short last row sits in the middle (5 cards = 3 + 2
   centred) instead of leaving a hole on the right. */
.creations {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 24px;
}
.creation {
  flex: 0 1 calc((100% - 2 * 24px) / 3);
  min-width: 0;
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-lg);
  background: var(--surface);
  border: 1px solid var(--line);
  overflow: hidden;
  transition: border-color 0.3s, transform 0.3s var(--ease), box-shadow 0.3s;
}
.creation:hover { transform: translateY(-5px); border-color: var(--line-hover); box-shadow: var(--glow); }
.creation .post-thumb img { transition: transform 0.7s var(--ease); }
.creation:hover .post-thumb img { transform: scale(1.05); }
.creation-body { padding: 20px 22px 24px; }
.creation-body h3 { font-size: 1.2rem; margin-bottom: 8px; }
.creation-body p { color: var(--text-2); font-size: 0.97rem; }

/* ── Contact ─────────────────────────────────────────────────────────────── */
.contact-grid {
  display: grid;
  grid-template-columns: 0.82fr 1.18fr;
  align-items: start;
  gap: clamp(24px, 3.5vw, 40px);
}
.contact-aside { display: flex; flex-direction: column; gap: 14px; }
.info-card {
  display: flex;
  gap: 16px;
  padding: 22px;
  border-radius: var(--radius-lg);
  background: var(--surface);
  border: 1px solid var(--line);
}
.info-card .stat-icon { margin: 0; flex-shrink: 0; }
.info-card h2, .info-card h3 { font-size: 1.08rem; font-weight: 700; margin-bottom: 4px; letter-spacing: -0.01em; }
.info-card p { color: var(--text-2); font-size: 0.95rem; }
.info-card .btn { margin-top: 14px; }
.info-card--note { background: rgba(251, 191, 36, 0.06); border-color: #4a3f22; }
.info-card--note .stat-icon { background: rgba(251, 191, 36, 0.12); border-color: #574621; color: var(--amber); }

.form-card {
  padding: clamp(22px, 4vw, 38px);
  border-radius: var(--radius-xl);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.02));
  border: 1px solid var(--line-strong);
  box-shadow: var(--shadow-lg);
}
.form-card > h2 { font-size: 1.5rem; margin-bottom: 6px; }
.form-card > p { color: var(--muted); margin-bottom: 26px; }

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
.field { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.field--full { grid-column: 1 / -1; }
.label { font-weight: 600; font-size: 0.93rem; }
.label .opt { color: var(--muted); font-weight: 400; }

.input, .textarea {
  width: 100%;
  padding: 13px 16px;
  border-radius: 13px;
  border: 1px solid var(--line-strong);
  background: rgba(6, 10, 20, 0.6);
  color: var(--text);
  font: 400 1rem/1.5 var(--font);
  transition: border-color 0.2s, box-shadow 0.2s, background-color 0.2s;
}
.input::placeholder, .textarea::placeholder { color: var(--muted); opacity: 0.75; }
.input:hover, .textarea:hover { border-color: #3d4a6b; }
.input:focus, .textarea:focus {
  outline: none;
  border-color: var(--brand-hi);
  background: rgba(6, 10, 20, 0.85);
  box-shadow: 0 0 0 4px rgba(59, 130, 255, 0.18);
}
.input[aria-invalid="true"], .textarea[aria-invalid="true"] {
  border-color: var(--danger);
  box-shadow: 0 0 0 4px rgba(248, 113, 113, 0.12);
}
.textarea { min-height: 190px; resize: vertical; }
.field-error {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #fca5a5;
  font-size: 0.86rem;
}
.field-error .icon { width: 15px; height: 15px; }
.field-foot { display: flex; justify-content: space-between; gap: 12px; color: var(--muted); font-size: 0.82rem; }
.field-foot .is-near { color: var(--amber); }

.segmented { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; border: 0; margin: 0; padding: 0; min-width: 0; }
.segmented legend { padding: 0; margin-bottom: 8px; }
.seg-option { position: relative; }
.seg-option input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.seg-option label {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 100%;
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px solid var(--line-strong);
  background: rgba(6, 10, 20, 0.5);
  cursor: pointer;
  transition: border-color 0.2s, background-color 0.2s, box-shadow 0.2s;
}
.seg-option label:hover { border-color: #414e70; }
.seg-option .icon { width: 22px; height: 22px; color: var(--muted); transition: color 0.2s; }
.seg-option strong { display: block; font-weight: 600; }
.seg-option small { color: var(--muted); font-size: 0.82rem; line-height: 1.35; }
.seg-option input:checked + label {
  border-color: var(--brand-hi);
  background: rgba(59, 130, 255, 0.13);
  box-shadow: 0 0 0 4px rgba(59, 130, 255, 0.12);
}
.seg-option input:checked + label .icon { color: var(--brand-hi); }
.seg-option input:focus-visible + label { outline: 2px solid var(--brand-hi); outline-offset: 2px; }

.form-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 6px;
}
.secure-note {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 0.86rem;
}
.secure-note .icon { width: 17px; height: 17px; color: var(--green); }
.secure-note[data-state="working"] .icon { color: var(--amber); }
.form-legal { margin-top: 18px; color: var(--muted); font-size: 0.82rem; }

/* Honeypot: off-screen, not display:none (many bots skip hidden inputs). */
.hp-field {
  position: absolute !important;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.alert {
  display: flex;
  gap: 12px;
  margin-bottom: 24px;
  padding: 14px 16px;
  border-radius: 14px;
  font-size: 0.95rem;
}
.alert .icon { width: 20px; height: 20px; margin-top: 2px; }
.alert strong { display: block; color: #fff; }
.alert ul { margin: 6px 0 0; padding-left: 18px; }
.alert--error { background: rgba(248, 113, 113, 0.1); border: 1px solid #5c2f3a; color: #fecaca; }
.alert--error .icon { color: var(--danger); }

.success-panel { padding: clamp(12px, 3vw, 28px) 0; text-align: center; }
.success-mark {
  display: grid;
  place-items: center;
  width: 76px;
  height: 76px;
  margin: 0 auto 22px;
  border-radius: 50%;
  background: var(--grad);
  color: #fff;
  box-shadow: 0 18px 44px -14px rgba(139, 92, 246, 0.9);
  animation: pop 0.6s var(--ease) both;
}
.success-mark .icon { width: 36px; height: 36px; stroke-width: 2.6; }
.success-panel h2 { font-size: clamp(1.6rem, 3vw, 2.1rem); }
.success-panel p { color: var(--text-2); max-width: 46ch; margin: 12px auto 0; }
.success-panel .hero-actions { justify-content: center; margin-top: 28px; }
@keyframes pop {
  0%   { transform: scale(0.4); opacity: 0; }
  70%  { transform: scale(1.08); opacity: 1; }
  100% { transform: scale(1); }
}

/* ── 404 ─────────────────────────────────────────────────────────────────── */
.notfound { padding-block: clamp(64px, 12vw, 140px); text-align: center; }
.notfound-code {
  font-size: clamp(6rem, 22vw, 12rem);
  font-weight: 900;
  line-height: 0.9;
  letter-spacing: -0.06em;
}
.notfound h1 { margin-top: 18px; font-size: clamp(1.8rem, 4vw, 2.6rem); }
.notfound .lede { margin-inline: auto; }
.notfound .hero-actions { justify-content: center; }

/* ── Footer ──────────────────────────────────────────────────────────────── */
.site-footer {
  margin-top: clamp(48px, 8vw, 96px);
  border-top: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(59, 130, 255, 0.03), rgba(139, 92, 246, 0.04));
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.7fr 1fr 1fr 1fr;
  gap: 40px;
  padding-block: clamp(44px, 6vw, 64px) 40px;
}
.footer-brand p { margin-top: 16px; max-width: 36ch; color: var(--muted); }
.footer-social { display: flex; gap: 10px; margin-top: 22px; }
.footer-social .icon-btn .icon { width: 18px; height: 18px; }
.footer-col h2 {
  margin-bottom: 16px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}
.footer-col ul { display: grid; gap: 11px; margin: 0; padding: 0; list-style: none; }
.footer-col a { color: var(--text-2); transition: color 0.2s; }
.footer-col a:hover { color: var(--text); }
.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  padding-block: 22px 30px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.86rem;
}
.footer-bottom a { display: inline-flex; align-items: center; gap: 6px; color: var(--text-2); }
.footer-bottom a:hover { color: var(--text); }
.footer-bottom .icon { width: 16px; height: 16px; }

/* ── Reveal on scroll ────────────────────────────────────────────────────── */
/* Only when JS is running, so content is never hidden from a visitor (or a
   crawler) without it.

   An ANIMATION on the `translate` property, deliberately not a transition on
   `transform`: a .reveal card's own hover (transform + its transitions) must
   stay untouched. The old version set `transition` on .reveal, which replaced
   every card's hover transition with the slow 0.8 s fade, plus its stagger
   delay - hovering a card waited up to half a second before it moved.
   site.js sets --reveal-delay per batch, in reading order. */
.js .reveal:not(.is-visible) { opacity: 0; }
.js .reveal.is-visible {
  animation: reveal-in 0.7s var(--ease) backwards;
  animation-delay: var(--reveal-delay, 0ms);
}
.js .reveal.is-visible.is-done { animation: none; }
@keyframes reveal-in {
  from { opacity: 0; translate: 0 26px; }
  to   { opacity: 1; translate: 0 0; }
}

/* ── Images fade in as they arrive, over a soft shimmer ──────────────────── */
.js .game-thumb img, .js .post-thumb img, .js .article-hero img,
.js .hero-card img, .js .collage img {
  opacity: 0;
  transition: opacity 0.5s var(--ease), transform 0.7s var(--ease);
}
.js .game-thumb img.is-loaded, .js .post-thumb img.is-loaded, .js .article-hero img.is-loaded,
.js .hero-card img.is-loaded, .js .collage img.is-loaded { opacity: 1; }

.js .game-thumb, .js .post-thumb, .js .article-hero, .js .hero-card, .js .collage figure {
  background-image: linear-gradient(100deg, transparent 30%, rgba(148, 170, 220, 0.08) 50%, transparent 70%);
  background-size: 220% 100%;
  animation: shimmer 1.6s linear infinite;
}
/* Stop painting the shimmer once the picture is there. */
/* (.hero-card keeps its float animation: handled just below.) */
.js .game-thumb:has(img.is-loaded), .js .post-thumb:has(img.is-loaded), .js .article-hero:has(img.is-loaded),
.js .collage figure:has(img.is-loaded) { animation: none; background-image: none; }
/* No picture: no shimmer, and keep the soft brand gradient they are drawn on. */
.js .game-thumb--empty, .js .post-thumb--empty { animation: none; background-image: var(--grad-soft); }
.js .hero-card { animation: shimmer 1.6s linear infinite, float 8s ease-in-out var(--float-delay, 0s) infinite; }
.js .hero-card:has(img.is-loaded) { animation: float 8s ease-in-out var(--float-delay, 0s) infinite; background-image: none; }
@keyframes shimmer {
  from { background-position: 120% 0; }
  to   { background-position: -120% 0; }
}

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 1080px) {
  .rail { grid-auto-columns: calc((100% - 20px) / 2); }
}

@media (max-width: 960px) {
  .hero-grid, .about-grid, .contact-grid, .cta-band { grid-template-columns: 1fr; }
  .hero-art { max-width: 560px; margin-top: 12px; }
  .stat-grid { grid-template-columns: repeat(2, 1fr); }
  .post-grid { grid-template-columns: repeat(2, 1fr); }
  .values { grid-template-columns: 1fr; }
  .creation { flex-basis: calc((100% - 24px) / 2); }
  .footer-grid { grid-template-columns: repeat(3, 1fr); }
  .footer-brand { grid-column: 1 / -1; }
  .post-card--feature { flex-direction: column; }
  .post-card--feature .post-thumb { flex: none; aspect-ratio: 16 / 9; min-height: 0; }
  .contact-aside { order: 2; }
}

@media (max-width: 640px) {
  :root { --header-h: 64px; }
  .brand img { width: 36px; height: 36px; }
  .hero-actions .btn { flex: 1 1 auto; }
  .hero-badge { padding: 9px 12px 9px 9px; gap: 9px; }
  .hero-badge-icon { width: 32px; height: 32px; border-radius: 10px; }
  .hero-badge strong { font-size: 1rem; }
  .hero-card-label { font-size: 0.8rem; left: 10px; bottom: 10px; padding: 4px 10px; }
  .hero-card--1 .hero-card-label, .hero-card--2 .hero-card-label,
  .hero-card--1 .game-live, .hero-card--2 .game-live { display: none; }
  .stat-grid { gap: 12px; }
  .stat-card { padding: 20px 18px; }
  .stat-icon { width: 40px; height: 40px; margin-bottom: 14px; }
  .post-grid, .form-grid { grid-template-columns: 1fr; }
  .rail {
    grid-auto-columns: 84%;
    gap: 14px;
    /* Bleed to the screen edges so the next card peeks in. */
    margin-inline: calc(-1 * var(--gutter));
    padding-inline: var(--gutter);
    scroll-padding-inline: var(--gutter);
  }
  .section-head .rail-controls { display: none; }
  .social-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px 24px; }
  .game-strip .btn { margin-left: 0; width: 100%; }
  .toolbar .select { flex: 1 1 auto; }
  .result-count { width: 100%; margin-left: 0; }
  .segmented { grid-template-columns: 1fr; }
  .creation { flex-basis: 100%; }
  .form-foot .btn { width: 100%; }
  .collage figure:nth-child(even) { transform: translateY(16px); }
}

/* ── Reduced motion: show everything, animate nothing ────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .js .reveal { opacity: 1; transform: none; }
  .hero-card, .hero-badge { animation: none; }
}