/* NightKillerYT — design system and public site.
   Dark by design: near-black canvas, plum surfaces, a restrained pink accent, and the cyan-to-magenta of the NK
   logo used only as a signature (logo, glow, highlights). Green only means live or healthy. All motion uses
   transform and opacity, and turns off with "reduce motion". */

@font-face {
  font-family: "Manrope";
  src: url("/assets/fonts/manrope-latin.woff2") format("woff2");
  font-weight: 400 800;
  font-display: swap;
  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: "Sora";
  src: url("/assets/fonts/sora-latin.woff2") format("woff2");
  font-weight: 500 700;
  font-display: swap;
  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;
}

:root {
  color-scheme: dark;

  --bg: #08070b;
  --bg-elevated: #0c0a11;
  --surface-1: #110f17;
  --surface-2: #17141f;
  --surface-3: #1f1b2a;
  --border: #211d2c;
  --border-strong: #2e2840;
  --border-hover: #3b3352;

  /* See-through surfaces for cards over the page grid. */
  --glass-1: rgba(20, 17, 28, 0.58);
  --glass-2: rgba(30, 26, 42, 0.66);
  --glass-border: rgba(255, 255, 255, 0.075);
  --glass-border-hover: rgba(255, 255, 255, 0.15);
  --glass-blur: blur(14px) saturate(140%);

  --text: #f5f3f9;
  --text-2: #bdb7cc;
  --text-3: #8d879f;

  --accent: #ff5ca8;
  --accent-ink: #ff8cc4;
  --accent-strong: #d61f78;
  --accent-deep: #b3135f;
  --accent-soft: rgba(255, 92, 168, 0.1);
  --accent-line: rgba(255, 92, 168, 0.32);
  --cyan: #5ce1f5;
  --violet: #b98cff;

  --ok: #3ddc97;
  --ok-soft: rgba(61, 220, 151, 0.1);
  --ok-line: rgba(61, 220, 151, 0.28);
  --warn: #f6c453;
  --warn-soft: rgba(246, 196, 83, 0.1);
  --warn-line: rgba(246, 196, 83, 0.28);
  --info: #7cc7ff;
  --info-soft: rgba(124, 199, 255, 0.1);
  --info-line: rgba(124, 199, 255, 0.28);

  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;

  --font-body: "Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: "Sora", "Manrope", ui-sans-serif, system-ui, sans-serif;
  --font-mono: ui-monospace, "Cascadia Code", "SF Mono", Consolas, monospace;

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --fast: 160ms;
  --medium: 280ms;
  --slow: 700ms;

  --shadow-sm: 0 1px 0 rgba(255, 255, 255, 0.03) inset, 0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow-md: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 24px 48px -28px rgba(0, 0, 0, 0.9);
  --shadow-lg: 0 1px 0 rgba(255, 255, 255, 0.05) inset, 0 40px 80px -36px rgba(0, 0, 0, 0.95);

  --container: 1180px;
  --gutter: clamp(16px, 4vw, 32px);
  --header-height: 68px;
}

/* ---------- base ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-height) + 16px);
  background: var(--bg);
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font: 400 16px/1.65 var(--font-body);
  letter-spacing: -0.003em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "ss01", "cv11";
  overflow-x: hidden;
  scrollbar-color: var(--border-strong) var(--bg);
}

/* Film grain over everything: hides gradient banding and gives the dark surfaces some texture. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 100;
  pointer-events: none;
  opacity: 0.045;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.9 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

::selection {
  background: rgba(255, 92, 168, 0.35);
  color: #fff;
}

h1,
h2,
h3,
h4,
p,
dl,
dd,
figure,
blockquote {
  margin: 0;
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--text);
  text-wrap: balance;
}

p {
  text-wrap: pretty;
}

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

img,
svg {
  display: block;
  max-width: 100%;
}

img {
  height: auto;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

button {
  font: inherit;
  color: inherit;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 6px;
}

[hidden] {
  display: none !important;
}

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

.skip-link {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 200;
  padding: 10px 16px;
  border-radius: var(--radius-sm);
  background: var(--surface-3);
  color: var(--text);
  font-weight: 600;
  transform: translateY(-160%);
  transition: transform var(--fast) var(--ease-out);
}

.skip-link:focus {
  transform: none;
}

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.container.narrow {
  max-width: 900px;
}

.mono {
  font-family: var(--font-mono);
  font-size: 0.92em;
}

.muted {
  color: var(--text-3);
}

.unavailable {
  color: var(--text-3);
}

/* ---------- icons ---------- */
.icon {
  width: 20px;
  height: 20px;
  flex: none;
}

.icon-xs {
  width: 14px;
  height: 14px;
}

.icon-sm {
  width: 16px;
  height: 16px;
}

.icon-xl {
  width: 40px;
  height: 40px;
}

/* ---------- type helpers ---------- */
.kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  color: var(--accent-ink);
  font: 600 12.5px/1 var(--font-body);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.kicker::before {
  content: "";
  width: 18px;
  height: 1px;
  background: linear-gradient(90deg, var(--cyan), var(--accent));
}

.section-title {
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  letter-spacing: -0.03em;
}

.section-title-sm {
  font-size: clamp(1.25rem, 2vw, 1.5rem);
}

.page-title {
  font-size: clamp(2.4rem, 5vw, 4rem);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1.04;
}

.page-lead {
  margin-top: 18px;
  max-width: 62ch;
  color: var(--text-2);
  font-size: clamp(1.05rem, 1.4vw, 1.2rem);
  line-height: 1.6;
}

.body-lg {
  color: var(--text-2);
  font-size: 1.1rem;
  line-height: 1.75;
}

.text-glow {
  background: linear-gradient(100deg, var(--cyan) 0%, #a5b4fc 30%, var(--accent) 62%, var(--violet) 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ---------- buttons ----------
   Primary: magenta gradient with a top highlight, a soft glow, and a light sweep on hover.
   Secondary: dark glass with a gradient border that lights up on hover. Every button lifts slightly on hover and
   presses in with a small spring. Touch screens get the press feedback without sticky hover states. */
.btn {
  --btn-lift: 0px;
  --btn-scale: 1;
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 44px;
  padding: 0 20px;
  border: 1px solid transparent;
  border-radius: 13px;
  font: 650 15px/1 var(--font-body);
  letter-spacing: -0.01em;
  white-space: nowrap;
  cursor: var(--nc-hand, pointer);
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transform: translateY(var(--btn-lift)) scale(var(--btn-scale));
  transition:
    transform 320ms cubic-bezier(0.34, 1.56, 0.64, 1),
    background-color var(--medium) var(--ease-out),
    border-color var(--medium) var(--ease-out),
    box-shadow 420ms var(--ease-out),
    color var(--medium) var(--ease-out);
}

.btn .icon {
  transition: transform 420ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.btn:active {
  --btn-scale: 0.965;
  transition-duration: 90ms;
}

.btn-primary {
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0) 48%),
    linear-gradient(135deg, #e3368b, var(--accent-strong) 45%, var(--accent-deep));
  color: #fff;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.12) inset,
    0 1px 0 rgba(255, 255, 255, 0.25) inset,
    0 10px 28px -12px rgba(255, 92, 168, 0.7),
    0 2px 6px -2px rgba(0, 0, 0, 0.6);
}

/* The light sweep. */
.btn-primary::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.28) 48%, transparent 66%);
  transform: translateX(-120%);
  pointer-events: none;
}

.btn-secondary {
  background: linear-gradient(180deg, rgba(31, 27, 42, 0.9), rgba(23, 20, 31, 0.9));
  border-color: var(--border-strong);
  color: var(--text);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05) inset;
}

/* Gradient border, faded in on hover. */
.btn-secondary::before {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: -1;
  padding: 1px;
  border-radius: inherit;
  background: linear-gradient(120deg, rgba(92, 225, 245, 0.7), rgba(255, 92, 168, 0.75));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  opacity: 0;
  transition: opacity 420ms var(--ease-out);
  pointer-events: none;
}

.btn-ghost {
  background: transparent;
  border-color: var(--border);
  color: var(--text-2);
}

.btn-sm {
  min-height: 36px;
  padding: 0 15px;
  border-radius: 11px;
  font-size: 14px;
}

.btn-lg {
  min-height: 52px;
  padding: 0 26px;
  border-radius: 15px;
  font-size: 16px;
}

@media (hover: hover) {
  .btn:hover {
    --btn-lift: -2px;
  }

  .btn:hover .icon:last-child:not(:first-child) {
    transform: translateX(3px);
  }

  .btn:active {
    --btn-lift: 0px;
  }

  .btn-primary:hover {
    box-shadow:
      0 0 0 1px rgba(255, 255, 255, 0.18) inset,
      0 1px 0 rgba(255, 255, 255, 0.3) inset,
      0 16px 40px -12px rgba(255, 92, 168, 0.9),
      0 2px 6px -2px rgba(0, 0, 0, 0.6);
  }

  .btn-primary:hover::after {
    transform: translateX(120%);
    transition: transform 850ms var(--ease-out);
  }

  .btn-secondary:hover {
    border-color: transparent;
    background: linear-gradient(180deg, rgba(39, 34, 53, 0.95), rgba(28, 24, 38, 0.95));
  }

  .btn-secondary:hover::before {
    opacity: 1;
  }

  .btn-ghost:hover {
    background: var(--surface-2);
    border-color: var(--border-strong);
    color: var(--text);
  }
}

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text-2);
  font-weight: 600;
  font-size: 15px;
  transition: color var(--medium) var(--ease-out);
}

