/* Rapid Games studio site.
   Plain CSS: no web fonts, no scripts, no trackers, no external requests.
   To retune the look to the final logo, edit the TOKENS block only. */

/* ------------------------------------------------------------------ TOKENS */
:root {
  /* Brand */
  --ink: #14122b;      /* logo ink: deep navy */
  --paper: #f7f2e8;    /* warm off-white */
  --accent: #e8502a;   /* provisional: retune to final logo */

  /* Roles (light scheme). Text pairs are checked for WCAG AA by tools/check.py */
  --bg: var(--paper);
  --fg: var(--ink);
  --fg-soft: #4a4763;        /* secondary text */
  --surface: #fffdf8;        /* card face */
  --line: var(--ink);        /* borders and rules */
  --tile-bg: var(--ink);     /* the "more games" tile */
  --tile-fg: var(--paper);

  /* River Rats card art: the game's own colors, not the studio brand */
  --rr-river: #1f6fc4;
  --rr-river-light: #2fa3ec;
  --rr-sand: #f2d48a;
  --rr-grass: #2f8a3a;

  /* Radii */
  --radius-s: 6px;
  --radius-m: 14px;
  --radius-l: 22px;
  --radius-pill: 999px;

  /* Strokes */
  --border: 3px;       /* card and tile outline */
  --shadow: 8px;       /* hard offset shadow, no blur */

  /* Spacing scale */
  --space-1: 0.5rem;
  --space-2: 0.75rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2rem;
  --space-6: clamp(2.5rem, 1.6rem + 4vw, 4rem);     /* between sections */
  --space-7: clamp(3rem, 1.5rem + 7vw, 6rem);       /* hero top */
  --gutter: clamp(1rem, 0.4rem + 3vw, 2rem);        /* page side padding */
  --measure: 60rem;                                 /* max content width */

  /* Type: system fonts only, fluid sizes */
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --step--1: clamp(0.875rem, 0.85rem + 0.12vw, 0.9375rem);
  --step-0: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
  --step-1: clamp(1.25rem, 1.1rem + 0.75vw, 1.625rem);
  --step-2: clamp(1.5rem, 1.2rem + 1.5vw, 2.25rem);

  /* Logo box on the home page: the logo is fitted inside it at any shape.
     A wide lockup is limited by the width, a tall (stacked) one by the height. */
  --logo-width: clamp(15rem, 9rem + 30vw, 30rem);
  --logo-height: clamp(10rem, 6rem + 16vw, 16rem);
  --logo-height-small: 2.75rem;                     /* top bar on the text pages */

  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: var(--ink);
    --fg: var(--paper);
    --fg-soft: #bdb9d0;
    --surface: #1f1c40;
    --line: var(--paper);
    --tile-bg: #2b2757;
    --tile-fg: var(--paper);
  }
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100svh;
  margin: 0;
  min-width: 320px;
  background: var(--bg);
  color: var(--fg);
  font: 400 var(--step-0)/1.55 var(--font);
  border-top: 6px solid var(--accent);
}
main { flex: 1 0 auto; }

img { max-width: 100%; height: auto; }
h1, h2, h3, p, ul { margin: 0; }
a { color: inherit; }

a:focus-visible {
  outline: 3px solid var(--fg);
  outline-offset: 3px;
  border-radius: var(--radius-s);
}

