/*
 * LastLane website — styles.
 *
 * The layout is concept B, picked by the user in #93
 * (lastlane-assets/concept-art/website/02-seedream-5-pro-road-and-grit.png):
 * dark asphalt, a slim top bar, the logo and badges in a left column, the car
 * and the horde bleeding off the right edge.
 *
 * Every colour, size of space and typeface is a token in :root below, and
 * nothing further down names a raw value for one, so a change of look is an
 * edit to the tokens and the page art rather than a rewrite.
 *
 * Deliberately dark-only. This is a brand look, not a preference, so there is
 * no prefers-color-scheme light variant.
 *
 * Saira Condensed Bold is the game's own font (the HUD, menus and titles) and
 * is used here for headings and labels only. Long text, such as the legal
 * pages, is set in the system font: a condensed bold face is hard going over a
 * few thousand words, and the system font costs no download.
 */

/* ---------- Fonts ----------
   Self-hosted, deliberately. A `<link>` to fonts.googleapis.com sends every
   visitor's IP to Google before the page paints, which citostudio.nl already
   refuses as "a GDPR risk for an EU company", and which is at its sharpest on
   /privacy. Nothing here makes a third-party request.

   These are Google's OWN woff2 subsets, fetched from fonts.gstatic.com, so the
   bytes are identical to what the CDN served and no conversion tool was
   involved. latin + latin-ext only: the site is English today, the game's
   Turkish, German and the other Latin languages (#94) need latin-ext, and a
   browser downloads a subset only if the page uses a character in its range.

   Saira Condensed is SIL OFL 1.1. The licence travels with it in
   assets/fonts/OFL.txt, which is what the OFL asks for. */

@font-face {
  font-family: 'Saira Condensed';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonts/saira-condensed-700-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Saira Condensed';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonts/saira-condensed-700-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  color-scheme: dark;

  /* Base: the asphalt. --bg-primary is sampled from the page art's edges, so
     where the art ends, on a very wide or tall screen or a phone's stacked
     page, the page carries on in the same tone instead of showing a seam. */
  --bg-primary: #0A0D11;
  --bg-panel: #15191E;
  --divider: #262B31;
  /* The thin, faint rules under the top bar and above the footer. */
  --rule: color-mix(in srgb, var(--text-primary) 12%, transparent);

  /* Text */
  --text-primary: #E9E4DC;
  --text-secondary: #B3ADA3;
  --text-muted: #7E7970;

  /* Accent: the rust at the foot of the logo's letters. */
  --accent: #C8622D;

  /* Page art. One image: on a desktop it is the whole page's background,
     anchored right so the car bleeds off the right edge and the left stays
     clear for the text; on a phone a crop of it centred on the car sits on top
     of the stacked page.

     Both are web copies of the text-free page art
     (lastlane-assets/concept-art/website/03-seedream-5-pro-road-and-grit-art.png,
     2720x1536, left untouched): hero.webp scaled to 2400px wide, and
     hero-phone.webp a 4:3 crop around the car scaled to 1000px wide. Remade
     from that master, never from each other.

     The art's left side is already empty asphalt, so --hero-shade is light: a
     little darkening behind the text for contrast, and a fade at the foot so
     the footer reads. */
  --hero-image: url(/assets/hero.webp);
  --hero-position: right center;
  --hero-image-phone: url(/assets/hero-phone.webp);
  --hero-position-phone: center;
  --hero-shade:
    linear-gradient(90deg,
      color-mix(in srgb, var(--bg-primary) 50%, transparent) 0%,
      transparent 45%),
    linear-gradient(180deg,
      transparent 75%,
      color-mix(in srgb, var(--bg-primary) 70%, transparent) 100%);

  /* The lane line under the logo: a rust dash, then off-white ones, five in
     all across the logo's width. Percentages of the line's length. */
  --lane-dash: 18%;
  --lane-gap: 2.5%;
  --lane-height: 8px;
  --lane-paint: color-mix(in srgb, var(--text-primary) 85%, transparent);

  /* Spacing */
  --xs: 4px;
  --sm: 8px;
  --md: 12px;
  --lg: 16px;
  --xl: 24px;
  --xxl: 48px;

  --radius: 6px;

  /* Typefaces */
  --font-display: 'Saira Condensed', 'Arial Narrow', system-ui, sans-serif;
  --font-body: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;

  --max-width: 1200px;
}

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

