/* Rabbit Run: the home page, /about (the same file) and /get.

   THESIS: the site is the game's own between-runs screen. The meadow chase is the picture,
   and everything you press is a menu object from DESIGN.md: an opaque fill, a 6-unit
   aubergine outline, a cream bevel on the top edge and a darker lip under it. It refuses
   the store-badge row on a gradient that every game site ships.
   OWN-WORLD: menu-sheet aubergine under the lit meadow; cream ink; coral action-go for a
   store you can open, action-short plum for one that is not open yet (the game's "not yet"
   role); Lilita One for the lockup with its round stroke and hard drop; Nunito for words.
   STORY: a visitor sees the rabbit running from the cougar, reads the name, and taps the
   store button for their phone. On a phone, once a store is live, they never see the page.
   FIRST VIEWPORT: desktop, the key art full width with the lockup and both store buttons in
   its open left third. Phone, the art on top, the lockup overlapping its lower edge, the
   buttons under it in the thumb arc.
   FORM: established world extended (DESIGN.md), no new identity. Colours are DESIGN.md's,
   verbatim. */

:root {
  color-scheme: dark;
  --stroke: #190b12;          /* stroke, menu-outline */
  --sheet: #2a1420;           /* menu-sheet */
  --row: #43243a;             /* menu-row */
  --ink: #fff2e3;
  --ink-sub: #cdb9b4;         /* menu-ink-sub, 7.2:1 on menu-row */
  --ink-quiet: #b8a2a9;       /* menu-ink-quiet */
  --carrot: #ff8a34;
  --go: #ff6b4a;              /* action-go */
  --go-lip: #c2432a;
  --short: #6e5663;           /* action-short */
  --short-lip: #45323d;
  --neutral: #5c3a4e;         /* action-neutral */
  --neutral-lip: #361f2d;
  --bevel: rgba(255, 242, 227, 0.15);
  /* The dark edge on every menu object. A forced dark mode (Samsung Internet) repaints a dark
     BORDER light, but leaves backgrounds, gradients and shadows dark; so the edge is a gradient
     under a transparent border, never border-color. Checked in a forced-dark Chrome. */
  --edge: linear-gradient(var(--stroke), var(--stroke));
  --outline: 3px;             /* 6 canvas units at a 390-wide phone */
  --lip: 6px;
  --radius: 20px;             /* rounded.chip */
  --display: "Lilita One", Impact, "Arial Black", sans-serif;
  --text: "Nunito", ui-rounded, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { background: var(--stroke); }
body {
  margin: 0;
  background: var(--stroke);
  color: var(--ink);
  font: 600 17px/1.5 var(--text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--carrot); outline-offset: 4px; border-radius: 8px; }

/* ------------------------------------------------------------ the lockup
   RABBIT over RUN, cream over carrot. The splash's treatment: a round aubergine edge of
   0.10 x size and a hard drop of 0.09 x size straight down. paint-order keeps the stroke
   outside the letters, so the edge is 0.10 even though the stroke is drawn at 0.20. */
.lockup {
  margin: 0;
  font: 400 var(--lockup-size, 96px)/0.94 var(--display);
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--ink);
  -webkit-text-stroke: 0.2em var(--stroke);
  paint-order: stroke fill;
  text-shadow: 0 0.09em 0 var(--stroke);
}
.lockup span { display: block; }
.lockup .run { color: var(--carrot); }
/* The lockup ships as an IMAGE of the rule above (img/lockup-center|left.webp, rendered at
   360px). Samsung Internet's dark mode repaints a dark text-stroke light, which turned the
   lettering into cream on cream; it leaves images alone. The image is the text box plus
   0.1em on every side for the stroke and drop, so a -0.1em margin puts the box back where
   the text had it (3.424em x 1.88em). */
.lockup picture { display: block; }
.lockup img { display: block; width: 3.625em; max-width: none; height: auto; margin: -0.1em; }