.wrap {
  width: 100%;
  max-width: calc(var(--measure) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Skip link: off screen until it takes keyboard focus */
.skip {
  position: absolute;
  left: var(--gutter);
  top: var(--space-3);
  transform: translateY(-300%);
  z-index: 10;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 var(--space-3);
  background: var(--fg);
  color: var(--bg);
  font-weight: 700;
  border-radius: var(--radius-s);
}
.skip:focus { transform: none; }
.skip:focus-visible { outline-color: var(--accent); }

/* Small uppercase section label with an accent square */
.eyebrow {
  display: flex;
  align-items: center;
  gap: 0.7em;
  margin-bottom: var(--space-4);
  font-size: var(--step--1);
  font-weight: 800;
  letter-spacing: 0.16em;
  line-height: 1.2;
  text-transform: uppercase;
}
.eyebrow::before {
  content: "";
  flex: none;
  width: 0.8em;
  height: 0.8em;
  background: var(--accent);
}

/* Text links: ink text, accent underline */
.link {
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 0.14em;
  text-underline-offset: 0.32em;
  text-decoration-skip-ink: none;
}
.link:hover, .game:hover .link { text-decoration-color: currentColor; }

/* -------------------------------------------------------------------- HERO */
.hero {
  padding-block: var(--space-7) var(--space-6);
  text-align: center;
}
.hero-mark { line-height: 0; }
.brand-logo {
  display: block;
  width: auto;
  height: auto;
  max-width: min(100%, var(--logo-width));
  max-height: var(--logo-height);
  margin-inline: auto;
}
.hero-line {
  max-width: 24ch;
  margin: var(--space-4) auto 0;
  font-size: var(--step-1);
  font-weight: 700;
  line-height: 1.25;
  text-wrap: balance;
}

/* ------------------------------------------------------------------- GAMES */
.section { padding-bottom: var(--space-6); }

.shelf {
  display: grid;
  gap: var(--space-5);
}

.game {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: var(--border) solid var(--line);
  border-radius: var(--radius-l);
  box-shadow: var(--shadow) var(--shadow) 0 var(--accent);
  margin-right: var(--shadow);        /* room for the hard shadow */
}

.game-art {
  display: grid;
  place-items: center;
  padding: var(--space-4) var(--space-3);
  border-bottom: var(--border) solid var(--line);
  border-radius: calc(var(--radius-l) - var(--border)) calc(var(--radius-l) - var(--border)) 0 0;
  line-height: 0;
  /* A river running up the card, in bands like the game's water */
  background:
    repeating-linear-gradient(180deg, transparent 0 34px, rgba(255, 255, 255, 0.1) 34px 38px),
    linear-gradient(90deg,
      var(--rr-grass) 0 4.5%, var(--rr-sand) 4.5% 7%,
      var(--rr-river-light) 7% 19%, var(--rr-river) 19% 81%, var(--rr-river-light) 81% 93%,
      var(--rr-sand) 93% 95.5%, var(--rr-grass) 95.5%);
}

/* Pixel art: hard square pixels at whole-number scales (200 px art: 1x, 2x) */
.game-logo {
  width: 200px;
  height: auto;
  image-rendering: crisp-edges;   /* older browsers */
  image-rendering: pixelated;
}

.game-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4);
}
.game-line {
  font-size: var(--step-2);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
.pill {
  display: inline-block;
  padding: 0.3em 0.95em;
  border: 2px solid var(--line);
  border-radius: var(--radius-pill);
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.02em;
  text-wrap: balance;
}
/* Phones under 400 px: tighten the pill so "Coming soon to iPhone and Android" stays on one line. */
@media (max-width: 399px) {
  .pill { padding-inline: 0.55em; letter-spacing: 0; }
}
/* Under 375 px it cannot fit on one line: let it break into two even lines in a softer box. */
@media (max-width: 374px) {
  .pill { border-radius: 0.9em; padding-block: 0.4em; }
}
.game-cta { margin-top: auto; }
.game-link {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  min-height: 44px;
  text-decoration: none;
}
.game-link .arrow { font-weight: 700; }

/* The link covers the whole card, so the whole card is one tap target */
.game-link::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: calc(var(--radius-l) - var(--border));
}
.game-link:focus-visible { outline: none; }
.game-link:focus-visible::after {
  outline: 3px solid var(--fg);
  outline-offset: 6px;
  border-radius: var(--radius-l);
}

.teaser {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-5);
  padding: var(--space-4);
  background: var(--tile-bg);
  color: var(--tile-fg);
  border: var(--border) solid var(--tile-bg);
  border-radius: var(--radius-l);
  font-size: var(--step-2);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
/* Three squares: decoration only */
.teaser::before {
  content: "";
  width: 14px;
  height: 14px;
  background: var(--accent);
  box-shadow: 24px 0 0 var(--accent), 48px 0 0 var(--accent);
}

/* ----------------------------------------------------------------- CONTACT */
.email {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: var(--step-1);
  font-weight: 800;
  overflow-wrap: anywhere;
}

/* ------------------------------------------------------------------ FOOTER */
.site-footer {
  border-top: var(--border) solid var(--line);
  padding-block: var(--space-4) var(--space-5);
  color: var(--fg-soft);
  font-size: var(--step--1);
}
.footer-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-1) var(--space-5);
}
.footer-nav { display: flex; gap: var(--space-4); }
.footer-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-inline: 0.5rem;             /* wider tap target ... */
  margin-inline: -0.5rem;             /* ... without moving the text */
  color: var(--fg);
}

/* -------------------------------------------- TEXT PAGES (privacy, 404) */
.topbar { padding-block: var(--space-4); }
.home-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.brand-logo-small {
  display: block;
  width: auto;
  height: var(--logo-height-small);
}
.page { padding-block: var(--space-5) var(--space-6); }
.page > * { max-width: 40rem; }
.page h1 {
  margin-bottom: var(--space-3);
  font-size: var(--step-2);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.01em;
}
.page p, .page ul { margin-top: var(--space-3); }
.page ul { padding-left: 1.2em; }
.page li + li { margin-top: 0.25em; }
.page li::marker { color: var(--accent); }
.page .meta { margin-top: 0; color: var(--fg-soft); }
/* A link on a line of its own gets a full-height tap target */
.page .tap {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.page .tap-line { margin-top: calc(var(--space-3) - 0.5rem); }

/* ------------------------------------------------------------ WIDER SCREENS */
@media (min-width: 26rem) {
  .game-art { padding-block: var(--space-5); }
}

@media (min-width: 34rem) {
  .game-logo { width: 400px; }
  .game-body, .teaser { padding: var(--space-5); }
}

@media (min-width: 56rem) {
  .shelf { grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr); }
  .game { margin-right: 0; }          /* the shadow sits in the gap */
}

/* ------------------------------------------------------------------ MOTION */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .game { transition: transform 0.15s ease-out, box-shadow 0.15s ease-out; }
  .game:hover {
    transform: translate(-2px, -2px);
    box-shadow: calc(var(--shadow) + 2px) calc(var(--shadow) + 2px) 0 var(--accent);
  }
  .game-link .arrow { transition: transform 0.15s ease-out; }
  .game:hover .arrow { transform: translateX(3px); }
  .skip { transition: transform 0.15s ease-out; }
}

@media print {
  body { border-top: 0; }
  .skip { display: none; }
}