/* =========================================================================
   Random Game Studios
   -------------------------------------------------------------------------
   One stylesheet, no framework, no build step.

   The design idea: the site is a dark room and the games are the only thing
   lit in it. Colour arrives from the game being looked at, through --accent,
   which the layout sets per page. Nothing else is allowed to be loud.

   "Dark room", not "black void". The surfaces are all tinted green rather
   than being neutral greys, and the darkest of them sits at 7.5% lightness
   rather than 3.5%. The first pass used a neutral near-black and the whole
   site read as heavy and flat - an accent on true black has nothing to sit
   against.

   Every colour pairing in here is checked by `node tools/palette.mjs`, which
   builds the scale and prints the WCAG ratios. Run it after touching a token.
   ========================================================================= */

:root {
  /*
   * Surfaces, darkest first.
   *
   * These are not neutral greys. Every one carries a little green (~150deg)
   * at low saturation, so the page reads as a dark room rather than as a
   * void - a perfectly neutral near-black behind a bright accent is what made
   * the first pass feel flat and heavy.
   *
   * Lightness climbs 7.5 / 11 / 15 / 20 per cent, which is enough separation
   * that a card reads as raised without any border doing the work.
   *
   * Run `node tools/palette.mjs` to re-check every pairing below against WCAG.
   */
  --bg: #0e1813;
  --bg-1: #15231c;
  --bg-2: #1e2e26;
  --bg-3: #2a3c33;

  --line: #ffffff16;
  --line-2: #ffffff2b;

  /* 16.9:1, 11.8:1 and 6.8:1 on --bg. The muted step used to be 4.43:1,
     which is under AA - it is the reason this scale was rebuilt. */
  --ink: #f2f8f5;
  --ink-2: #c4d4cc;
  --ink-3: #8ea499;

  /* The label colour on any accent-filled control. Near-black with the same
     hue, so a button never looks like it borrowed its text from elsewhere. */
  --on-accent: #08120d;

  /* Overridden per page by the layout. Lime is the studio default; it is
     deliberately a different green from 52 Pickup and Squares so the studio
     chrome never looks like it belongs to one particular game. */
  --accent: #a3e635;
  --accent-soft: #a3e6351f;
  --accent-line: #a3e63545;

  /* The studio mark keeps its own gradient regardless of page accent. */
  --brand-1: #a3e635;
  --brand-2: #2ee6a6;

  --font: 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --wrap: 1200px;
  --r: 14px;
  --r-lg: 22px;

  --shadow: 0 20px 60px -20px #000000cc;
}