.link-arrow .icon {
  transition: transform var(--medium) var(--ease-out);
}

a.link-arrow:hover,
.update-card:hover .link-arrow,
.game-card:hover .link-arrow {
  color: var(--text);
}

a.link-arrow:hover .icon,
.update-card:hover .link-arrow .icon,
.game-card:hover .link-arrow .icon {
  transform: translateX(3px);
}

/* ---------- pills, tags, chips ---------- */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 26px;
  padding: 0 11px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--text-2);
  font: 600 12.5px/1 var(--font-body);
  white-space: nowrap;
}

.pill-live {
  border-color: var(--ok-line);
  background: var(--ok-soft);
  color: var(--ok);
}

.pill-beta {
  border-color: var(--info-line);
  background: var(--info-soft);
  color: var(--info);
}

.pill-development {
  border-color: var(--warn-line);
  background: var(--warn-soft);
  color: var(--warn);
}

.pill-muted,
.pill-paused,
.pill-retired {
  color: var(--text-3);
}

.live-dot {
  position: relative;
  width: 7px;
  height: 7px;
  flex: none;
  border-radius: 50%;
  background: var(--ok);
  box-shadow: 0 0 8px rgba(61, 220, 151, 0.7);
}

.live-dot::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 1.5px solid var(--ok);
  opacity: 0;
}

.tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 24px;
  padding: 0 9px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--surface-2);
  color: var(--text-2);
  font: 600 12px/1 var(--font-body);
  white-space: nowrap;
}

.tag-version {
  font-family: var(--font-mono);
  font-weight: 500;
}

.tag-pinned {
  border-color: var(--accent-line);
  background: var(--accent-soft);
  color: var(--accent-ink);
}

.tag-badge {
  border-color: rgba(92, 225, 245, 0.25);
  background: rgba(92, 225, 245, 0.08);
  color: var(--cyan);
}

.tag-link:hover {
  border-color: var(--border-strong);
  color: var(--text);
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 14px;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text-2);
  font-weight: 600;
  font-size: 14px;
  transition:
    background-color var(--medium) var(--ease-out),
    border-color var(--medium) var(--ease-out),
    color var(--medium) var(--ease-out);
}

.chip:hover {
  border-color: var(--border-strong);
  color: var(--text);
}

.chip.is-active {
  border-color: var(--accent-line);
  background: var(--accent-soft);
  color: var(--text);
}

.chip-count {
  color: var(--text-3);
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
}

/* ---------- header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  view-transition-name: site-header;
}

.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-bottom: 1px solid transparent;
  background: rgba(8, 7, 11, 0);
  transition:
    background-color var(--medium) var(--ease-out),
    border-color var(--medium) var(--ease-out);
}

.site-header.is-scrolled::before,
.site-header.menu-open::before {
  border-bottom-color: var(--border);
  background: rgba(8, 7, 11, 0.78);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  backdrop-filter: blur(16px) saturate(140%);
}

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

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-right: auto;
}

.brand-mark {
  width: 32px;
  height: 32px;
  transition: transform var(--medium) var(--ease-out);
}

.brand:hover .brand-mark {
  transform: rotate(-6deg) scale(1.06);
}

.brand-word {
  font: 700 17px/1 var(--font-display);
  letter-spacing: -0.02em;
}

.brand-word span {
  color: var(--accent);
}

.nav-list {
  position: relative;
  display: flex;
  align-items: center;
  gap: 4px;
}

.nav-link {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  height: 38px;
  padding: 0 14px;
  border-radius: 10px;
  color: var(--text-2);
  font-weight: 600;
  font-size: 15px;
  transition: color var(--medium) var(--ease-out);
}

.nav-link:hover,
.nav-link.is-active {
  color: var(--text);
}

/* Without JavaScript the active link gets a small underline; with it, a pill slides between links. */
.nav-link.is-active::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 6px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--cyan), var(--accent));
}

.js .nav-link.is-active::after {
  display: none;
}

.nav-indicator {
  position: absolute;
  top: 0;
  left: 0;
  height: 38px;
  width: var(--nav-w, 0px);
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  background: var(--surface-2);
  opacity: var(--nav-o, 0);
  transform: translateX(var(--nav-x, 0px));
  transition:
    transform var(--medium) var(--ease-out),
    width var(--medium) var(--ease-out),
    opacity var(--medium) var(--ease-out);
  pointer-events: none;
}

.nav-indicator::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.menu-button {
  display: none;
  width: 42px;
  height: 42px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  background: var(--surface-2);
  cursor: var(--nc-hand, pointer);
}

.menu-close {
  display: none;
}

.menu-open .menu-open-icon,
.site-header.menu-open .menu-open {
  display: none;
}

.site-header.menu-open .menu-close {
  display: block;
}

.mobile-menu {
  border-bottom: 1px solid var(--border);
  background: rgba(8, 7, 11, 0.96);
}

.mobile-menu ul {
  display: grid;
  gap: 2px;
  padding-block: 8px 16px;
}

.mobile-menu a {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 4px;
  border-bottom: 1px solid var(--border);
  color: var(--text-2);
  font-weight: 600;
  font-size: 17px;
}

.mobile-menu a[aria-current="page"] {
  color: var(--text);
}

/* ---------- sections ---------- */
.section {
  position: relative;
  padding-block: clamp(52px, 6.5vw, 96px);
}

.section-tight {
  padding-block: clamp(40px, 5vw, 64px);
}

.section-tint {
  background: linear-gradient(180deg, transparent, rgba(23, 20, 31, 0.55) 18%, rgba(23, 20, 31, 0.55) 82%, transparent);
}

.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px 24px;
  flex-wrap: wrap;
  margin-bottom: clamp(28px, 4vw, 44px);
}

/* ---------- hero ---------- */
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin-top: calc(var(--header-height) * -1);
  padding-top: calc(var(--header-height) + clamp(48px, 8vw, 96px));
  padding-bottom: clamp(64px, 9vw, 112px);
}

.hero-backdrop {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

/* The two soft lights. Each is the light it always was (a radial gradient blurred by 80px), drawn already blurred:
   a live blur filter has to be redone on every frame while the lights drift, which made phones and older computers
   stutter at the top of the page. The stops were fitted to the blurred light (within 3 of 255 levels), on a box
   130px (a) and 120px (b) bigger on every side, so the light reaches as far as the blur did. The original lights:
   a: 620 x 460 at top -180px, left -140px, radial-gradient(closest-side, rgba(92, 225, 245, 0.75), transparent);
   b: 720 x 520 at top -120px, right -220px, radial-gradient(closest-side, rgba(255, 92, 168, 0.8),
   rgba(185, 140, 255, 0.35) 55%, transparent). */
.aurora {
  position: absolute;
  border-radius: 50%;
  opacity: 0.32;
  will-change: transform;
}

.aurora-a {
  width: 880px;
  height: 720px;
  top: -310px;
  left: -270px;
  background: radial-gradient(closest-side, rgba(92, 225, 245, 0.466) 0%, rgba(92, 225, 245, 0.452) 9.2%, rgba(92, 225, 245, 0.407) 19.2%, rgba(92, 225, 245, 0.353) 27.5%, rgba(92, 225, 245, 0.158) 52.5%, rgba(92, 225, 245, 0.109) 60%, rgba(92, 225, 245, 0.074) 66.7%, rgba(92, 225, 245, 0.049) 72.5%, rgba(92, 225, 245, 0.024) 81.7%, rgba(92, 225, 245, 0) 100%);
}

.aurora-b {
  width: 960px;
  height: 760px;
  top: -240px;
  right: -340px;
  background: radial-gradient(closest-side, rgba(230, 109, 200, 0.53) 0%, rgba(229, 110, 200, 0.525) 5%, rgba(228, 111, 202, 0.511) 10%, rgba(226, 112, 204, 0.494) 14.2%, rgba(222, 115, 209, 0.454) 20.8%, rgba(212, 122, 222, 0.351) 34.2%, rgba(200, 129, 236, 0.227) 48.3%, rgba(196, 133, 242, 0.166) 55.8%, rgba(192, 135, 247, 0.108) 64.2%, rgba(189, 137, 250, 0.064) 72.5%, rgba(187, 139, 252, 0.033) 80.8%, rgba(186, 139, 254, 0.014) 90%, rgba(185, 140, 255, 0) 100%);
}

.hero-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 0%, #000 30%, transparent 75%);
  mask-image: radial-gradient(ellipse 70% 60% at 50% 0%, #000 30%, transparent 75%);
}

.hero::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 160px;
  z-index: -1;
  background: linear-gradient(180deg, transparent, var(--bg));
}