/* ------------------------------------------------------------ a menu object you press */
.store {
  --face: var(--go);
  --face-lip: var(--go-lip);
  --label: var(--stroke);
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-width: 212px;
  min-height: 64px;
  padding: 10px 22px 10px 18px;
  border: var(--outline) solid transparent;
  border-radius: var(--radius);
  background: linear-gradient(var(--face), var(--face)) padding-box, var(--edge) border-box;
  color: var(--label);
  text-decoration: none;
  box-shadow:
    inset 0 3px 0 var(--bevel),
    0 var(--lip) 0 var(--face-lip),
    0 var(--lip) 0 var(--outline) var(--stroke);
  transform: translateY(0);
  transition: transform 90ms cubic-bezier(0.2, 0.9, 0.3, 1), box-shadow 90ms cubic-bezier(0.2, 0.9, 0.3, 1);
  -webkit-tap-highlight-color: transparent;
}
.store svg { flex: none; width: 26px; height: 26px; }
.store-text { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.12; }
.store-small { font: 700 12.5px/1.2 var(--text); letter-spacing: 0.01em; }
.store-big { font: 900 21px/1.15 var(--text); white-space: nowrap; }
a.store[href]:hover { filter: brightness(1.06); }
a.store[href]:active {
  transform: translateY(calc(var(--lip) - 2px));
  box-shadow:
    inset 0 3px 0 var(--bevel),
    0 2px 0 var(--face-lip),
    0 2px 0 var(--outline) var(--stroke);
}
/* A live store's label and icon are dark on coral. A forced dark mode (Samsung Internet) repaints
   dark TEXT and icon fills light, which would put cream on coral. It leaves gradients alone, so
   the label is a dark gradient clipped to the glyphs, and the icon is a dark gradient masked by
   its own shape (the same trick as --edge). Checked in a forced-dark Chrome. */
.store:not(.soon) .store-text {
  color: transparent;
  background: var(--edge);
  -webkit-background-clip: text;
  background-clip: text;
}
/* A store that is not open yet: the game's action-short, full-strength cream, no press. */
.store.soon {
  --face: var(--short);
  --face-lip: var(--short-lip);
  --label: var(--ink);
  cursor: default;
}

.stores { display: flex; flex-wrap: wrap; gap: 18px 16px; }
.is-android .store-play { order: -1; }

/* ------------------------------------------------------------ the handoff
   A phone that is on its way to a live store sees this for a third of a second, not the
   page. Hidden unless store.js set .handoff on <html>. */
.handoff-screen { display: none; }
.handoff body { overflow: hidden; }
.handoff .handoff-screen {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 20px;
  padding: 24px;
  background: var(--sheet);
  text-align: center;
}
.handoff-screen .app-icon { width: 88px; height: 88px; }
.handoff-screen { --lockup-size: 56px; }
.handoff-screen p { margin: 8px 0 0; color: var(--ink-sub); font-weight: 800; }

.app-icon {
  border-radius: 22%;
  border: var(--outline) solid transparent;
  background: var(--edge) border-box;
  box-shadow: 0 var(--lip) 0 var(--outline) var(--stroke);
}

/* ------------------------------------------------------------ home and /about */
.hero { position: relative; background: var(--sheet); }
.hero-art { position: relative; overflow: hidden; }
.hero-art img { width: 100%; height: 100%; object-fit: cover; }
.hero-copy { position: relative; }

.tag {
  margin: 0;
  font: 900 clamp(20px, 2.1vw, 28px)/1.2 var(--text);
  color: var(--ink);
  -webkit-text-stroke: 0.22em var(--stroke);
  paint-order: stroke fill;
}
.avail { margin: 0; color: var(--ink-sub); font-weight: 800; font-size: 16px; }
.avail .when-soon { display: none; }
.prelaunch .avail .when-soon { display: inline; }
.prelaunch .avail .when-live { display: none; }
.partial .avail { display: none; }

/* Desktop: the lockup and buttons sit in the art's open left third, where the feature
   graphic puts its title. */
@media (min-width: 900px) {
  .hero-art { height: min(100vh - 40px, 48.8vw); min-height: 460px; }
  .hero-art img { object-position: 62% 50%; }
  .hero-copy {
    position: absolute;
    left: clamp(32px, 6vw, 112px);
    top: 50%;
    transform: translateY(-50%);
    display: grid;
    gap: 26px;
    justify-items: start;
    max-width: 440px;
  }
  .hero { --lockup-size: clamp(84px, 8.4vw, 136px); }
  .hero .avail {
    color: var(--ink);
    -webkit-text-stroke: 0.3em var(--stroke);
    paint-order: stroke fill;
    font-size: 18px;
    font-weight: 900;
  }
  /* Over the art these lines need their dark edge, and a forced dark mode repaints that edge
     light (see the lockup). So each draws an image of itself, rendered from exactly the rules
     above (img/text-*.webp, 0.2em of edge room on every side); the real text stays in place,
     transparent, for layout, selection and screen readers. */
  .hero .tag, .hero .avail > span { position: relative; color: transparent; -webkit-text-stroke: 0; }
  .hero .tag::before, .hero .avail > span::before {
    content: "";
    position: absolute;
    inset: -0.2em;
    background: center / 100% 100% no-repeat;
  }
  .hero .tag::before { background-image: url("/img/text-tag.webp"); }
  .hero .avail .when-live::before { background-image: url("/img/text-live.webp"); }
  .hero .avail .when-soon::before { background-image: url("/img/text-soon.webp"); }
}