/* ---------------------------------------------------------------- reset -- */

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: 88px;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* A faint grid over the whole page. It is the only decoration that is not
   tied to a game, and it is what stops the black reading as empty. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(#ffffff05 1px, transparent 1px) 0 0 / 100% 64px,
    linear-gradient(90deg, #ffffff05 1px, transparent 1px) 0 0 / 64px 100%;
  mask-image: radial-gradient(ellipse 120% 80% at 50% 0%, #000 20%, transparent 78%);
}

body > * { position: relative; z-index: 1; }

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

h1, h2, h3, h4 {
  margin: 0 0 .5em;
  line-height: 1.12;
  letter-spacing: -0.022em;
  font-weight: 700;
}

h1 { font-size: clamp(2.3rem, 6vw, 4.1rem); }
h2 { font-size: clamp(1.7rem, 3.6vw, 2.6rem); }
h3 { font-size: 1.15rem; }
p { margin: 0 0 1em; }

code {
  font-family: var(--mono);
  font-size: .88em;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: .12em .4em;
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--accent);
  color: var(--on-accent);
  padding: .8rem 1.2rem;
  border-radius: 0 0 10px 0;
  font-weight: 700;
  z-index: 100;
}
.skip:focus { left: 0; }

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

/* --------------------------------------------------------------- layout -- */

.wrap {
  width: min(var(--wrap), calc(100% - 2.5rem));
  margin-inline: auto;
}

.sec { padding: clamp(3.5rem, 8vw, 6.5rem) 0; }

.band {
  background:
    radial-gradient(70% 120% at 50% 0%, var(--accent-soft), transparent 70%),
    var(--bg-1);
  border-block: 1px solid var(--line);
}

.centred { text-align: center; }
.centred .sec-head { margin-inline: auto; }
.narrow { max-width: 68ch; }
.narrow-c { max-width: 62ch; margin-inline: auto; }
.centred-actions { justify-content: center; }

.eyebrow {
  font-family: var(--mono);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 .9rem;
}

.sec-head { max-width: 62ch; margin-bottom: 2.6rem; }
.sec-sub { color: var(--ink-2); margin: .3rem 0 0; font-size: 1.05rem; }
.lead { font-size: 1.16rem; color: var(--ink-2); max-width: 62ch; }
.fine { font-size: .92rem; color: var(--ink-3); }
.fine.centred { margin-top: 2rem; }

.two-col {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}

.grid { display: grid; gap: 1.5rem; }
.grid.two { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.grid.features { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.grid.support-grid { grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); }
.grid.cards { grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); }
.grid.cards.small { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }

/* --------------------------------------------------------------- header -- */

.site-head {
  position: sticky;
  top: 0;
  z-index: 50;
  background: #0e1813d9;
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid var(--line);
}

.head-inner {
  display: flex;
  align-items: center;
  gap: 1rem;
  height: 68px;
}

.logo {
  display: flex;
  align-items: center;
  gap: .65rem;
  text-decoration: none;
  font-size: 1rem;
  letter-spacing: -.02em;
  margin-right: auto;
  flex-shrink: 0;
}
.logo b { font-weight: 700; }
.logo-text { color: var(--ink); white-space: nowrap; }
.logo .mark { transition: transform .4s cubic-bezier(.2,.9,.3,1.4); }
.logo:hover .mark { transform: rotate(-12deg) scale(1.06); }

.site-nav {
  display: flex;
  align-items: center;
  gap: .35rem;
}
/* :not(.btn) matters. Without it this rule out-specifies .btn-accent and the
   call-to-action ends up grey-on-accent, which fails contrast. */
.site-nav > a:not(.btn) {
  padding: .5rem .8rem;
  border-radius: 9px;
  text-decoration: none;
  color: var(--ink-2);
  font-size: .95rem;
  font-weight: 500;
  transition: color .18s, background .18s;
}
.site-nav > a:not(.btn):hover { color: var(--ink); background: var(--bg-2); }
.site-nav > a:not(.btn)[aria-current='page'] { color: var(--ink); background: var(--bg-2); }
.site-nav .btn { margin-left: .5rem; }

.burger {
  display: none;
  width: 42px; height: 42px;
  border: 1px solid var(--line-2);
  border-radius: 10px;
  background: var(--bg-2);
  cursor: pointer;
  padding: 0;
  place-items: center;
  gap: 4px;
}
.burger span {
  display: block;
  width: 17px; height: 2px;
  background: var(--ink);
  border-radius: 2px;
  transition: transform .25s, opacity .2s;
}
.burger[aria-expanded='true'] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.burger[aria-expanded='true'] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded='true'] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* -------------------------------------------------------------- buttons -- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .78rem 1.35rem;
  border-radius: 11px;
  font-weight: 600;
  font-size: .97rem;
  text-decoration: none;
  border: 1px solid var(--line-2);
  color: var(--ink);
  background: var(--bg-2);
  transition: transform .16s, background .18s, border-color .18s, box-shadow .18s;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); border-color: var(--line-2); background: var(--bg-3); }
.btn:active { transform: translateY(0); }

.btn-accent {
  background: var(--accent);
  border-color: transparent;
  color: var(--on-accent);
  box-shadow: 0 8px 30px -10px var(--accent);
}
.btn-accent:hover { background: var(--accent); box-shadow: 0 14px 40px -12px var(--accent); }

.btn-ghost { background: transparent; }
.btn-ghost:hover { background: var(--bg-2); }

.btn-sm { padding: .5rem .9rem; font-size: .88rem; border-radius: 9px; }
.btn-lg { padding: .95rem 1.7rem; font-size: 1.03rem; }

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .8rem;
  margin-top: 1.6rem;
}

/* ----------------------------------------------------------------- hero -- */