/* The home and /games heroes are one centred column: the headline first, then the intro (and the buttons). */
.hero-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* The headline slides up from behind a mask when the page opens. */
.hero-title {
  margin-bottom: clamp(20px, 2.6vw, 30px);
  font-size: clamp(2.6rem, 8vw, 6.6rem);
  font-weight: 700;
  letter-spacing: -0.05em;
  line-height: 1.02;
}

.title-line {
  display: block;
  overflow: hidden;
  padding-bottom: 0.1em;
  margin-bottom: -0.1em;
}

.title-line > span {
  display: inline-block;
}

.text-glow {
  white-space: nowrap;
}

@media (min-width: 720px) {
  .title-line {
    white-space: nowrap;
  }
}

.hero-lead {
  max-width: 60ch;
  color: var(--text-2);
  font-size: clamp(1.05rem, 1.5vw, 1.25rem);
  line-height: 1.65;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 34px;
}

.hero-stack .hero-actions {
  justify-content: center;
}

/* Home: the headline sits in the middle of the first screen, with the big numbers just below. */
.hero-home {
  display: flex;
  align-items: center;
  min-height: clamp(560px, 86svh, 900px);
  padding-bottom: clamp(56px, 8vw, 96px);
}

.hero-home > .container {
  width: 100%;
}

/* /games: the same look, a little shorter so the games come into view sooner. */
.hero-page {
  padding-top: calc(var(--header-height) + clamp(56px, 9vw, 120px));
  padding-bottom: clamp(36px, 5vw, 64px);
}

.hero-page .hero-lead {
  max-width: 52ch;
}

/* ---------- big numbers under the hero ---------- */
.stats-band {
  position: relative;
  padding-block: clamp(8px, 2vw, 24px) clamp(24px, 4vw, 48px);
}

.big-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-block: 1px solid var(--border);
}

.big-stat {
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  gap: 10px;
  padding: clamp(28px, 4vw, 44px) 16px;
  text-align: center;
}

.big-stat + .big-stat {
  border-left: 1px solid var(--border);
}

.big-stat dd {
  font: 700 clamp(2.5rem, 5.4vw, 4.4rem)/1 var(--font-display);
  letter-spacing: -0.05em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.big-stat-plus {
  margin-left: 2px;
  background: linear-gradient(180deg, var(--accent-ink), var(--accent));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.big-stat dt {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--text-3);
  font: 600 12.5px/1.2 var(--font-body);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.big-stat.is-live dt {
  color: var(--text-2);
}

.stats-note {
  margin-top: 16px;
  color: var(--text-3);
  font-size: 13px;
  text-align: center;
}

.stats-note .relative-time {
  font-size: inherit;
}

.relative-time {
  color: var(--text-3);
  font-size: 13px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.craft-item > * {
  position: relative;
}

/* ---------- cards with the pointer glow ---------- */
[data-spotlight] {
  --mx: 50%;
  --my: 0%;
}

[data-spotlight]::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  background: radial-gradient(420px circle at var(--mx) var(--my), rgba(255, 92, 168, 0.09), transparent 45%);
  opacity: 0;
  transition: opacity var(--slow) var(--ease-out);
  pointer-events: none;
}

[data-spotlight]:hover::before {
  opacity: 1;
}

/* ---------- game cards ---------- */
.game-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 440px), 1fr));
  gap: clamp(16px, 2.4vw, 28px);
}

.game-card {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  background: var(--surface-1);
  box-shadow: var(--shadow-md);
  transition:
    transform var(--medium) var(--ease-out),
    border-color var(--medium) var(--ease-out),
    box-shadow var(--medium) var(--ease-out);
}

.game-card:hover {
  border-color: var(--border-hover);
  box-shadow: var(--shadow-lg);
  transform: translateY(-3px);
}

/* The artwork fades into the card (a mask, not a hard edge), so no seam can show while it zooms. */
.game-card-media {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, #000 58%, rgba(0, 0, 0, 0.35) 84%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 58%, rgba(0, 0, 0, 0.35) 84%, transparent 100%);
}

.art-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.001);
  backface-visibility: hidden;
  transition: transform 1100ms var(--ease-out);
}

@media (hover: hover) {
  .game-card:hover .art-image {
    transform: scale(1.05);
  }
}

.media-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(17, 15, 23, 0) 50%, rgba(17, 15, 23, 0.55) 100%);
}

.art-fallback {
  display: grid;
  place-items: center;
  height: 100%;
  background: radial-gradient(circle at 30% 20%, rgba(255, 92, 168, 0.15), transparent 60%), var(--surface-2);
  color: var(--text-3);
}

.art-fallback img {
  width: 96px;
  border-radius: 24px;
}

.game-card-body {
  position: relative;
  z-index: 1;
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 16px;
  padding: 0 24px 24px;
}

.game-card-head {
  display: flex;
  align-items: flex-end;
  gap: 14px;
  margin-top: -34px;
}

.game-icon {
  width: 56px;
  height: 56px;
  flex: none;
  border-radius: 14px;
  background: var(--surface-3);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.1),
    0 12px 28px -10px rgba(0, 0, 0, 0.9);
  object-fit: cover;
}

.game-icon-fallback {
  display: inline-grid;
  place-items: center;
  color: var(--text-3);
}

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

.game-card-title {
  font-size: 1.3rem;
  letter-spacing: -0.025em;
}

.game-card-head .pill {
  margin-bottom: 4px;
}

.stretched-link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
}

.creator {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 4px;
  color: var(--text-3);
  font-size: 14px;
}

.creator span {
  color: var(--text-2);
  font-weight: 600;
}

.verified {
  display: inline-flex;
  align-items: center;
  margin-left: 2px;
}

.verified-badge {
  width: 15px;
  height: 15px;
}

.game-card-tagline {
  color: var(--text-2);
  font-size: 15px;
  line-height: 1.55;
}

.game-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  padding: 14px 0;
  border-block: 1px solid var(--border);
}

.game-stats li {
  display: grid;
  gap: 4px;
}

.stat-key {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--text-3);
  font-size: 12.5px;
  font-weight: 600;
}

.game-stats li > :last-child {
  font: 600 1.25rem/1.1 var(--font-display);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.game-card-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
}

.game-card-actions .btn {
  position: relative;
  z-index: 2;
}

/* ---------- updates timeline ---------- */
.update-list {
  position: relative;
  display: grid;
  gap: 6px;
}

.update-list::before {
  content: "";
  position: absolute;
  top: 12px;
  bottom: 12px;
  left: 11px;
  width: 1px;
  background: linear-gradient(180deg, var(--border-strong), var(--border) 70%, transparent);
}

.update-item {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 18px;
}

.update-rail {
  position: relative;
  display: flex;
  justify-content: center;
  padding-top: 30px;
}

.update-node {
  position: relative;
  width: 11px;
  height: 11px;
  border: 2px solid var(--border-hover);
  border-radius: 50%;
  background: var(--bg);
  transition:
    border-color var(--medium) var(--ease-out),
    box-shadow var(--medium) var(--ease-out);
}

.update-node.is-pinned,
.update-item:hover .update-node {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-soft);
}

.update-card {
  display: grid;
  gap: 10px;
  padding: 22px 24px;
  border: 1px solid transparent;
  border-radius: var(--radius-lg);
  transition:
    background-color var(--medium) var(--ease-out),
    border-color var(--medium) var(--ease-out),
    transform var(--medium) var(--ease-out);
}

.update-card:hover {
  border-color: var(--border);
  background: var(--surface-1);
  transform: translateX(4px);
}

.update-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  color: var(--text-3);
  font-size: 13.5px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.update-title {
  font-size: clamp(1.2rem, 2vw, 1.45rem);
  letter-spacing: -0.025em;
}

.update-summary {
  max-width: 68ch;
  color: var(--text-2);
}

.update-card .link-arrow {
  font-size: 14px;
}

/* ---------- homepage: latest update ---------- */
.updates-feature {
  display: grid;
  gap: 12px;
}

.update-feature-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  background: var(--surface-1);
  box-shadow: var(--shadow-md);
  transition:
    transform var(--medium) var(--ease-out),
    border-color var(--medium) var(--ease-out),
    box-shadow var(--medium) var(--ease-out);
}

.update-feature-card:hover {
  border-color: var(--border-hover);
  box-shadow: var(--shadow-lg);
  transform: translateY(-3px);
}

.update-feature-body {
  position: relative;
  z-index: 1;
  display: grid;
  align-content: center;
  gap: 14px;
  padding: clamp(24px, 4vw, 48px);
}

.update-feature-title {
  font-size: clamp(1.5rem, 2.6vw, 2.15rem);
  letter-spacing: -0.035em;
}

.update-feature-body .update-summary {
  font-size: 1.05rem;
}

.update-feature-body .link-arrow {
  margin-top: 4px;
}

.update-feature-card:hover .link-arrow {
  color: var(--text);
}

.update-feature-card:hover .link-arrow .icon {
  transform: translateX(3px);
}

