/* Snake Haul — the public listing preview pages.
 *
 * THE COLOURS ARE NOT CHOSEN HERE. The :root block below is copied verbatim
 * from ../src/kit.css, which is itself transcribed from the game's own
 * Assets/Scripts/Runtime/UI/Palette.cs. Nothing in this file invents a colour.
 * It is duplicated rather than @imported because web/ has to stand on its own
 * as a deploy root, with only assets/ beside it.
 *
 * WHAT IS DELIBERATELY NOT COPIED from kit.css: its `html, body { height: 100%;
 * overflow: hidden }` rule. That is right for a fixed-size creative and wrong
 * for a page you scroll, which is what every page here is.
 *
 * Laid out for 390px first — the reference width the whole game was drawn at,
 * and the width these pages are reviewed at.
 */

@font-face {
  font-family: 'Outfit';
  src: url('fonts/Outfit-var.ttf') format('truetype-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ground and chrome */
  --bg: #fff5fa;
  --panel: #ffffff;
  --ink: #3b1d4e;
  --dim: #7a6285;
  --line: #e8cfdd;
  --drop: #d4b3c6;
  --empty: #e0c8d5;
  --eye: #fdf6e8;

  /* the three zone bands, which are the loudest surface in the app */
  --pink: #ff8fc4;   /* source, top    */
  --gold: #ffd45e;   /* patrol, middle */
  --mint: #5fe0c0;   /* drop, bottom   */

  /* the roles */
  --bank: #17b57f;    --bank-dark: #0d8a5f;
  --heat: #f0524b;    --heat-dark: #c23b35;
  --perm: #3d8bfd;    --perm-dark: #2a6ed4;
  --nitro: #12e0ff;

  /* threats and terrain */
  --jet: #e83870;     --jet-hot: #ff7a9e;
  --plague: #be6edb;  --plague-low: #ae53dc;  --plague-edge: #731eab;
  --water: #50a6c5;   --water-edge: #1a5368;
  --stone: #a1b395;   --stone-edge: #476036;

  /* the seven ball tiers, in order */
  --t1: #3d8bfd;  --t2: #17b57f;  --t3: #f5a623;  --t4: #9b5de5;
  --t5: #f0524b;  --t6: #ffffff;  --t7: #ffc300;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: 'Outfit', system-ui, -apple-system, sans-serif;
  background: var(--ink);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  padding-bottom: 48px;
}

/* `height: auto` is load-bearing, not tidiness. Every <img> here carries its
 * real width/height attributes so the page reserves the right box before the
 * image arrives; without `height: auto` the browser honours that height
 * literally and a 1080x1920 screenshot renders 1920px tall. */
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }

/* ─────────────────────────────────────────────────────────────────────────
   The band that says this is not a real store page.
   Dark, full bleed, above everything, and it never scrolls away silently —
   it is the first thing on the page and the store mock starts below it.
   ───────────────────────────────────────────────────────────────────────── */

.band {
  background: var(--ink);
  color: #fff;
  padding: 20px 18px 22px;
}
.band__tag {
  display: inline-block;
  font-size: 11px; font-weight: 800; letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--gold);
  border-radius: 999px;
  padding: 5px 12px;
}
.band__name {
  font-size: 30px; font-weight: 800; letter-spacing: -.03em;
  line-height: 1.05; margin-top: 12px;
}
.band__bet {
  font-size: 15px; line-height: 1.5; margin-top: 8px;
  color: rgba(255, 255, 255, .78); max-width: 46ch;
}
.band__bet b { color: var(--gold); font-weight: 700; }
.band__note {
  font-size: 12px; line-height: 1.5; margin-top: 14px;
  color: rgba(255, 255, 255, .5); max-width: 52ch;
}
.band__back {
  display: inline-block; margin-top: 16px;
  font-size: 13px; font-weight: 700; text-decoration: none;
  color: rgba(255, 255, 255, .72);
  border: 1px solid rgba(255, 255, 255, .24);
  border-radius: 999px; padding: 7px 14px;
}