html { background: var(--bg-primary); }

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--bg-primary);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: clamp(16px, 1.05vw + 13px, 18px);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

/* The footer sits at the bottom of a short page rather than mid-screen. */
main { flex: 1 0 auto; }

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 1.1;
  margin: 0;
}

p { margin: 0; }

a { color: var(--accent); }

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

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

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

/* ---------- Top bar ----------
   The same on every page. The rule sits under the content width, not the
   whole window, as the concept draws it. */

.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--lg);
  min-height: 64px;
  border-bottom: 1px solid var(--rule);
}

.brand { display: inline-flex; flex: none; text-decoration: none; }

.brand img {
  width: clamp(96px, 9vw, 120px);
  height: auto;
}

/* The nav, in the top bar and in the footer. */
.site-header nav,
.site-footer nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--xs) var(--xl);
}

.site-header nav a,
.site-footer nav a {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
}

.site-header nav a { font-size: 17px; color: var(--text-primary); }
.site-footer nav a { font-size: 15px; color: var(--text-secondary); }

.site-header nav a:hover,
.site-footer nav a:hover { color: var(--accent); }

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--md) var(--xl);
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  background: var(--bg-panel);
  color: var(--text-primary);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background-color 120ms ease, transform 120ms ease;
}

.btn:hover { background: color-mix(in srgb, var(--accent) 22%, var(--bg-panel)); }
.btn:active { transform: translateY(1px); }

/* ---------- Home: page art and hero ----------
   Phone first: the art's car crop on top, then the logo, lane line, line of
   copy and badges, stacked. From 860px the art moves behind the whole page and
   the copy becomes a left column, vertically centred, over its clear side. */

.hero-art {
  aspect-ratio: 4 / 3;
  max-height: 46vh;
  width: 100%;
  background:
    linear-gradient(180deg, transparent 55%, var(--bg-primary) 100%),
    var(--hero-image-phone) var(--hero-position-phone) / cover no-repeat;
}

.hero {
  display: flex;
  flex-direction: column;
}

.hero > .wrap {
  flex: 1 0 auto;
  display: flex;
  align-items: center;
  padding-block: var(--lg) var(--xxl);
}

.hero-copy { width: 100%; }

.hero-logo { margin-bottom: var(--xl); }

.hero-logo img {
  width: min(560px, 100%);
  height: auto;
  /* Lifts the off-white letters off the brighter patches of the art behind. */
  filter: drop-shadow(0 4px 18px rgba(0, 0, 0, 0.6));
}

/* A worn lane line. One layer paints a single rust dash; the layer under it
   repeats off-white dashes on the same pitch, so the rust one covers the first
   of them exactly. The mask scuffs both with fine diagonal streaks, which is
   the worn look without an image. */
.lane-line {
  width: min(560px, 100%);
  height: var(--lane-height);
  margin-bottom: var(--xl);
  background:
    linear-gradient(90deg, var(--accent) 0 var(--lane-dash), transparent var(--lane-dash)),
    repeating-linear-gradient(90deg,
      var(--lane-paint) 0 var(--lane-dash),
      transparent var(--lane-dash) calc(var(--lane-dash) + var(--lane-gap)));
  -webkit-mask-image: repeating-linear-gradient(115deg,
    #000 0 5px, rgba(0, 0, 0, 0.35) 5px 7px, #000 7px 11px, rgba(0, 0, 0, 0.6) 11px 12px);
  mask-image: repeating-linear-gradient(115deg,
    #000 0 5px, rgba(0, 0, 0, 0.35) 5px 7px, #000 7px 11px, rgba(0, 0, 0, 0.6) 11px 12px);
}

.hero .lede {
  font-size: clamp(14px, 0.4vw + 12px, 17px);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-primary);
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.7);
}

@media (min-width: 860px) {
  body.home {
    background:
      var(--hero-shade),
      var(--hero-image) var(--hero-position) / cover no-repeat,
      var(--bg-primary);
  }

  .hero-art { display: none; }

  .hero > .wrap { padding-block: var(--xxl); }

  .hero-copy { max-width: min(46%, 560px); }

  .hero-logo img { width: 100%; }
}