.update-feature-art {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 260px;
  overflow: hidden;
  border-left: 1px solid var(--border);
  background: linear-gradient(160deg, var(--surface-2), var(--bg-elevated));
}

.update-feature-art > img:not(.feature-mark) {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 900ms var(--ease-out);
}

.update-feature-card:hover .update-feature-art > img:not(.feature-mark) {
  transform: scale(1.04);
}

.feature-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 32px 32px;
  background-position: center;
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 15%, transparent 70%);
  mask-image: radial-gradient(circle at 50% 50%, #000 15%, transparent 70%);
}

.feature-glow {
  position: absolute;
  width: 70%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 92, 168, 0.32), rgba(92, 225, 245, 0.12) 60%, transparent);
  filter: blur(24px);
}

.feature-mark {
  position: relative;
  width: 104px;
  height: 104px;
  filter: drop-shadow(0 12px 32px rgba(255, 92, 168, 0.35));
  transition: transform 900ms var(--ease-out);
}

.update-feature-card:hover .feature-mark {
  transform: scale(1.06) rotate(-4deg);
}

.tag-latest {
  border-color: var(--accent-line);
  background: var(--accent-soft);
  color: var(--accent-ink);
}

.update-mini-list {
  display: grid;
  gap: 8px;
}

.update-mini {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 16px;
  padding: 14px 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-1);
  transition:
    border-color var(--medium) var(--ease-out),
    background-color var(--medium) var(--ease-out);
}

.update-mini:hover {
  border-color: var(--border-hover);
  background: var(--surface-2);
}

.update-mini time {
  color: var(--text-3);
  font-weight: 600;
  font-size: 13.5px;
  font-variant-numeric: tabular-nums;
}

.update-mini-title {
  overflow: hidden;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.update-mini > .icon {
  color: var(--text-3);
  transition:
    transform var(--medium) var(--ease-out),
    color var(--medium) var(--ease-out);
}

.update-mini:hover > .icon {
  color: var(--text);
  transform: translateX(3px);
}

/* ---------- about ---------- */
.about-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  align-items: start;
  gap: clamp(28px, 5vw, 72px);
}

.about-copy {
  display: grid;
  gap: 28px;
}

.about-intro .body-lg {
  margin-top: 22px;
}

.craft-list {
  display: grid;
  gap: 12px;
}

/* ---------- my Roblox profile ---------- */
.profile-card {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  background: var(--surface-1);
  box-shadow: var(--shadow-md);
  transition:
    border-color var(--medium) var(--ease-out),
    box-shadow var(--medium) var(--ease-out);
}

.profile-card:hover {
  border-color: var(--border-hover);
  box-shadow: var(--shadow-lg);
}

.profile-stage {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 1 / 0.92;
  overflow: hidden;
  background: radial-gradient(90% 70% at 50% 100%, rgba(255, 92, 168, 0.16), transparent 70%), linear-gradient(180deg, var(--surface-2), var(--surface-1));
}

.stage-glow {
  position: absolute;
  bottom: 6%;
  width: 70%;
  height: 22%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 92, 168, 0.45), rgba(92, 225, 245, 0.18) 60%, transparent);
  filter: blur(18px);
}

.stage-grid {
  position: absolute;
  inset: 45% -20% -10%;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.07) 1px, transparent 1px);
  background-size: 40px 40px;
  transform: perspective(420px) rotateX(62deg);
  transform-origin: top center;
  -webkit-mask-image: radial-gradient(ellipse 60% 70% at 50% 0%, #000 20%, transparent 75%);
  mask-image: radial-gradient(ellipse 60% 70% at 50% 0%, #000 20%, transparent 75%);
}

.profile-avatar {
  position: relative;
  width: auto;
  height: 94%;
  max-width: 94%;
  object-fit: contain;
  margin-top: 3%;
  filter: drop-shadow(0 24px 36px rgba(0, 0, 0, 0.55));
  transform: translateY(0);
  transition: transform 900ms var(--ease-out);
}

.profile-card-empty .feature-mark {
  width: 120px;
  height: 120px;
}

.profile-body {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 16px;
  padding: 22px 24px 24px;
  border-top: 1px solid var(--border);
}

.profile-id {
  display: flex;
  align-items: center;
  gap: 14px;
}

.profile-headshot {
  width: 48px;
  height: 48px;
  flex: none;
  border-radius: 50%;
  background: var(--surface-3);
  box-shadow: 0 0 0 2px var(--surface-1), 0 0 0 3px var(--accent-line);
}

.profile-name {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 1.35rem;
  letter-spacing: -0.025em;
}

.profile-name .verified-badge {
  width: 18px;
  height: 18px;
}

.profile-handle {
  color: var(--text-3);
  font-weight: 600;
  font-size: 14.5px;
}

.profile-bio {
  color: var(--text-2);
}

.profile-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  padding-block: 14px;
  border-block: 1px solid var(--border);
}

.profile-stats div {
  display: grid;
  gap: 4px;
}

.profile-stats dt {
  color: var(--text-3);
  font-weight: 600;
  font-size: 12.5px;
}

.profile-stats dd {
  font: 600 1.3rem/1.1 var(--font-display);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.profile-button {
  justify-self: start;
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .profile-card:hover .profile-avatar {
    transform: translateY(-6px);
  }
}

.craft-item {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 6px 20px;
  padding: 22px 24px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface-1);
  overflow: hidden;
  transition:
    border-color var(--medium) var(--ease-out),
    transform var(--medium) var(--ease-out);
}

.craft-item:hover {
  border-color: var(--border-hover);
  transform: translateY(-2px);
}

.craft-num {
  grid-row: span 2;
  padding-top: 3px;
  background: linear-gradient(180deg, var(--cyan), var(--accent));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font: 700 15px/1.2 var(--font-display);
  font-variant-numeric: tabular-nums;
}

.craft-item h3 {
  font-size: 1.15rem;
}

.craft-item p {
  color: var(--text-2);
}

/* ---------- connect ---------- */
.social-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

@media (max-width: 960px) {
  .social-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.social-tile {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  align-items: center;
  gap: 2px 14px;
  width: 100%;
  padding: 16px 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface-1);
  text-align: left;
  cursor: var(--nc-hand, pointer);
  transition:
    transform var(--medium) var(--ease-out),
    border-color var(--medium) var(--ease-out),
    background-color var(--medium) var(--ease-out);
}

.social-tile:hover {
  border-color: var(--border-hover);
  background: var(--surface-2);
  transform: translateY(-2px);
}

.social-tile img {
  grid-row: span 2;
  width: 26px;
  height: 26px;
  opacity: 0.9;
  transition: opacity var(--medium) var(--ease-out);
}

.social-tile:hover img {
  opacity: 1;
}

.social-name {
  font-weight: 700;
  font-size: 15px;
}

.social-handle {
  grid-column: 2;
  overflow: hidden;
  color: var(--text-3);
  font-size: 13.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.social-action {
  grid-row: 1 / 3;
  grid-column: 3;
  color: var(--text-3);
  opacity: 0;
  transform: translate(-4px, 0);
  transition:
    opacity var(--medium) var(--ease-out),
    transform var(--medium) var(--ease-out);
}

.social-tile:hover .social-action,
.social-tile:focus-visible .social-action {
  opacity: 1;
  transform: none;
}

/* ---------- inner page heroes ---------- */
.page-hero,
.article-hero,
.error-page {
  position: relative;
  isolation: isolate;
  padding-top: clamp(48px, 8vw, 96px);
  padding-bottom: clamp(24px, 4vw, 40px);
}

.page-hero-glow {
  position: absolute;
  inset: calc(var(--header-height) * -1) 0 auto;
  z-index: -1;
  height: 520px;
  background:
    radial-gradient(50% 60% at 15% 0%, rgba(92, 225, 245, 0.1), transparent 70%),
    radial-gradient(45% 60% at 85% 0%, rgba(255, 92, 168, 0.12), transparent 70%);
  pointer-events: none;
}

.filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 30px;
}

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 26px;
  color: var(--text-2);
  font-weight: 600;
  font-size: 14.5px;
  transition: color var(--medium) var(--ease-out);
}

.back-link .icon {
  transition: transform var(--medium) var(--ease-out);
}

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

.back-link:hover .icon {
  transform: translateX(-3px);
}

/* ---------- game page ---------- */
.game-hero {
  position: relative;
  isolation: isolate;
  margin-top: calc(var(--header-height) * -1);
  padding-top: calc(var(--header-height) + clamp(40px, 7vw, 88px));
  padding-bottom: clamp(32px, 5vw, 56px);
}

.game-hero-art {
  position: absolute;
  inset: 0 0 auto;
  z-index: -1;
  height: min(78vh, 640px);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 55%, transparent 100%);
}

.game-hero-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.5;
  transform: scale(1.04);
  view-transition-name: game-art;
}

.game-hero-shade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(8, 7, 11, 0.55) 0%, rgba(8, 7, 11, 0.35) 35%, rgba(8, 7, 11, 0.92) 78%, var(--bg) 100%),
    radial-gradient(120% 90% at 50% 0%, transparent 40%, rgba(8, 7, 11, 0.85) 100%);
}