/* ─────────────────────────────────────────────────────────────────────────
   The store mock.
   ───────────────────────────────────────────────────────────────────────── */

.store {
  background: var(--bg);
  border-radius: 22px 22px 0 0;
  padding: 20px 16px 28px;
  max-width: 560px;
  margin: 0 auto;
}
.store__frame {
  font-size: 11px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--dim);
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 16px;
}
.store__frame::after {
  content: ''; flex: 1; height: 1px; background: var(--line);
}

/* header: icon, name, developer, meta */
.head { display: flex; gap: 14px; align-items: flex-start; }
.head__icon {
  width: 72px; height: 72px; flex: 0 0 72px;
  border-radius: 17px;               /* Play's squircle, near enough */
  box-shadow: 0 4px 14px rgba(59, 29, 78, .22);
}
.head__text { min-width: 0; padding-top: 2px; }
.head__name {
  font-size: 21px; font-weight: 800; letter-spacing: -.02em; line-height: 1.15;
}
.head__dev { font-size: 14px; font-weight: 600; color: var(--bank); margin-top: 3px; }
.head__meta { font-size: 12px; color: var(--dim); margin-top: 3px; }

.short {
  font-size: 15px; font-weight: 600; line-height: 1.45;
  margin: 16px 0 0; color: var(--ink);
}
.short__cap { font-size: 11px; color: var(--dim); font-weight: 600; margin-top: 5px; }

.install {
  display: block; width: 100%; margin-top: 16px;
  background: var(--bank); color: #fff;
  border: 0; border-radius: 999px;
  font: inherit; font-size: 16px; font-weight: 800; letter-spacing: .01em;
  padding: 13px 0;
  box-shadow: 0 5px 0 var(--bank-dark);
  cursor: default;
}

/* the promo slot: on Play this is where the feature graphic becomes a video
   poster, which is why every feature graphic keeps its centre clear */
.promo { position: relative; margin-top: 22px; }
.promo img { width: 100%; border-radius: 12px; background: var(--panel); }
.promo__play {
  position: absolute; inset: 0; margin: auto;
  width: 56px; height: 56px; border-radius: 50%;
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 4px 16px rgba(59, 29, 78, .3);
  display: grid; place-items: center;
}
.promo__play::after {
  content: ''; margin-left: 4px;
  border-left: 17px solid var(--ink);
  border-top: 11px solid transparent;
  border-bottom: 11px solid transparent;
}

/* the screenshot scroller */
.shots {
  display: flex; gap: 10px;
  margin: 16px -16px 0; padding: 0 16px 10px;
  overflow-x: auto; scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}
.shots img {
  flex: 0 0 auto; width: 132px;
  border-radius: 10px; scroll-snap-align: start;
  background: var(--panel);
  box-shadow: 0 2px 10px rgba(59, 29, 78, .14);
}
.cap { font-size: 11px; color: var(--dim); margin-top: 2px; }

/* about + read more */
.about { margin-top: 26px; }
.about h2 {
  font-size: 18px; font-weight: 800; letter-spacing: -.01em;
}
.desc {
  position: relative; margin-top: 10px;
  font-size: 14.5px; line-height: 1.62; color: #4d3560;
  white-space: pre-wrap;
  max-height: 8.2em; overflow: hidden;
}
.desc::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3.4em;
  background: linear-gradient(to bottom, rgba(255, 245, 250, 0), var(--bg));
  pointer-events: none;
}
.desc.open { max-height: none; }
.desc.open::after { display: none; }
.more {
  margin-top: 10px; background: none; border: 0; padding: 0;
  font: inherit; font-size: 14px; font-weight: 800; color: var(--bank);
  cursor: pointer;
}

