/* Syrious Squish pages.
 *
 * These break the site theme on purpose: the game has a finished identity and
 * the landing page is the URL the store listing points at, so it should look
 * like the thing you are about to install, not like the studio that made it.
 *
 * The palette is copied verbatim from the game's own design source,
 * syrious_squish/design/07-little-monsters.html lines 10-35. Two rules come
 * with it and are not stylistic:
 *   - The six creature colors keep their order and their values. That set was
 *     searched for minimum pairwise deltaE under protanopia and deuteranopia;
 *     substituting one to "match the page better" undoes the search.
 *   - No gradients on pieces or panels. Flat fill, ink outline, one hard offset
 *     shadow. The bevel a gradient implies is what the outline exists to avoid.
 */

.theme-squish {
  --deep-1: #0E2A33;
  --deep-2: #134450;
  --deep-3: #1B6472;
  --shore: #2E8B96;
  --cream: #FFF6E9;
  --cream-2: #FFE9C9;
  --ink: #10262E;
  --ink-2: #3E5C66;
  --ink-3: #7E9AA3;
  --hot: #FF6B6B;
  --sun: #FFD93D;
  --sun-lo: #C79A00;

  /* Re-point the site tokens at the water, so shared chrome follows along
   * instead of needing a second set of rules. */
  --ground: #0A1E25;
  --surface: var(--deep-2);
  --surface-2: var(--deep-3);
  --line: #1B4A57;
  --line-bright: var(--shore);
  --text: var(--cream);
  --text-dim: #A9C6CE;
  /* Not --ink-3. In the game that tone is used against cream and against the
   * lighter water, never against the darkest ground; here it lands at 4.3:1 on
   * the page background, and the captions and notes it colors are body text. */
  --text-faint: #9CB9C2;
  --on-bright: var(--ink);

  background-image: radial-gradient(1100px 560px at 50% -8%, var(--deep-3), var(--ground) 68%);
  background-attachment: fixed;
}

/* The flat/outline/hard-shadow trio, as one reusable surface. */
.theme-squish .panel,
.theme-squish .promise li,
.theme-squish .shot,
.theme-squish .mode {
  background: var(--deep-2);
  border: 3px solid var(--ink);
  border-radius: 18px;
  box-shadow: 6px 6px 0 var(--ink);
}

.theme-squish .btn {
  border: 3px solid var(--ink);
  border-radius: 999px;
  box-shadow: 4px 4px 0 var(--ink);
  background: var(--deep-3);
  color: var(--cream);
}
.theme-squish .btn:hover { transform: translate(-2px, -2px); box-shadow: 7px 7px 0 var(--ink); }
.theme-squish .btn:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--ink); }

.theme-squish .btn--primary {
  background: var(--sun);
  color: var(--ink);
  box-shadow: 4px 4px 0 var(--ink);
}
.theme-squish .btn--primary:hover { box-shadow: 7px 7px 0 var(--ink); }

.theme-squish .chip-soon {
  border: 3px dashed var(--shore);
  border-radius: 999px;
  color: var(--text-dim);
}

.theme-squish .eyebrow { color: var(--sun); }
.theme-squish .promise h3 { color: var(--sun); }
.theme-squish .promise h3::before { background: var(--sun); box-shadow: none; }
.theme-squish .site-header { background: color-mix(in srgb, var(--ground) 88%, transparent); }
.theme-squish .site-footer { background: none; border-top: 3px solid var(--ink); }
.theme-squish :focus-visible { outline-color: var(--sun); }

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

.game-hero { padding-block: var(--sp-7) var(--sp-6); text-align: center; }

.game-hero__art {
  border: 3px solid var(--ink);
  border-radius: 22px;
  box-shadow: 8px 8px 0 var(--ink);
  overflow: hidden;
  max-width: 55rem;
  margin-inline: auto;
}

.game-hero__title { margin: 0; }

.game-hero__tagline {
  font-size: var(--step-3);
  font-weight: 800;
  font-stretch: 112%;
  color: var(--sun);
  margin-block-start: var(--sp-6);
  text-wrap: balance;
}

.game-hero__lede {
  max-width: 40rem;
  margin: var(--sp-5) auto 0;
  color: var(--text-dim);
  font-size: var(--step-1);
}

.game-hero .cta-row { justify-content: center; margin-block-start: var(--sp-6); }

/* Which call to action a visitor gets is decided by the media query, not by a
 * script: the browser build is desktop-only, so a phone must never be offered
 * it, and that has to hold with JavaScript off. */
.cta-web { display: none; }
@media (min-width: 60rem) {
  .cta-web { display: inline-flex; }
  .cta-stores-note { display: none; }

  /* Both entry points are real now, so the accent has to move with the width
   * rather than appear twice: Google Play carries the gold on a phone, the
   * browser build carries it here. Exactly one gold button at any width. */
  .theme-squish .cta-store.btn--primary {
    background: var(--deep-3);
    color: var(--cream);
  }
}
@media (max-width: 59.99rem) {
  .cta-web-note { display: none; }
}

.cta-note {
  width: 100%;
  text-align: center;
  color: var(--text-faint);
  font-size: var(--step--1);
  margin-block-start: var(--sp-2);
}

/* --------------------------------------------------------------- modes --- */

.modes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: var(--sp-5);
  list-style: none;
  margin: 0;
  padding: 0;
}

.mode { padding: var(--sp-5); }
.mode h3 { color: var(--sun); font-size: var(--step-1); margin-block-end: var(--sp-2); }
.mode p { color: var(--text-dim); font-size: var(--step--1); }

/* ------------------------------------------------------------- gallery --- */

/* A scroll-snapping row, which is the same component on every width — it just
 * runs out of overflow on a desktop. No script, no lightbox, no carousel. */
.gallery {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min(70vw, 17rem);
  gap: var(--sp-5);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-block-end: var(--sp-4);
  padding-inline: 3px;
  margin-inline: -3px;
  scrollbar-color: var(--shore) transparent;
  overscroll-behavior-x: contain;
  list-style: none;
  margin-block: 0;
}

.shot {
  scroll-snap-align: center;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.shot__art { border-block-end: 3px solid var(--ink); }
.shot figcaption {
  padding: var(--sp-4);
  color: var(--cream-2);
  font-size: var(--step--1);
  font-weight: 700;
  text-wrap: balance;
}

.gallery-hint {
  margin-block-start: var(--sp-3);
  color: var(--text-faint);
  font-size: var(--step--1);
}

/* -------------------------------------------------------------- colors --- */

.colors {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-5);
  list-style: none;
  margin: 0;
  padding: 0;
}

.colors li { text-align: center; font-size: var(--step--1); color: var(--text-dim); font-weight: 700; }

.colors span {
  display: block;
  width: 3.5rem;
  height: 3.5rem;
  margin-inline: auto;
  margin-block-end: var(--sp-2);
  border-radius: 50%;
  border: 3px solid var(--ink);
  box-shadow: 4px 4px 0 var(--ink);
  background: var(--swatch);
}

/* --------------------------------------------------------------- prose --- */

/* The shared .prose rules live in components.css; these are the two colours the
   water palette overrides. */
.theme-squish .prose strong { color: var(--cream); }
.theme-squish .prose q { color: var(--cream-2); font-style: italic; }