.game-hero-head {
  display: flex;
  align-items: flex-end;
  gap: 22px;
  flex-wrap: wrap;
}

.game-hero-head .game-icon {
  width: 96px;
  height: 96px;
  border-radius: 24px;
}

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

.game-hero-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}

.stats-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}

.stat-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.stat-tile {
  position: relative;
  display: grid;
  gap: 8px;
  align-content: start;
  padding: 20px 22px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface-1);
  overflow: hidden;
}

.stat-tile dt {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--text-3);
  font-weight: 600;
  font-size: 13.5px;
}

.stat-tile dd {
  position: relative;
  font: 600 clamp(1.6rem, 2.6vw, 2.1rem)/1.05 var(--font-display);
  letter-spacing: -0.035em;
  font-variant-numeric: tabular-nums;
}

.stat-hint {
  position: relative;
  color: var(--text-3);
  font-size: 13px;
}

.game-detail-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  align-items: start;
  gap: clamp(24px, 4vw, 56px);
}

.game-about .prose {
  margin-top: 16px;
}

.game-side {
  display: grid;
  gap: 14px;
}

.side-card {
  padding: 20px 22px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface-1);
}

.side-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  color: var(--text-2);
  font: 600 13px/1 var(--font-body);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.world-list {
  display: grid;
  gap: 4px;
}

.world-list li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
  font-weight: 600;
}

.world-list li + li {
  border-top: 1px solid var(--border);
}

.world-num {
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: var(--surface-3);
  color: var(--text-2);
  font: 600 12.5px/1 var(--font-display);
}

.world-link {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 9px;
  color: var(--text-3);
  transition:
    background-color var(--medium) var(--ease-out),
    color var(--medium) var(--ease-out);
}

.world-link:hover {
  background: var(--surface-3);
  color: var(--text);
}

.detail-list {
  display: grid;
  gap: 10px;
}

.detail-list div {
  display: flex;
  justify-content: space-between;
  gap: 16px;
}

.detail-list dt {
  color: var(--text-3);
}

.detail-list dd {
  font-weight: 600;
  text-align: right;
}

.link-list {
  display: grid;
  gap: 8px;
}

.link-list a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text-2);
  font-weight: 600;
}

.link-list a:hover {
  color: var(--text);
}

.gallery {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.gallery-item {
  display: block;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface-2);
  aspect-ratio: 16 / 9;
  cursor: zoom-in;
}

.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 900ms var(--ease-out);
}

.gallery-item:hover img {
  transform: scale(1.04);
}

.lightbox {
  width: min(1200px, 94vw);
  max-width: none;
  max-height: 92vh;
  padding: 0;
  overflow: visible;
  border: 0;
  background: transparent;
}

.lightbox::backdrop {
  background: rgba(5, 4, 8, 0.82);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.lightbox img {
  width: 100%;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}

.lightbox-close {
  position: absolute;
  top: -52px;
  right: 0;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  background: var(--surface-2);
  cursor: var(--nc-hand, pointer);
}

.lightbox[open] {
  animation: pop-in var(--medium) var(--ease-out);
}

/* ---------- prose (descriptions, updates, legal) ---------- */
.prose {
  color: var(--text-2);
  font-size: 1.06rem;
  line-height: 1.8;
}

.prose > * + * {
  margin-top: 1.1em;
}

.prose h2 {
  margin-top: 2.2em;
  font-size: 1.5rem;
  color: var(--text);
}

.prose h3,
.prose h4 {
  margin-top: 1.8em;
  font-size: 1.2rem;
  color: var(--text);
}

.prose h2 + p,
.prose h3 + p,
.prose h4 + p {
  margin-top: 0.6em;
}

.prose a {
  color: var(--accent-ink);
  text-decoration: underline;
  text-decoration-color: var(--accent-line);
  text-underline-offset: 3px;
  transition: text-decoration-color var(--medium) var(--ease-out);
}

.prose a:hover {
  text-decoration-color: var(--accent);
}

.prose strong {
  color: var(--text);
  font-weight: 700;
}

.prose ul,
.prose ol {
  display: grid;
  gap: 0.5em;
  padding-left: 1.3em;
}

.prose ul {
  list-style: none;
  padding-left: 0;
}

.prose ul li {
  position: relative;
  padding-left: 1.4em;
}

.prose ul li::before {
  content: "";
  position: absolute;
  left: 0.2em;
  top: 0.78em;
  width: 6px;
  height: 6px;
  border-radius: 2px;
  background: linear-gradient(135deg, var(--cyan), var(--accent));
  transform: rotate(45deg);
}

.prose ol {
  list-style: decimal;
}

.prose ol li::marker {
  color: var(--text-3);
  font-weight: 600;
}

.prose blockquote {
  padding: 16px 20px;
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: 4px var(--radius) var(--radius) 4px;
  background: var(--surface-1);
}

.prose blockquote > * + * {
  margin-top: 0.8em;
}

.prose code {
  padding: 0.15em 0.4em;
  border-radius: 6px;
  background: var(--surface-3);
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 0.88em;
}

.prose pre {
  overflow-x: auto;
  padding: 18px 20px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-1);
}

.prose pre code {
  padding: 0;
  background: none;
}

.prose hr {
  height: 1px;
  margin-block: 2.4em;
  border: 0;
  background: var(--border);
}

.prose img,
.prose figure img {
  border-radius: var(--radius);
}

.prose figcaption {
  margin-top: 8px;
  color: var(--text-3);
  font-size: 0.9em;
  text-align: center;
}

/* ---------- articles ---------- */
.article-width {
  max-width: 780px;
}

.article-title {
  margin-top: 18px;
  font-size: clamp(2.1rem, 4.4vw, 3.4rem);
}

.article-hero .update-meta {
  margin-top: 4px;
}

.article-cover {
  margin-bottom: 40px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}

.article-body {
  padding-bottom: 24px;
}

.tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 24px;
}

.article-nav {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 56px;
  padding-bottom: 32px;
}

.article-nav-link {
  display: grid;
  gap: 8px;
  padding: 18px 20px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface-1);
  transition:
    border-color var(--medium) var(--ease-out),
    transform var(--medium) var(--ease-out);
}

.article-nav-link:hover {
  border-color: var(--border-hover);
  transform: translateY(-2px);
}

.article-nav-link.is-next {
  grid-column: 2;
  text-align: right;
}

.article-nav-link.is-next .article-nav-dir {
  justify-content: flex-end;
}

.article-nav-dir {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text-3);
  font-weight: 600;
  font-size: 13px;
}

.article-nav-title {
  font: 600 1.05rem/1.3 var(--font-display);
  letter-spacing: -0.02em;
}

.legal-updated {
  margin-top: 14px;
  color: var(--text-3);
  font-size: 14px;
}

.legal-body h2 {
  font-size: 1.25rem;
}

.legal-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-block: 48px 64px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
}

/* ---------- empty and error states ---------- */
.empty-state {
  display: grid;
  justify-items: center;
  gap: 10px;
  padding: clamp(40px, 8vw, 80px) 24px;
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-xl);
  color: var(--text-2);
  text-align: center;
}

.empty-state .icon-xl {
  color: var(--text-3);
}

.empty-state h2 {
  font-size: 1.3rem;
}

.empty-state .btn {
  margin-top: 8px;
}

.error-page {
  min-height: 70vh;
  display: grid;
  align-items: center;
}

.error-inner {
  text-align: left;
}

.error-code {
  background: linear-gradient(100deg, var(--cyan), var(--accent) 60%, var(--violet));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font: 700 clamp(4.5rem, 14vw, 9rem)/0.9 var(--font-display);
  letter-spacing: -0.06em;
}

.error-page .page-title {
  margin-top: 14px;
}

/* ---------- footer ---------- */
.site-footer {
  position: relative;
  overflow: hidden;
  margin-top: clamp(32px, 6vw, 80px);
  padding-top: 56px;
  border-top: 1px solid var(--border);
  background: linear-gradient(180deg, var(--bg), var(--bg-elevated));
}

.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr));
  gap: 32px;
}

.footer-note {
  margin-top: 14px;
  max-width: 30ch;
  color: var(--text-3);
}

.footer-title {
  margin-bottom: 14px;
  color: var(--text-3);
  font: 600 12px/1 var(--font-body);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.footer-col ul {
  display: grid;
  gap: 10px;
}

.footer-col a {
  color: var(--text-2);
  font-weight: 500;
  font-size: 15px;
  transition: color var(--medium) var(--ease-out);
}

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

.footer-bottom {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-top: 48px;
  padding-block: 20px;
  border-top: 1px solid var(--border);
  color: var(--text-3);
  font-size: 14px;
}

.footer-wordmark {
  margin-bottom: -0.2em;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font: 700 clamp(3.5rem, 15.5vw, 13.5rem)/0.9 var(--font-display);
  letter-spacing: -0.06em;
  text-align: center;
  white-space: nowrap;
  user-select: none;
}

/* ---------- toast ---------- */
.toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  z-index: 120;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 18px;
  border: 1px solid var(--border-strong);
  border-radius: 14px;
  background: var(--surface-3);
  box-shadow: var(--shadow-lg);
  color: var(--text);
  font-weight: 600;
  font-size: 14.5px;
  transform: translate(-50%, 0);
  animation: toast-in var(--medium) var(--ease-out);
}