/* ---------- Store badges ---------- */

/* Apple's badge is artwork-tight; Google's bakes 41px of clear space into a
   250px-tall image, so its content is only 67.2% of the file. Rendering both at
   the same height makes the Play badge look noticeably smaller. The Play image
   is therefore drawn ~1.49x taller and pulled back in with negative margins, so
   the two match optically and sit the same distance apart. Both are used
   unmodified, which is what Apple's and Google's guidelines require. */
.badge-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--md) var(--lg);
  margin-top: var(--xl);
}

.badge {
  display: inline-flex;
  align-items: center;
  border-radius: var(--radius);
  transition: opacity 120ms ease, transform 120ms ease;
}

.badge img { height: 54px; width: auto; }

.badge-play img {
  height: 80px;
  /* 41/646 and 41/250 of the rendered box, reclaimed so the clear space Google
     bakes in does not read as an extra gap. */
  margin: -13px;
}

.badge:hover { transform: translateY(-1px); }

.badge.is-soon {
  opacity: 0.45;
  cursor: default;
  pointer-events: none;
}

.badge.is-soon:hover { transform: none; }

/* ---------- Legal pages (privacy, terms) ----------
   Long-form prose, which the home page has no need of. Narrower than
   --max-width on purpose: a legal page is read line by line, and a wide
   measure is roughly twice the ~70 characters that stays readable. */

.legal {
  max-width: 760px;
  padding-block: var(--xxl);
}

.legal h1 { font-size: clamp(34px, 4vw + 16px, 52px); margin-bottom: var(--xl); }
.legal h2 { font-size: clamp(24px, 1.4vw + 18px, 30px); margin-top: var(--xxl); margin-bottom: var(--md); }
.legal h3 {
  font-size: clamp(19px, 0.6vw + 16px, 21px);
  margin-top: var(--xl);
  margin-bottom: var(--sm);
  color: var(--accent);
}

.legal p, .legal ul { margin-bottom: var(--lg); }
.legal p { color: var(--text-secondary); }
.legal strong { color: var(--text-primary); font-weight: 700; }

.legal ul { padding-left: var(--xl); color: var(--text-secondary); }
.legal li { margin-bottom: var(--sm); }

.legal code {
  font-family: ui-monospace, 'SFMono-Regular', monospace;
  font-size: 0.92em;
  color: var(--text-primary);
}

/* Tables scroll on their own on a narrow phone, rather than the whole page
   sideways. display: block on the table is what lets overflow apply to it. */
.legal table {
  display: block;
  overflow-x: auto;
  width: 100%;
  border-collapse: collapse;
  margin-bottom: var(--lg);
  font-size: 0.94em;
  color: var(--text-secondary);
}

.legal th, .legal td {
  text-align: left;
  padding: var(--sm) var(--md);
  border-bottom: 1px solid var(--divider);
  vertical-align: top;
}

.legal th {
  color: var(--text-primary);
  font-weight: 600;
  border-bottom-color: var(--text-muted);
}

/* ---------- Footer ---------- */

.site-footer {
  color: var(--text-muted);
  font-size: 14px;
}

.site-footer .wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sm);
  padding-block: var(--xl);
  border-top: 1px solid var(--rule);
  text-align: center;
}

.site-footer nav { justify-content: center; }

/* ---------- Utilities ---------- */

body.centered {
  display: grid;
  place-items: center;
  padding: var(--xl);
  text-align: center;
}

body.centered main { flex: none; }
body.centered h1 { font-size: clamp(30px, 4vw + 12px, 48px); margin-bottom: var(--md); }
body.centered p { color: var(--text-secondary); margin-bottom: var(--xl); }

@media (max-width: 480px) {
  .wrap { padding-inline: var(--lg); }
  .site-header nav { gap: var(--xs) var(--lg); }
  .site-header nav a { font-size: 15px; }
  .hero .lede { letter-spacing: 0.1em; }

  /* Both badges on one line at 375px, as the concept has them. Same ratio as
     above, scaled down: the Play image stays ~1.49x the Apple one. */
  .badge img { height: 46px; }
  .badge-play img { height: 68px; margin: -11px; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}