/* Phone and small tablet: the chase on top, cropped to the two animals; the lockup hangs
   over the art's bottom edge onto the sheet; the buttons land in the thumb arc. */
@media (max-width: 899.98px) {
  .hero-art { aspect-ratio: 5 / 4; max-height: 62vh; width: 100%; }
  .hero-art img { object-position: 76% 55%; }
  .hero-copy {
    display: grid;
    gap: 18px;
    justify-items: center;
    text-align: center;
    padding: 0 16px 44px;
    margin-top: calc(var(--lockup-size) * -0.9);
  }
  .hero { --lockup-size: clamp(64px, 19vw, 104px); }
  .hero .tag { font-size: 21px; -webkit-text-stroke: 0; }   /* on the sheet, not the art: no edge needed, and none for a dark mode to repaint */
  .stores { justify-content: center; }
}

/* The three frames: the game at work, as the store shows it. */
.sheet { background: var(--sheet); padding: 72px 16px 88px; }
.shots {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 260px));
  justify-content: center;
  gap: 32px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.shots figure { margin: 0; }
.shots img {
  width: 100%;
  aspect-ratio: 9 / 16;
  border-radius: 26px;
  border: var(--outline) solid transparent;
  box-shadow: 0 var(--lip) 0 var(--outline) var(--stroke);
  background: linear-gradient(var(--row), var(--row)) padding-box, var(--edge) border-box;
}
.shots figcaption {
  margin-top: 18px;
  text-align: center;
  font: 400 26px/1.1 var(--display);
  letter-spacing: 0.01em;
  text-transform: uppercase;
}

.modes {
  max-width: 34ch;
  margin: 92px auto 0;
  text-align: center;
  font: 800 clamp(19px, 2vw, 23px)/1.45 var(--text);
  color: var(--ink);
  text-wrap: balance;
}
.modes em { font-style: normal; color: var(--carrot); }

@media (max-width: 720px) {
  .sheet { padding: 48px 0 64px; }
  .shots {
    grid-template-columns: repeat(3, 72%);
    justify-content: start;
    gap: 16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding: 0 14% 12px;
    scrollbar-width: none;
  }
  .shots::-webkit-scrollbar { display: none; }
  .shots li { scroll-snap-align: center; }
  .modes { margin-top: 48px; padding: 0 20px; }
}

.site-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  justify-content: center;
  padding: 26px 16px 34px;
  color: var(--ink-quiet);
  font-size: 14.5px;
  font-weight: 700;
}
.site-foot a { color: var(--ink-sub); text-decoration: none; }
.site-foot a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

/* ------------------------------------------------------------ /get */
body.get {
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  background: var(--sheet);
  padding: 0 0 calc(28px + env(safe-area-inset-bottom));
}
.get-card { width: 100%; max-width: 420px; text-align: center; }
.get-art { position: relative; aspect-ratio: 16 / 10; overflow: hidden; }
.get-art img { width: 100%; height: 100%; object-fit: cover; object-position: 74% 55%; }
.get-body { position: relative; display: grid; gap: 18px; justify-items: center; padding: 0 20px; }
.get-card { --lockup-size: 64px; }
.get .lockup { margin-top: -54px; }
.get .stores { flex-direction: column; align-items: center; }
.get .store { width: 100%; max-width: 280px; }
.get .avail { margin-top: 2px; }
.get .more { margin: 6px 0 0; font-weight: 800; font-size: 15px; }
.get .more a { color: var(--ink-sub); text-underline-offset: 4px; }
.get .more a:hover { color: var(--ink); }

@media (prefers-reduced-motion: reduce) {
  .store { transition: none; }
}