.toast .icon {
  color: var(--ok);
}

/* ---------- motion ---------- */
/* The reveal delay site.js gives each block. Not inherited, so setting it restyles only that block, not everything
   inside it. */
@property --reveal-delay {
  syntax: "<time>";
  inherits: false;
  initial-value: 0ms;
}

@keyframes pop-in {
  from {
    opacity: 0;
    transform: scale(0.97);
  }
}

@keyframes toast-in {
  from {
    opacity: 0;
    transform: translate(-50%, 10px);
  }
}

@keyframes pulse-ring {
  0% {
    opacity: 0.7;
    transform: scale(0.6);
  }
  80%,
  100% {
    opacity: 0;
    transform: scale(1.6);
  }
}

@keyframes drift-a {
  from {
    transform: translate3d(0, 0, 0) scale(1);
  }
  to {
    transform: translate3d(90px, 50px, 0) scale(1.12);
  }
}

@keyframes drift-b {
  from {
    transform: translate3d(0, 0, 0) scale(1.05);
  }
  to {
    transform: translate3d(-110px, 70px, 0) scale(0.95);
  }
}

@keyframes glow-shift {
  from {
    background-position: 0% 50%;
  }
  to {
    background-position: 100% 50%;
  }
}

@keyframes vt-fade-out {
  to {
    opacity: 0;
    transform: translateY(-8px);
  }
}

@keyframes vt-fade-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
}

@media (prefers-reduced-motion: no-preference) {
  .live-dot::after {
    animation: pulse-ring 2.4s var(--ease-out) infinite;
  }

  .aurora-a {
    animation: drift-a 18s var(--ease-in-out) infinite alternate;
  }

  .aurora-b {
    animation: drift-b 22s var(--ease-in-out) infinite alternate;
  }

  .text-glow {
    animation: glow-shift 9s var(--ease-in-out) infinite alternate;
  }

  /* site.js moves the glow itself (the same motion, fewer repaints); this animation is the fallback without it. */
  .text-glow.is-driven {
    animation: none;
  }

  /* Endless animations rest while they are off screen (site.js marks them), so scrolling the rest of the page
     doesn't pay for them. A live dot's ring stops altogether (it starts a new pulse when it's back), so the browser
     doesn't keep a layer for it. */
  .hero.is-paused .aurora,
  .hero.is-paused .text-glow {
    animation-play-state: paused;
  }

  .live-dot.is-paused::after {
    animation: none;
  }

  /* Reveal on scroll: only when JavaScript runs, so the content is never hidden without it. */
  .js [data-reveal] {
    opacity: 0;
    transform: translateY(18px);
  }

  .js [data-reveal].is-revealed {
    opacity: 1;
    transform: none;
    transition:
      opacity var(--slow) var(--ease-out) var(--reveal-delay, 0ms),
      transform var(--slow) var(--ease-out) var(--reveal-delay, 0ms),
      border-color var(--medium) var(--ease-out),
      box-shadow var(--medium) var(--ease-out),
      background-color var(--medium) var(--ease-out);
  }

  .js .game-card[data-reveal].is-revealed:hover,
  .js .craft-item[data-reveal].is-revealed:hover,
  .js .social-grid li .social-tile:hover {
    transition:
      transform var(--medium) var(--ease-out),
      border-color var(--medium) var(--ease-out),
      box-shadow var(--medium) var(--ease-out),
      background-color var(--medium) var(--ease-out);
  }

  .js .game-card[data-reveal].is-revealed:hover {
    transform: translateY(-3px);
  }

  .js .craft-item[data-reveal].is-revealed:hover {
    transform: translateY(-2px);
  }

  /* Headline: the block stays in place and each line slides up out of its mask. */
  .js [data-reveal="lines"] {
    opacity: 1;
    transform: none;
  }

  .js [data-reveal="lines"] .title-line > span {
    transform: translateY(108%);
  }

  .js [data-reveal="lines"].is-revealed .title-line > span {
    transform: none;
    transition: transform 1.15s var(--ease-out);
  }

  .js [data-reveal="lines"].is-revealed .title-line + .title-line > span {
    transition-delay: 130ms;
  }

  /* Page-to-page transitions (browsers that support them); the game art morphs into the game page. */
  @view-transition {
    navigation: auto;
  }

  ::view-transition-old(root) {
    animation: vt-fade-out 220ms var(--ease-out) both;
  }

  ::view-transition-new(root) {
    animation: vt-fade-in 380ms var(--ease-out) both;
  }

  ::view-transition-group(game-art) {
    animation-duration: 520ms;
    animation-timing-function: var(--ease-out);
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* ---------- touch screens: no sticky hover lifts, a small press instead ---------- */
@media (hover: none) {
  .game-card:hover,
  .js .game-card[data-reveal].is-revealed:hover,
  .craft-item:hover,
  .js .craft-item[data-reveal].is-revealed:hover,
  .social-tile:hover,
  .update-card:hover,
  .update-feature-card:hover,
  .article-nav-link:hover {
    transform: none;
  }

  .game-card:hover .art-image,
  .gallery-item:hover img,
  .update-feature-card:hover .feature-mark,
  .brand:hover .brand-mark {
    transform: none;
  }

  /* No hover zoom here, so a card's artwork needs no layer of its own (hidden backfaces keep one for the zoom):
     each such layer also made the browser add layers around it, so scrolling had far more to move. */
  .art-image {
    backface-visibility: visible;
  }

  .game-card:active,
  .social-tile:active,
  .update-card:active,
  .update-feature-card:active,
  .update-mini:active,
  .article-nav-link:active {
    transform: scale(0.985);
    transition-duration: 90ms;
  }

  [data-spotlight]::before {
    display: none;
  }
}

/* ---------- responsive ---------- */
@media (max-width: 1080px) {
  .about-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .footer-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .footer-brand {
    grid-column: 1 / -1;
  }
}

@media (max-width: 860px) {
  .nav,
  .header-cta {
    display: none;
  }

  .menu-button {
    display: inline-flex;
  }

  .stat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .game-detail-layout {
    grid-template-columns: minmax(0, 1fr);
  }

}

@media (max-width: 600px) {
  :root {
    --header-height: 62px;
  }

  .hero-title {
    font-size: clamp(2.3rem, 10.5vw, 3rem);
  }

  .hero-actions .btn {
    flex: 1 1 100%;
  }

  .game-card-body {
    padding: 0 18px 20px;
  }

  .game-card-head {
    flex-wrap: wrap;
  }

  .game-card-head .pill {
    order: -1;
    position: absolute;
    top: -62px;
    right: 18px;
    background: rgba(8, 7, 11, 0.72);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
  }

  .game-stats li > :last-child {
    font-size: 1.1rem;
  }

  .stat-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 10px;
  }

  .stat-tile {
    padding: 16px;
  }

  .gallery {
    grid-template-columns: minmax(0, 1fr);
  }

  .update-item {
    grid-template-columns: 16px minmax(0, 1fr);
    gap: 10px;
  }

  .update-list::before {
    left: 7px;
  }

  .update-card {
    padding: 18px 14px;
  }

  .article-nav {
    grid-template-columns: minmax(0, 1fr);
  }

  .article-nav-link.is-next {
    grid-column: auto;
  }

  .footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .footer-bottom {
    flex-direction: column;
  }

  .game-hero-head .game-icon {
    width: 76px;
    height: 76px;
    border-radius: 20px;
  }
}

/* ---------- more screen sizes ---------- */
@media (min-width: 1600px) {
  :root {
    --container: 1280px;
  }

  .hero-title {
    font-size: 6.4rem;
  }
}

@media (max-width: 760px) {
  .update-feature-card {
    grid-template-columns: minmax(0, 1fr);
  }

  .update-feature-art {
    min-height: 170px;
    border-left: 0;
    border-top: 1px solid var(--border);
  }

  .feature-mark {
    width: 80px;
    height: 80px;
  }

  .update-mini {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 4px 12px;
  }

  .update-mini time {
    grid-column: 1 / -1;
  }

  .update-mini .tag {
    display: none;
  }
}

@media (max-width: 400px) {
  :root {
    --gutter: 16px;
  }

  .hero-title {
    font-size: 2.4rem;
  }

  .game-stats {
    gap: 8px;
  }

  .game-stats li > :last-child {
    font-size: 1rem;
  }

  .game-card-actions .btn {
    flex: 1;
  }

  .game-card-actions .link-arrow {
    display: none;
  }

  .stat-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .social-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .footer-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .page-title {
    font-size: 2.2rem;
  }
}

/* ---------- text links and section intros ---------- */
.inline-link {
  color: var(--text);
  font-weight: 650;
  text-decoration: underline;
  text-decoration-color: var(--accent-line);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 4px;
  transition:
    text-decoration-color var(--medium) var(--ease-out),
    color var(--medium) var(--ease-out);
}

.inline-link:hover {
  color: #fff;
  text-decoration-color: var(--accent);
}

.section-head + .section-lead {
  max-width: 60ch;
  margin: calc(-1 * clamp(12px, 2vw, 22px)) 0 clamp(24px, 3vw, 36px);
  color: var(--text-2);
  font-size: 1.05rem;
}

/* ---------- the big numbers on every screen size ---------- */
.big-stats[data-count="3"] {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.big-stats[data-count="2"] {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 1080px) {
  .profile-card {
    width: 100%;
    max-width: 560px;
    justify-self: center;
  }

  .big-stats:not([data-count="3"]) .big-stat dd {
    font-size: clamp(2.2rem, 5.6vw, 3.4rem);
  }
}

/* Four numbers become a 2 x 2 grid; three stay in a row, then stack on phones. */
@media (max-width: 860px) {
  .big-stats:not([data-count="3"]) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .big-stats:not([data-count="3"]) .big-stat:nth-child(odd) {
    border-left: 0;
  }

  .big-stats:not([data-count="3"]) .big-stat:nth-child(n + 3) {
    border-top: 1px solid var(--border);
  }

  .big-stats .big-stat {
    padding-inline: 8px;
  }

  .big-stats[data-count="3"] .big-stat dd {
    font-size: clamp(2rem, 6.4vw, 3rem);
  }

  .big-stats:not([data-count="3"]) .big-stat dd {
    font-size: clamp(2rem, 7vw, 3rem);
  }
}

@media (max-width: 600px) {
  .big-stats[data-count="3"] {
    grid-template-columns: minmax(0, 1fr);
  }

  .big-stats[data-count="3"] .big-stat + .big-stat {
    border-left: 0;
    border-top: 1px solid var(--border);
  }

  .big-stats[data-count="3"] .big-stat dd {
    font-size: clamp(2.6rem, 13vw, 3.4rem);
  }

  .big-stats .big-stat {
    padding-block: 24px;
  }

  .big-stats:not([data-count="3"]) .big-stat dd {
    font-size: clamp(1.7rem, 8.4vw, 2.5rem);
  }

  .big-stat dt {
    font-size: 11.5px;
    letter-spacing: 0.08em;
  }
}

@media (max-width: 400px) {
  .profile-stats dd {
    font-size: 1.1rem;
  }
}

/* ---------- my Roblox groups ---------- */
.group-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(16px, 2.4vw, 28px);
}

.group-grid[data-count="1"] {
  grid-template-columns: minmax(0, 620px);
  justify-content: center;
}

.group-card {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-xl);
  background: var(--glass-1);
  box-shadow: var(--shadow-md);
  transition:
    transform var(--medium) var(--ease-out),
    border-color var(--medium) var(--ease-out),
    box-shadow var(--medium) var(--ease-out);
}