.hero {
  position: relative;
  padding: clamp(3.5rem, 10vw, 8rem) 0 clamp(3rem, 7vw, 5rem);
  overflow: hidden;
}

.hero-glow {
  position: absolute;
  inset: -30% -10% auto;
  height: 620px;
  background:
    radial-gradient(50% 55% at 25% 40%, #a3e63538, transparent 70%),
    radial-gradient(45% 50% at 72% 30%, #2ee6a633, transparent 70%),
    radial-gradient(40% 45% at 50% 65%, #ff5fae22, transparent 70%);
  filter: blur(20px);
  pointer-events: none;
}

.hero-inner { position: relative; max-width: 62rem; }
.hero h1 { margin-bottom: .5em; }
.grad {
  background: linear-gradient(100deg, var(--brand-1), var(--brand-2) 60%, #3ddc84);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero-sub { font-size: clamp(1.05rem, 2vw, 1.3rem); color: var(--ink-2); max-width: 58ch; }

.hero-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 1rem;
  margin: 3.2rem 0 0;
  padding-top: 2rem;
  border-top: 1px solid var(--line);
  max-width: 46rem;
}
.hero-stats div { margin: 0; }
.hero-stats dt {
  font-size: 2.4rem;
  font-weight: 700;
  line-height: 1;
  font-family: var(--mono);
  background: linear-gradient(180deg, var(--ink), var(--ink-3));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero-stats dd {
  margin: .45rem 0 0;
  font-size: .84rem;
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: .09em;
}

.strip {
  border-block: 1px solid var(--line);
  background: var(--bg-1);
  padding: 1.6rem 0;
}
.strip-inner p { margin: 0; color: var(--ink-2); max-width: 88ch; }
.strip-inner b { color: var(--ink); }

.page-head { padding: clamp(3rem, 7vw, 5rem) 0 0; }
.page-head.tall { padding-block: clamp(5rem, 14vw, 9rem); }
.page-head .lead { margin-top: .5rem; }

/* ---------------------------------------------------------------- cards -- */

.card {
  display: flex;
  flex-direction: column;
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  text-decoration: none;
  transition: transform .3s cubic-bezier(.2,.8,.3,1), border-color .3s, box-shadow .3s;
  position: relative;
}
.card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: inset 0 0 0 1px transparent, 0 0 0 0 transparent;
  transition: box-shadow .3s;
}
.card:hover {
  transform: translateY(-6px);
  border-color: var(--accent-line, #ffffff30);
}
.card:hover::after {
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 40%, transparent),
              0 26px 60px -28px var(--accent);
}

.card-media {
  position: relative;
  overflow: hidden;
  background: linear-gradient(160deg, var(--accent-2, #16261e), #0a1410);
}
.card-media img, .card-media .keyart {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  transition: transform .5s cubic-bezier(.2,.8,.3,1);
}
.card:hover .card-media img { transform: scale(1.045); }
.card-media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, #0c0e13 2%, transparent 45%);
}

/* Every game keeps its own real aspect ratio - a 16:9 landscape game
   letterboxed into a portrait frame looks like a mistake. */
.ar-9-16 .card-media { aspect-ratio: 9 / 13.2; }
.ar-9-19 .card-media { aspect-ratio: 9 / 13.2; }
.ar-3-4  .card-media { aspect-ratio: 3 / 3.6; }
.ar-16-9 .card-media { aspect-ratio: 16 / 10.5; }

.card-body { padding: 1.15rem 1.25rem 1.35rem; display: flex; flex-direction: column; flex: 1; }
.card-top { display: flex; align-items: flex-start; gap: .7rem; justify-content: space-between; }
.card-top h3 { margin: 0; font-size: 1.22rem; }
.card-tag { color: var(--ink-2); font-size: .96rem; margin: .5rem 0 0; flex: 1; }
.card-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  margin: 1.1rem 0 0;
  padding-top: .85rem;
  border-top: 1px solid var(--line);
  font-size: .84rem;
  color: var(--ink-3);
  font-family: var(--mono);
}
.card-go { color: var(--accent); transition: transform .2s; }
.card:hover .card-go { transform: translateX(3px); }
.card.mini .card-body { padding-bottom: 1.1rem; }

/* ----------------------------------------------------------------- pill -- */

.pill {
  display: inline-flex;
  align-items: center;
  gap: .42rem;
  flex-shrink: 0;
  font-family: var(--mono);
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: .3rem .6rem;
  border-radius: 100px;
  border: 1px solid var(--line-2);
  background: var(--bg-2);
  color: var(--ink-2);
  white-space: nowrap;
}
.pill i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.pill-live { color: #3ddc84; border-color: #3ddc8440; background: #3ddc8412; }
.pill-live i { box-shadow: 0 0 0 0 #3ddc8480; animation: ping 2.4s ease-out infinite; }
.pill-review { color: #fbbf24; border-color: #fbbf2440; background: #fbbf2412; }
.pill-dev { color: #7dd3fc; border-color: #7dd3fc40; background: #7dd3fc12; }

@keyframes ping {
  0% { box-shadow: 0 0 0 0 #3ddc8480; }
  70%, 100% { box-shadow: 0 0 0 7px #3ddc8400; }
}

/* ------------------------------------------------------------ game page -- */

.crumbs {
  padding-top: 1.5rem;
  font-size: .87rem;
  color: var(--ink-3);
  font-family: var(--mono);
}
.crumbs a { color: var(--ink-3); text-decoration: none; }
.crumbs a:hover { color: var(--accent); }
.crumbs span { opacity: .4; margin: 0 .35rem; }
.crumbs b { color: var(--ink-2); font-weight: 500; }

.g-hero { position: relative; padding: clamp(2rem, 5vw, 3.5rem) 0 clamp(3rem, 6vw, 4.5rem); overflow: hidden; }
.g-hero-wash {
  position: absolute;
  inset: -25% -20% auto;
  height: 520px;
  background: radial-gradient(45% 60% at 30% 30%, var(--accent), transparent 70%);
  opacity: .17;
  filter: blur(30px);
  pointer-events: none;
}
.g-hero-inner {
  position: relative;
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
.g-hero h1 { margin: .7rem 0 .2em; }
.codename {
  font-family: var(--mono);
  font-size: .85rem;
  color: var(--ink-3);
  margin: 0 0 .8rem;
}
.g-tagline { font-size: clamp(1.1rem, 2.2vw, 1.4rem); color: var(--accent); font-weight: 500; margin-bottom: .8rem; }
.g-blurb { color: var(--ink-2); font-size: 1.06rem; max-width: 48ch; }

.badges { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.5rem; }
.store-badge {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  padding: .55rem 1.05rem .55rem .85rem;
  border: 1px solid var(--line-2);
  border-radius: 12px;
  background: var(--bg-2);
  text-decoration: none;
  color: var(--ink);
  transition: transform .18s, border-color .18s, background .18s;
}
.store-badge:hover { transform: translateY(-2px); background: var(--bg-3); border-color: var(--accent-line); }
.store-badge span { display: flex; flex-direction: column; line-height: 1.15; }
.store-badge small { font-size: .66rem; color: var(--ink-3); text-transform: uppercase; letter-spacing: .07em; }
.store-badge b { font-size: 1rem; font-weight: 600; }

.mini-badge {
  display: inline-block;
  padding: .42rem .85rem;
  border: 1px solid var(--line-2);
  border-radius: 100px;
  font-size: .85rem;
  text-decoration: none;
  color: var(--ink-2);
  margin-right: .5rem;
  transition: border-color .2s, color .2s;
}
.mini-badge:hover { color: var(--accent); border-color: var(--accent-line); }

.notice {
  margin-top: 1.5rem;
  padding: 1.1rem 1.25rem;
  border: 1px solid var(--accent-line);
  border-left-width: 3px;
  border-radius: 12px;
  background: var(--accent-soft);
}
.notice p { margin: 0 0 .8rem; font-size: .97rem; color: var(--ink-2); }
.notice b { color: var(--ink); }

.g-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 1.2rem;
  margin: 2.2rem 0 0;
  padding-top: 1.6rem;
  border-top: 1px solid var(--line);
}
.g-facts div { margin: 0; }
.g-facts dt { font-size: .72rem; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-3); }
.g-facts dd { margin: .3rem 0 0; font-size: .96rem; font-weight: 500; }

/* The phone/screen frame. It is a frame rather than a photorealistic mock-up
   because a fake bezel dates instantly and gets in the way of the game. */
.device {
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  background: #0a0912;
  border: 1px solid var(--line-2);
  box-shadow: var(--shadow), 0 0 90px -30px var(--accent);
}
.device img { width: 100%; height: 100%; object-fit: cover; }
.device::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 1px 0 #ffffff1a;
  pointer-events: none;
}

/* Store creative already contains its own phone mockup. Putting a second
   frame round it reads as a mistake, so `bare` drops the chrome and keeps
   only the glow. */
.device.bare {
  border: none;
  background: transparent;
  box-shadow: 0 0 90px -30px var(--accent);
}
.device.bare::after { display: none; }

.g-hero-media { display: flex; justify-content: center; }
.g-hero-media.ar-9-16 .device { width: min(300px, 100%); aspect-ratio: 9 / 16; }
.g-hero-media.ar-9-19 .device { width: min(272px, 100%); aspect-ratio: 9 / 19.5; }
.g-hero-media.ar-3-4 .device { width: min(360px, 100%); aspect-ratio: 3 / 4; }
.g-hero-media.ar-16-9 .device { width: 100%; aspect-ratio: 16 / 9; }

/* --------------------------------------------------------------- feature -- */

.feature {
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 1.5rem;
  transition: border-color .25s, transform .25s;
}
.feature:hover { border-color: var(--line-2); transform: translateY(-3px); }
.feature h3 { color: var(--ink); margin-bottom: .5rem; }
.feature p { color: var(--ink-2); margin: 0; font-size: .97rem; }
.feature.big { padding: 1.9rem; }
.feature.big h3 { font-size: 1.35rem; }

/* ----------------------------------------------------------------- shots -- */

.shots-scroll {
  overflow-x: auto;
  overflow-y: hidden;
  padding: .5rem 0 1.75rem;
  scrollbar-width: thin;
  scrollbar-color: var(--line-2) transparent;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
}
.shots-scroll::-webkit-scrollbar { height: 8px; }
.shots-scroll::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 4px; }

.shots-track {
  display: flex;
  gap: 1.25rem;
  width: max-content;
  padding-inline: max(1.25rem, calc((100vw - var(--wrap)) / 2 + 1.25rem));
}

.shot { margin: 0; scroll-snap-align: center; }
.shot img {
  border-radius: 18px;
  border: 1px solid var(--line-2);
  background: #0a0912;
  box-shadow: var(--shadow);
  transition: transform .35s cubic-bezier(.2,.8,.3,1), box-shadow .35s;
}
.shot:hover img { transform: translateY(-5px); box-shadow: var(--shadow), 0 0 60px -20px var(--accent); }
.shot figcaption {
  margin-top: .85rem;
  font-size: .89rem;
  color: var(--ink-3);
  max-width: 30ch;
}

.ar-9-16 .shot img { width: 244px; aspect-ratio: 9 / 16; object-fit: cover; }
.ar-9-19 .shot img { width: 222px; aspect-ratio: 9 / 19.5; object-fit: cover; }
.ar-3-4  .shot img { width: 300px; aspect-ratio: 3 / 4; object-fit: cover; }
.ar-16-9 .shot img { width: 520px; aspect-ratio: 16 / 9; object-fit: cover; }

/* ------------------------------------------------------------------ reel -- */

.reel-sec { background: var(--bg-1); border-block: 1px solid var(--line); }

.reel { position: relative; display: flex; flex-direction: column; align-items: center; gap: 1.1rem; }
.reel .device { position: relative; }
.reel.ar-9-16 .device { width: min(290px, 100%); aspect-ratio: 9 / 16; }
.reel.ar-9-19 .device { width: min(266px, 100%); aspect-ratio: 9 / 19.5; }
.reel.ar-16-9 .device { width: min(820px, 100%); aspect-ratio: 16 / 9; }

.reel-frame {
  position: absolute;
  inset: 0;
  opacity: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.reel-frame.on { opacity: 1; }

.reel-btn {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .48rem 1rem;
  border-radius: 100px;
  border: 1px solid var(--line-2);
  background: var(--bg-2);
  color: var(--ink-2);
  font-family: var(--mono);
  font-size: .82rem;
  cursor: pointer;
  transition: color .2s, border-color .2s;
}
.reel-btn:hover { color: var(--ink); border-color: var(--accent-line); }
.reel-ico {
  width: 9px; height: 11px;
  border-left: 3px solid currentColor;
  border-right: 3px solid currentColor;
}
.reel.paused .reel-ico {
  border: none;
  width: 0; height: 0;
  border-left: 10px solid currentColor;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
}

/* ------------------------------------------------------------------ misc -- */

.ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.ticks li {
  position: relative;
  padding-left: 1.9rem;
  color: var(--ink-2);
  font-size: 1rem;
}
.ticks li b { color: var(--ink); }
.ticks li::before {
  content: '';
  position: absolute;
  left: 0; top: .5em;
  width: 11px; height: 6px;
  border-left: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  transform: rotate(-45deg);
}

.steps { counter-reset: s; list-style: none; margin: 0; padding: 0; display: grid; gap: 1.4rem; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.steps li {
  counter-increment: s;
  position: relative;
  padding: 1.9rem 1.5rem 1.5rem;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r);
  color: var(--ink-2);
}
.steps li b { color: var(--ink); display: block; margin-bottom: .3rem; }
.steps li::before {
  content: counter(s);
  position: absolute;
  top: -.9rem; left: 1.4rem;
  width: 34px; height: 34px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: var(--accent);
  color: var(--on-accent);
  font-family: var(--mono);
  font-weight: 600;
  font-size: .95rem;
}

.callout {
  border: 1px solid var(--accent-line);
  border-left-width: 3px;
  background: var(--accent-soft);
  border-radius: 12px;
  padding: 1.15rem 1.35rem;
  margin: 1.5rem 0;
}
.callout p { margin: 0; color: var(--ink-2); }
.callout b { color: var(--ink); }
.callout.wide { margin-top: 2.5rem; }

.live-row { display: grid; gap: 1.4rem; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.live-card {
  padding: 1.8rem;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background:
    radial-gradient(90% 100% at 0% 0%, color-mix(in srgb, var(--accent) 11%, transparent), transparent 60%),
    var(--bg-1);
}
.live-card h3 { font-size: 1.5rem; }
.live-card > p { color: var(--ink-2); }
.live-more { display: inline-block; margin-top: 1.2rem; color: var(--accent); text-decoration: none; font-weight: 600; font-size: .95rem; }
.live-more:hover { text-decoration: underline; }

.filters { display: flex; flex-wrap: wrap; gap: .55rem; margin-top: 2rem; }
.chip {
  padding: .45rem .95rem;
  border-radius: 100px;
  border: 1px solid var(--line-2);
  background: transparent;
  color: var(--ink-2);
  font-family: var(--mono);
  font-size: .85rem;
  cursor: pointer;
  transition: all .2s;
}
.chip:hover { color: var(--ink); border-color: var(--ink-3); }
.chip.on { background: var(--accent); border-color: transparent; color: var(--on-accent); font-weight: 600; }

.faq details {
  border-bottom: 1px solid var(--line);
  padding: 1.15rem 0;
}
.faq summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 1.04rem;
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: center;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: '+';
  font-family: var(--mono);
  color: var(--accent);
  font-size: 1.3rem;
  line-height: 1;
  transition: transform .25s;
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq p { margin: .9rem 0 0; color: var(--ink-2); max-width: 68ch; }

/* --------------------------------------------------------------- playtest -- */

.test-list { display: grid; gap: 1rem; }
.test-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 1.5rem;
  align-items: center;
  padding: 1.35rem 1.5rem;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--bg-1);
  transition: border-color .25s, background .25s;
}
.test-row:hover { border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.test-top { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; }
.test-row h3 { margin: 0; font-size: 1.2rem; }
.test-row h3 a { text-decoration: none; }
.test-row h3 a:hover { color: var(--accent); }
.test-main p { margin: .35rem 0 0; color: var(--ink-2); font-size: .96rem; }
.test-meta { display: flex; gap: 2rem; margin: 0; }
.test-meta div { margin: 0; }
.test-meta dt { font-size: .68rem; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-3); }
.test-meta dd { margin: .2rem 0 0; font-size: .9rem; font-family: var(--mono); }

.join {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: 2.5rem;
  align-items: start;
}
.join-card {
  padding: clamp(1.8rem, 4vw, 2.8rem);
  border: 1px solid var(--accent-line);
  border-radius: var(--r-lg);
  background:
    radial-gradient(80% 100% at 0% 0%, var(--accent-soft), transparent 65%),
    var(--bg-1);
}
.join-card h2 { font-size: clamp(1.8rem, 3.4vw, 2.4rem); }
.join-card > p { color: var(--ink-2); }
.join-side h3 { margin-top: 0; }
.join-side h3 + p, .join-side .ticks { margin-bottom: 2rem; }
.cost { font-family: var(--mono); color: #3ddc84; font-size: 1.1rem; }

/* ----------------------------------------------------------------- legal -- */

.legal-head {
  padding: clamp(2.5rem, 6vw, 4rem) 0 0;
  border-bottom: 1px solid var(--line);
  padding-bottom: 2.5rem;
}
.legal-head h1 { font-size: clamp(1.9rem, 4.4vw, 3rem); }
.legal-updated { font-family: var(--mono); font-size: .85rem; color: var(--ink-3); margin-bottom: 1.2rem; }
.legal-intro { color: var(--ink-2); max-width: 62ch; font-size: 1.06rem; }
.legal-intro a { color: var(--accent); }

.legal-layout { display: grid; grid-template-columns: 230px 1fr; gap: 3.5rem; align-items: start; }
.legal-toc { position: sticky; top: 92px; }
.legal-toc h2 {
  font-size: .74rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--ink-3);
  margin-bottom: .9rem;
}
.legal-toc ol { margin: 0; padding: 0 0 0 1.1rem; display: grid; gap: .5rem; }
.legal-toc a { color: var(--ink-2); text-decoration: none; font-size: .92rem; }
.legal-toc a:hover { color: var(--accent); }

.prose { color: var(--ink-2); }
.prose h2 {
  color: var(--ink);
  font-size: 1.45rem;
  margin-top: 2.6rem;
  scroll-margin-top: 92px;
}
.prose h2:first-child { margin-top: 0; }
.prose a { color: var(--accent); }
.prose p { max-width: 72ch; }
.prose strong, .prose b { color: var(--ink); }

.legal-list { display: grid; gap: .9rem; padding-left: 1.2rem; max-width: 72ch; }
.legal-list li { padding-left: .3rem; }
.legal-list b { color: var(--ink); }

.table-scroll { overflow-x: auto; margin: 1.4rem 0; }
.legal-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .93rem;
  min-width: 520px;
}
.legal-table th, .legal-table td {
  text-align: left;
  padding: .85rem 1rem;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.legal-table thead th {
  color: var(--ink-3);
  font-size: .74rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  font-weight: 600;
}
.legal-table tbody th { color: var(--ink-2); font-weight: 500; width: 30%; }
.legal-table a { color: var(--accent); }

.legal-index { display: grid; gap: .75rem; }
.legal-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: space-between;
  align-items: center;
  padding: 1.15rem 1.4rem;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--bg-1);
  border-left: 3px solid var(--accent);
}
.legal-row h3 { margin: 0 0 .2rem; font-size: 1.08rem; }
.legal-row p { margin: 0; color: var(--ink-3); font-size: .9rem; }
.legal-links { display: flex; gap: .5rem; flex-wrap: wrap; }
.legal-links a {
  padding: .35rem .8rem;
  border: 1px solid var(--line-2);
  border-radius: 100px;
  font-size: .84rem;
  text-decoration: none;
  color: var(--ink-2);
  transition: color .2s, border-color .2s;
}
.legal-links a:hover { color: var(--accent); border-color: var(--accent-line); }

/* ----------------------------------------------------------------- press -- */

.press-list { display: grid; gap: 1.1rem; }
.press-row {
  padding: 1.7rem;
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: var(--r);
  background: var(--bg-1);
}
.press-head { display: flex; align-items: center; gap: .9rem; flex-wrap: wrap; }
.press-row h3 { margin: 0; font-size: 1.3rem; }
.press-tag { color: var(--accent); font-weight: 500; margin: .5rem 0 .7rem; }
.press-row > p { color: var(--ink-2); max-width: 76ch; }
.press-meta { display: flex; flex-wrap: wrap; gap: 1.8rem; margin: 1.2rem 0 0; }
.press-meta div { margin: 0; }
.press-meta dt { font-size: .68rem; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-3); }
.press-meta dd { margin: .25rem 0 0; font-size: .9rem; }
.press-links { display: flex; flex-wrap: wrap; gap: 1.1rem; margin: 1.2rem 0 0; font-size: .9rem; }
.press-links a { color: var(--accent); text-decoration: none; }
.press-links a:hover { text-decoration: underline; }

/* ---------------------------------------------------------------- footer -- */

.site-foot {
  border-top: 1px solid var(--line);
  background: var(--bg-1);
  padding: clamp(3rem, 6vw, 4.5rem) 0 2rem;
  margin-top: 2rem;
}
.foot-top { display: grid; grid-template-columns: 1.1fr 2fr; gap: 3rem; }
.foot-tag { margin: 1rem 0 .3rem; color: var(--ink-2); max-width: 30ch; }
.foot-note { margin: 0; font-size: .87rem; color: var(--ink-3); }
.foot-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 2rem; }
.foot-cols h4 {
  font-size: .73rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--ink-3);
  margin-bottom: .9rem;
}
.foot-cols a {
  display: block;
  color: var(--ink-2);
  text-decoration: none;
  font-size: .93rem;
  padding: .22rem 0;
  transition: color .18s;
}
.foot-cols a:hover { color: var(--accent); }

.foot-bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: space-between;
  align-items: center;
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
  font-size: .85rem;
  color: var(--ink-3);
}
.foot-bottom p { margin: 0; }
.foot-legal { display: flex; gap: 1.2rem; }
.foot-legal a { color: var(--ink-3); text-decoration: none; }
.foot-legal a:hover { color: var(--accent); }

/* ------------------------------------------------------------ responsive -- */

@media (max-width: 960px) {
  .two-col, .g-hero-inner, .join, .foot-top { grid-template-columns: 1fr; }
  .legal-layout { grid-template-columns: 1fr; gap: 2rem; }
  .legal-toc { position: static; border-bottom: 1px solid var(--line); padding-bottom: 1.2rem; }
  .g-hero-media { order: -1; }
  .g-hero-media.ar-9-16 .device, .g-hero-media.ar-3-4 .device { width: min(260px, 70%); }
}

@media (max-width: 780px) {
  .burger { display: grid; }
  .site-nav {
    position: fixed;
    inset: 68px 0 auto;
    flex-direction: column;
    align-items: stretch;
    gap: .2rem;
    padding: 1rem 1.25rem 1.5rem;
    /* Opaque, not translucent. A hero headline showing through the menu
       reads as a rendering bug rather than as depth. */
    background: var(--bg-1);
    border-bottom: 1px solid var(--line-2);
    box-shadow: 0 24px 40px -20px #000000e6;
    transform: translateY(-8px);
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s, transform .2s;
  }
  .site-nav.open { opacity: 1; transform: none; pointer-events: auto; }
  .site-nav > a:not(.btn) { padding: .75rem .9rem; font-size: 1.02rem; }
  .site-nav .btn { margin: .6rem 0 0; justify-content: center; }

  .test-row { grid-template-columns: 1fr; }
  .test-meta { gap: 2.5rem; }
  .hero-stats { grid-template-columns: repeat(2, 1fr); }
  .ar-16-9 .shot img { width: min(86vw, 520px); }
  .foot-bottom { flex-direction: column; align-items: flex-start; }
}

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

/* Printing a policy is a real thing people do when a store asks for one. */
@media print {
  .site-head, .site-foot, .legal-toc, .skip, .hero-actions { display: none; }
  body { background: #fff; color: #000; }
  body::before { display: none; }
  .prose, .prose h2, .legal-intro, .legal-table td, .legal-table th { color: #000; }
  a { color: #000; text-decoration: underline; }
}