.fact {
  margin-top: 26px; padding: 14px 16px;
  background: var(--panel); border-radius: 12px;
  border-left: 4px solid var(--gold);
  font-size: 12.5px; line-height: 1.6; color: var(--dim);
}
.fact b { color: var(--ink); }

/* ─────────────────────────────────────────────────────────────────────────
   Switching between the five, at the bottom of every direction page.
   ───────────────────────────────────────────────────────────────────────── */

.switch { max-width: 560px; margin: 0 auto; padding: 26px 16px 8px; }
.switch h2 {
  font-size: 12px; font-weight: 800; letter-spacing: .16em;
  text-transform: uppercase; color: rgba(255, 255, 255, .5);
}
.switch__row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.switch__row a {
  text-decoration: none; font-size: 14px; font-weight: 700;
  color: rgba(255, 255, 255, .8);
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 10px; padding: 9px 13px;
}
.switch__row a.here {
  background: var(--gold); border-color: var(--gold); color: var(--ink);
}

/* ─────────────────────────────────────────────────────────────────────────
   The landing page.
   ───────────────────────────────────────────────────────────────────────── */

.wrap { max-width: 560px; margin: 0 auto; padding: 0 16px; }

.hero { padding: 34px 0 6px; color: #fff; }
.hero__icon {
  width: 80px; height: 80px; border-radius: 19px;
  box-shadow: 0 8px 26px rgba(0, 0, 0, .38);
}
.hero h1 {
  font-size: 38px; font-weight: 800; letter-spacing: -.035em; line-height: 1.02;
  margin-top: 18px;
}
.hero__sub {
  font-size: 16px; line-height: 1.55; margin-top: 12px;
  color: rgba(255, 255, 255, .76); max-width: 44ch;
}
.hero__sub b { color: var(--gold); font-weight: 700; }

.rule {
  height: 1px; background: rgba(255, 255, 255, .14);
  margin: 30px 0 4px; border: 0;
}
.sec {
  font-size: 12px; font-weight: 800; letter-spacing: .16em;
  text-transform: uppercase; color: rgba(255, 255, 255, .5);
  margin: 30px 0 14px;
}

.cards { display: grid; gap: 14px; }
.card {
  display: block; text-decoration: none;
  background: var(--panel); border-radius: 16px; overflow: hidden;
  box-shadow: 0 6px 22px rgba(0, 0, 0, .26);
}
.card img { width: 100%; }
.card__body { padding: 14px 16px 16px; }
.card__tag {
  font-size: 11px; font-weight: 800; letter-spacing: .16em;
  text-transform: uppercase; color: var(--dim);
}
.card__title {
  font-size: 20px; font-weight: 800; letter-spacing: -.02em;
  margin-top: 5px; color: var(--ink);
}
.card__bet {
  font-size: 14px; line-height: 1.5; margin-top: 6px; color: #5c4370;
}
.card__go {
  display: inline-block; margin-top: 12px;
  font-size: 13px; font-weight: 800; color: var(--bank);
}

.vids { display: grid; gap: 16px; }
.vid { background: rgba(255, 255, 255, .05); border-radius: 14px; padding: 12px; }
.vid video { width: 100%; border-radius: 9px; background: #000; display: block; }
.vid figcaption {
  font-size: 12.5px; line-height: 1.5; margin-top: 9px;
  color: rgba(255, 255, 255, .62);
}
.vid figcaption b { color: #fff; font-weight: 700; display: block; font-size: 14px; }

.foot {
  margin-top: 34px; padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, .14);
  font-size: 12.5px; line-height: 1.7; color: rgba(255, 255, 255, .45);
}
.foot a { color: rgba(255, 255, 255, .72); }

/* On anything wider than a phone the pages stay phone-shaped and centred.
   These are store creatives; showing them 1200px wide would be showing them
   at a size nobody sees them at. */
@media (min-width: 600px) {
  .band { max-width: 560px; margin: 0 auto; padding-left: 16px; padding-right: 16px; }
}