.group-card:hover {
  border-color: var(--glass-border-hover);
  box-shadow: var(--shadow-lg);
  transform: translateY(-3px);
}

.group-stage {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 8;
  overflow: hidden;
  background:
    radial-gradient(70% 90% at 50% 100%, rgba(92, 225, 245, 0.14), transparent 70%),
    linear-gradient(180deg, rgba(31, 27, 42, 0.5), rgba(17, 15, 23, 0.2));
}

.group-card.is-main .group-stage {
  background:
    radial-gradient(70% 90% at 50% 100%, rgba(255, 92, 168, 0.2), transparent 70%),
    linear-gradient(180deg, rgba(31, 27, 42, 0.5), rgba(17, 15, 23, 0.2));
}

.group-stage .stage-glow {
  bottom: 10%;
  width: 46%;
}

.group-icon {
  position: relative;
  width: clamp(96px, 30%, 148px);
  height: auto;
  aspect-ratio: 1;
  border-radius: 30px;
  background: var(--surface-3);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.1),
    0 24px 44px -18px rgba(0, 0, 0, 0.85);
  transition: transform 900ms var(--ease-out);
}

.group-icon-fallback {
  padding: 18px;
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .group-card:hover .group-icon {
    transform: translateY(-6px) rotate(-2deg);
  }
}

.group-body {
  position: relative;
  z-index: 1;
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 14px;
  padding: 22px 24px 24px;
  border-top: 1px solid var(--glass-border);
}

.group-head {
  display: grid;
  gap: 2px;
}

.group-name {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 1.4rem;
  letter-spacing: -0.025em;
}

.group-name .verified-badge {
  width: 18px;
  height: 18px;
  flex: none;
}

.group-owner {
  color: var(--text-3);
  font-size: 14px;
  font-weight: 600;
}

.group-owner span {
  color: var(--text-2);
}

.group-members {
  display: flex;
  align-items: baseline;
  gap: 8px;
  color: var(--text-3);
  font-weight: 600;
}

.group-members-value {
  color: var(--text);
  font: 700 clamp(1.8rem, 3vw, 2.3rem)/1 var(--font-display);
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
}

.group-about {
  display: -webkit-box;
  overflow: hidden;
  color: var(--text-2);
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

.group-games {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.group-game {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  max-width: 100%;
  padding: 5px 12px 5px 5px;
  border: 1px solid var(--glass-border);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.03);
  color: var(--text-2);
  font-size: 13.5px;
  font-weight: 600;
  transition:
    border-color var(--medium) var(--ease-out),
    background-color var(--medium) var(--ease-out),
    color var(--medium) var(--ease-out);
}

.group-game:hover {
  border-color: var(--glass-border-hover);
  background: rgba(255, 255, 255, 0.06);
  color: var(--text);
}

.group-game .game-icon {
  width: 28px;
  height: 28px;
  flex: none;
  border-radius: 999px;
}

.group-game span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.group-button {
  align-self: flex-start;
  margin-top: auto;
}

@media (max-width: 860px) {
  .group-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* @usernames from Roblox texts link to the profile; verified accounts carry Roblox's badge right after. */
.mention {
  color: var(--text);
  font-weight: 650;
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, 0.18);
  text-underline-offset: 3px;
  transition:
    color var(--medium) var(--ease-out),
    text-decoration-color var(--medium) var(--ease-out);
}

.mention:hover {
  color: #fff;
  text-decoration-color: var(--accent);
}

.mention + .verified {
  margin-left: 4px;
  vertical-align: -2px;
}

.group-owner .mention {
  color: var(--text-2);
}

/* The creator under a game's name links to its Roblox group. */
.creator-link {
  color: var(--text-2);
  font-weight: 650;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 4px;
  transition:
    color var(--medium) var(--ease-out),
    text-decoration-color var(--medium) var(--ease-out);
}

.creator-link:hover {
  color: var(--text);
  text-decoration-color: var(--accent);
}

/* ---------- glass: see-through cards over the grid ---------- */
/* The page shows the same 64px grid as the top of the home page all the way down (very faint), with soft colour
   glows that stay in place while you scroll. Cards are frosted glass on top of it. */
html {
  background:
    radial-gradient(70vw 60vh at -10% 35%, rgba(92, 225, 245, 0.055), transparent 70%) fixed,
    radial-gradient(70vw 70vh at 110% 80%, rgba(255, 92, 168, 0.065), transparent 70%) fixed,
    radial-gradient(60vw 50vh at 50% 120%, rgba(185, 140, 255, 0.05), transparent 70%) fixed,
    var(--bg);
}

body {
  position: relative;
  background: transparent;
}

/* Lines up exactly with the hero grid (same 64px squares from the top-left corner of the page). */
body::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
  background-size: 64px 64px;
}

/* The hero glow fades out on its own, so the page grid carries on below it without a seam. */
.hero::after {
  display: none;
}

.hero-backdrop {
  -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent);
  mask-image: linear-gradient(180deg, #000 55%, transparent);
}

.game-card,
.profile-card,
.group-card,
.craft-item,
.social-tile,
.stat-tile,
.side-card,
.update-feature-card,
.update-mini,
.article-nav-link,
.prose blockquote,
.prose pre {
  border-color: var(--glass-border);
  background: var(--glass-1);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
}

.game-card:hover,
.profile-card:hover,
.craft-item:hover,
.side-card:hover,
.update-feature-card:hover,
.article-nav-link:hover {
  border-color: var(--glass-border-hover);
}

.social-tile:hover,
.update-mini:hover,
.update-card:hover {
  border-color: var(--glass-border-hover);
  background: var(--glass-2);
}

.profile-stage {
  background:
    radial-gradient(90% 70% at 50% 100%, rgba(255, 92, 168, 0.16), transparent 70%),
    linear-gradient(180deg, rgba(31, 27, 42, 0.5), rgba(17, 15, 23, 0.15));
}

.profile-body,
.profile-stats {
  border-color: var(--glass-border);
}

.btn-secondary {
  background: linear-gradient(180deg, rgba(36, 31, 50, 0.62), rgba(23, 20, 31, 0.5));
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.big-stats,
.big-stat + .big-stat,
.big-stats .big-stat:nth-child(n + 3) {
  border-color: var(--glass-border);
}

.site-footer {
  background: linear-gradient(180deg, transparent, rgba(12, 10, 17, 0.88) 60%);
}

/* Phones get the same look with a lighter blur. */
@media (max-width: 600px) {
  .game-card,
  .profile-card,
  .group-card,
  .craft-item,
  .social-tile,
  .stat-tile,
  .side-card,
  .update-feature-card,
  .update-mini,
  .article-nav-link {
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
  }
}

/* Lighter glass, only for devices that can't keep up: site.js turns it on (for the rest of the visit) after
   measuring slow frames while the page scrolls. The blur behind every card is redrawn on every frame of a scroll,
   which is what such a device can't afford. Instead each card is a little more solid, chosen so it looks the same
   over the dark page (the faint grid behind a card stays hidden; within about 2 color levels). Never in Nighty
   Design (it doesn't load site.js). */
html.is-lite {
  --glass-blur: none;
  --glass-1: rgba(17, 14, 24, 0.82);
  --glass-2: rgba(25, 22, 35, 0.86);
}

html.is-lite :is(.game-card, .profile-card, .group-card, .craft-item, .social-tile, .stat-tile, .side-card, .update-feature-card, .update-mini, .article-nav-link, .creator-card, .btn-secondary, .game-card-head .pill) {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

html.is-lite .btn-secondary:not(:hover) {
  background: linear-gradient(180deg, rgba(29, 25, 40, 0.85), rgba(18, 16, 25, 0.8));
}

@media (max-width: 600px) {
  html.is-lite .game-card-head .pill {
    background: rgba(8, 7, 11, 0.86);
  }
}

/* ---------- home: resources and tools ---------- */
.creator-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(16px, 2.4vw, 28px);
}

.creator-card {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-xl);
  background: var(--glass-1);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  box-shadow: var(--shadow-md);
  transition:
    transform var(--medium) var(--ease-out),
    border-color var(--medium) var(--ease-out),
    box-shadow var(--medium) var(--ease-out);
}

.creator-card > * {
  position: relative;
  z-index: 1;
}

.creator-card:hover {
  border-color: var(--glass-border-hover);
  box-shadow: var(--shadow-lg);
  transform: translateY(-3px);
}

.creator-art {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 7;
  overflow: hidden;
  border-bottom: 1px solid var(--glass-border);
}

.creator-art-resources {
  background:
    radial-gradient(60% 90% at 30% 100%, rgba(92, 225, 245, 0.16), transparent 70%),
    radial-gradient(50% 80% at 80% 0%, rgba(255, 92, 168, 0.14), transparent 70%);
}

.creator-art-tools {
  background:
    radial-gradient(60% 90% at 70% 100%, rgba(255, 92, 168, 0.16), transparent 70%),
    radial-gradient(50% 80% at 15% 0%, rgba(185, 140, 255, 0.14), transparent 70%);
}

.creator-grid-lines {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
  background-size: 28px 28px;
  -webkit-mask-image: radial-gradient(70% 90% at 50% 50%, #000, transparent);
  mask-image: radial-gradient(70% 90% at 50% 50%, #000, transparent);
}

/* Little made-up UI pieces floating over the resources card. */
.ui-bit {
  position: absolute;
  display: grid;
  place-items: center;
  box-shadow: 0 18px 36px -18px rgba(0, 0, 0, 0.9);
  transition: transform 900ms var(--ease-out);
}

.ui-button {
  top: 26%;
  left: 14%;
  min-width: 112px;
  height: 42px;
  padding: 0 22px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-bottom-width: 4px;
  border-radius: 14px;
  background: linear-gradient(180deg, #4ff08e, #1fae5d);
  color: #fff;
  font: 700 17px/1 var(--font-display);
  letter-spacing: 0.02em;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.25);
  transform: rotate(-6deg);
}

.ui-frame {
  top: 18%;
  right: 12%;
  grid-template-columns: repeat(3, 26px);
  gap: 7px;
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 16px;
  background: linear-gradient(160deg, rgba(185, 140, 255, 0.4), rgba(92, 225, 245, 0.18));
  transform: rotate(5deg);
}

.ui-frame span {
  height: 26px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.22);
}

.ui-coin {
  bottom: 18%;
  left: 40%;
  width: 46px;
  height: 46px;
  border: 4px solid #ffd75e;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff3b0, #f6c453 55%, #c98d16);
  transform: rotate(-12deg);
}

.ui-heart {
  bottom: 22%;
  right: 22%;
  width: 52px;
  height: 52px;
  border-radius: 16px;
  background: linear-gradient(160deg, #ff7cba, var(--accent-strong));
  color: #fff;
  transform: rotate(8deg);
}

.ui-heart .icon {
  width: 26px;
  height: 26px;
  fill: currentColor;
}

.ui-bar {
  bottom: 14%;
  left: 10%;
  width: 26%;
  height: 16px;
  padding: 3px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 999px;
  background: rgba(8, 7, 11, 0.7);
  place-items: center start;
}

.ui-bar span {
  width: 68%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--cyan), var(--accent));
}

/* A few of the tools' drawings as a slightly tilted collage over the tools card. */
.creator-previews {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  width: min(78%, 360px);
  transform: rotate(-5deg);
  transition: transform 900ms var(--ease-out);
}

.creator-preview {
  overflow: hidden;
  border: 1px solid var(--glass-border-hover);
  border-radius: 14px;
  background: rgba(8, 7, 11, 0.7);
  box-shadow: 0 18px 36px -20px rgba(0, 0, 0, 0.9);
}

.creator-preview:nth-child(even) {
  transform: translateY(14px);
}

.creator-preview .tp-svg {
  display: block;
  width: 100%;
  height: auto;
}

.tp-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .creator-card:hover .ui-button {
    transform: rotate(-3deg) translateY(-6px);
  }

  .creator-card:hover .ui-frame {
    transform: rotate(2deg) translateY(-4px);
  }

  .creator-card:hover .ui-coin {
    transform: rotate(8deg) translateY(-8px);
  }

  .creator-card:hover .ui-heart {
    transform: rotate(-2deg) scale(1.06);
  }

  .creator-card:hover .creator-previews {
    transform: rotate(-3deg) scale(1.03);
  }
}

.creator-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 12px;
  padding: 22px 24px 24px;
}

.creator-title {
  font: 650 1.45rem/1.2 var(--font-display);
  letter-spacing: -0.025em;
}

.creator-text {
  color: var(--text-2);
  line-height: 1.6;
}

.creator-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.creator-chips span {
  display: inline-flex;
  align-items: center;
  height: 28px;
  padding: 0 11px;
  border: 1px solid var(--glass-border);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.03);
  color: var(--text-2);
  font-size: 12.5px;
  font-weight: 600;
}

.creator-body .link-arrow {
  margin-top: auto;
  padding-top: 4px;
}

.creator-card:hover .link-arrow {
  color: var(--text);
}

.creator-card:hover .link-arrow .icon {
  transform: translateX(3px);
}

@media (max-width: 860px) {
  .creator-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 600px) {
  .creator-card {
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
  }

  .creator-art {
    aspect-ratio: 16 / 9;
  }

  .creator-previews {
    width: 84%;
    gap: 8px;
  }

  .ui-button {
    min-width: 92px;
    height: 36px;
    font-size: 15px;
  }

  .ui-frame {
    grid-template-columns: repeat(3, 20px);
    padding: 9px;
  }

  .ui-frame span {
    height: 20px;
  }

  .creator-body {
    padding: 18px 18px 20px;
  }
}

/* The header has two more links now: on mid-size screens the Roblox profile button makes room for them. */
@media (max-width: 1080px) and (min-width: 861px) {
  .header-cta {
    display: none;
  }
}

/* ---------- cursor ----------
   The website shows the device's own cursor. Every rule that shows the plain arrow or the pointing hand says
   cursor: var(--nc-arrow, default) or var(--nc-hand, pointer), so Nighty Design can show its NightyCode cursor (or
   the visitor's choice) there only: designer.css "cursor" sets these values on its page. Every other cursor (text,
   resize, grab, crosshair...) stays the browser's. */
:root {
  --nc-page: auto;
  --nc-arrow: default;
  --nc-hand: pointer;
}

html {
  cursor: var(--nc-page, auto);
}

/* What the browser itself shows as the hand (links) or the arrow (buttons, menus, check boxes, disabled fields).
   No specificity, so any cursor a page sets on purpose wins. Text fields keep the browser's text cursor. */
:where(:any-link) {
  cursor: var(--nc-hand, pointer);
}

:where(button, select, option, label, input:is([type="button" i], [type="submit" i], [type="reset" i], [type="file" i], [type="range" i], [type="checkbox" i], [type="radio" i], [type="color" i]), input:disabled, textarea:disabled) {
  cursor: var(--nc-arrow, default);
}

:where([contenteditable]:not([contenteditable="false" i])) {
  cursor: auto;
}