/* Squarical's page: the game's 16-bit title world on top, its sketchbook board below.
   Colors are the game's own (GamePalette.swift and the title menu). */

:root {
  color-scheme: light;

  --sky: #1676fe;
  --window: #3048b0;
  --window-band: #283c9c;
  --window-line: #a8b0d8;
  --pixel-ink: #181428;
  --white: #f8f8f8;

  --paper: #f6f1e7;
  --ink: #33261f;
  --ink-soft: #5c4d44;
  --grid: rgb(64 95 219 / 0.09);

  --blue: #405fdb;   --blue-light: #b8c4f5;   --blue-shade: #2a3394;
  --red: #e64545;    --red-light: #fab8b3;    --red-shade: #a31f2b;
  --green: #4da64a;  --green-light: #b8e0a8;  --green-shade: #216b33;
  --yellow: #fabd29; --yellow-light: #ffe699; --yellow-shade: #de8014;

  /* Points per art pixel for the logo; the subtitle and the crew scale with it. */
  --px: 4px;
  --sub: 2px;
  --crew: 3px;
  --friend: 4px;
  --hero-h: clamp(640px, 100svh, 940px);

  --pixel-font: "Silkscreen", ui-monospace, monospace;
  --hand-font: "Patrick Hand", "Noteworthy", "Comic Sans MS", cursive;
}

@media (min-width: 420px) { :root { --px: 5px; --sub: 3px; } }
@media (min-width: 640px) { :root { --px: 7px; --sub: 4px; --crew: 4px; --friend: 5px; } }
@media (min-width: 1000px) { :root { --px: 9px; --sub: 5px; --crew: 5px; --friend: 6px; } }

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

html { background: var(--paper); }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--hand-font);
  font-size: 1.375rem;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { display: block; max-width: 100%; height: auto; }

.logo, .subtitle, .crew img, .friends img, .cheer-row img, .meadow, .bushes {
  image-rendering: pixelated;
}

ul { list-style: none; margin: 0; padding: 0; }

/* ---------- The title world ---------- */

.hero {
  position: relative;
  height: var(--hero-h);
  overflow: hidden;
  background: var(--sky);
  isolation: isolate;
}

.meadow {
  position: absolute;
  inset: 0;
  background: url("/squarical/img/meadow.webp") repeat-x 50% 100% / auto 100%;
  z-index: -2;
}

/* The bushes stand in front of the crew's path, as in the game's intro. */
.bushes {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: calc(var(--hero-h) * 0.105);
  background: url("/squarical/img/bushes.webp") repeat-x 50% 0 / auto 100%;
  z-index: -1;
}

.crew {
  position: absolute;
  left: 50%;
  bottom: calc(var(--hero-h) * 0.085);
  transform: translateX(-50%);
  display: flex;
  gap: calc(var(--crew) * 4);
}

@media (min-width: 640px) { .crew { gap: calc(var(--crew) * 6); } }

.crew li {
  position: relative;
  width: calc(28 * var(--crew));
  height: calc(31 * var(--crew));
}

.crew img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.crew .cheer { opacity: 0; }

/* The page's one moment: the crew hop in turn and cheer, as they do when a level starts. */
@media (prefers-reduced-motion: no-preference) {
  .crew li { animation: hop 0.62s steps(6, end) both; animation-delay: calc(0.5s + var(--i) * 0.14s); }
  .crew li:nth-child(1) { --i: 0; }
  .crew li:nth-child(2) { --i: 1; }
  .crew li:nth-child(3) { --i: 2; }
  .crew li:nth-child(4) { --i: 3; }
  .crew .cheer { animation: cheer 0.62s step-end forwards; animation-delay: inherit; }
  .crew .stand { animation: stand 0.62s step-end forwards; animation-delay: inherit; }
}

@keyframes hop {
  0%, 100% { transform: translateY(0); }
  45% { transform: translateY(calc(var(--crew) * -12)); }
}
@keyframes cheer { 0% { opacity: 1; } 100% { opacity: 0; } }
@keyframes stand { 0% { opacity: 0; } 100% { opacity: 1; } }

.title {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: clamp(40px, 9svh, 104px) 16px 0;
  text-align: center;
}

.title h1 { margin: 0; line-height: 0; }

.logo {
  width: calc(72 * var(--px));
  height: calc(11 * var(--px));
  max-width: none;
}

.subtitle {
  width: calc(121 * var(--sub));
  height: calc(9 * var(--sub));
  max-width: none;
  margin-top: calc(var(--px) * 2.5);
}

/* The title menu's window: an ink rim, a white frame, a lavender inner line and a blue fill. */
.window {
  max-width: 34rem;
  margin-top: clamp(24px, 4.5svh, 44px);
  padding: 18px 22px 16px;
  background:
    linear-gradient(var(--window) 0 50%, var(--window-band) 50% 100%);
  border: 4px solid var(--white);
  box-shadow: 0 0 0 4px var(--pixel-ink), inset 0 0 0 3px var(--window-line), 0 8px 0 4px rgb(24 20 40 / 0.35);
  color: var(--white);
  font-family: var(--pixel-font);
  font-size: 0.9375rem;
  line-height: 1.6;
  text-align: left;
  text-shadow: 2px 2px 0 var(--pixel-ink);
}

.window p { margin: 0; }

@media (max-width: 419px) { .window { padding: 16px 16px 14px; font-size: 0.8125rem; } }
@media (min-width: 640px) { .window { font-size: 1.0625rem; } }

.window .soon {
  margin-top: 0.9em;
  color: var(--yellow-light);
}

.window .soon span { display: inline-block; margin-right: 0.35em; color: var(--yellow); }

@media (prefers-reduced-motion: no-preference) {
  .window .soon span { animation: blink 1.1s steps(2, jump-none) infinite; }
}

@keyframes blink { 50% { opacity: 0; } }

/* ---------- Where the title world meets the board: a gate of each color ---------- */

.gates {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  height: 14px;
  background: var(--paper);
}

.gates span { background: var(--c); }
.gates span:nth-child(1) { --c: repeating-linear-gradient(115deg, var(--blue) 0 5px, var(--blue-light) 5px 6px, var(--blue) 6px 10px, var(--blue-shade) 10px 11px); }
.gates span:nth-child(2) { --c: repeating-linear-gradient(115deg, var(--red) 0 5px, var(--red-light) 5px 6px, var(--red) 6px 10px, var(--red-shade) 10px 11px); }
.gates span:nth-child(3) { --c: repeating-linear-gradient(115deg, var(--green) 0 5px, var(--green-light) 5px 6px, var(--green) 6px 10px, var(--green-shade) 10px 11px); }
.gates span:nth-child(4) { --c: repeating-linear-gradient(115deg, var(--yellow) 0 5px, var(--yellow-light) 5px 6px, var(--yellow) 6px 10px, var(--yellow-shade) 10px 11px); }

/* ---------- The board ---------- */

.paper {
  background:
    linear-gradient(90deg, var(--grid) 1px, transparent 1px) 0 0 / 56px 56px,
    linear-gradient(var(--grid) 1px, transparent 1px) 0 0 / 56px 56px,
    var(--paper);
  padding: clamp(56px, 9vw, 120px) 16px clamp(48px, 8vw, 96px);
}

.paper > section {
  max-width: 1080px;
  margin: 0 auto;
}

.paper > section + section { margin-top: clamp(88px, 12vw, 160px); }

h2, h3 {
  font-family: var(--hand-font);
  font-weight: 400;
  line-height: 1.05;
  margin: 0;
  text-wrap: balance;
}

h2 {
  font-size: clamp(2.5rem, 1.6rem + 3.6vw, 4.25rem);
  letter-spacing: -0.01em;
}

/* A crayon stroke in the section's color, like the board's gates. */
.copy h2::after, .closing h2::after {
  content: "";
  display: block;
  width: 3.2em;
  height: 0.22em;
  margin-top: 0.18em;
  border-radius: 0.11em;
  background: repeating-linear-gradient(115deg, var(--tone) 0 5px, var(--tone-light) 5px 6px, var(--tone) 6px 10px, var(--tone-shade) 10px 11px);
  transform: rotate(-1.2deg);
}

.copy p, .closing p {
  max-width: 34em;
  margin: 1em 0 0;
  color: var(--ink-soft);
}

.copy h2 + p { margin-top: 0.9em; }

.feature {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
  align-items: center;
  justify-items: center;
}

.feature .copy { justify-self: stretch; }

@media (min-width: 820px) {
  .feature { grid-template-columns: minmax(0, 1fr) auto; gap: 72px; }
  .feature.flip .copy { order: 2; }
}

/* A phone, as if laid on the page. */
.phone {
  margin: 0;
  width: min(300px, 78vw);
  padding: 9px;
  border-radius: 46px;
  background: #1f1b26;
  box-shadow: 0 0 0 2px #3a3442 inset, 10px 14px 0 rgb(51 38 31 / 0.1);
}

.phone img {
  width: 100%;
  border-radius: 37px;
}

.tilt-right { transform: rotate(2deg); }
.tilt-left { transform: rotate(-2deg); }

/* Three worlds, fanned out like cards. */
.worlds .copy { max-width: 40rem; }

.fan {
  display: flex;
  justify-content: center;
  margin-top: 56px;
  padding-bottom: 8px;
}

.fan .phone {
  width: min(260px, 36vw);
  padding: clamp(5px, 1vw, 8px);
  border-radius: clamp(24px, 5vw, 40px);
}

.fan .phone img { border-radius: clamp(19px, 4.1vw, 32px); }

.fan .phone:nth-child(1) { transform: rotate(-5deg) translateY(18px); margin-right: -3%; }
.fan .phone:nth-child(2) { position: relative; z-index: 1; }
.fan .phone:nth-child(3) { transform: rotate(5deg) translateY(18px); margin-left: -3%; }

.fan figcaption {
  margin-top: 12px;
  font-size: clamp(1rem, 0.8rem + 1vw, 1.375rem);
  text-align: center;
  color: var(--ink-soft);
  /* The caption sits under the phone, on the paper. */
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
}

.fan .phone { position: relative; }

/* ---------- The cast ---------- */

.cast .copy { max-width: 40rem; }

.friends {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 36px 16px;
  margin-top: 48px;
  text-align: center;
}

@media (min-width: 720px) { .friends { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.friends li { color: var(--ink-soft); line-height: 1.2; }

.friends img {
  width: calc(28 * var(--friend));
  height: calc(31 * var(--friend));
  margin: 0 auto 12px;
}

.friends strong, .foes strong {
  display: block;
  font-weight: 400;
  font-size: 1.6em;
  line-height: 1.1;
  color: var(--ink);
}

h3 {
  margin-top: clamp(72px, 9vw, 112px);
  font-size: clamp(2rem, 1.5rem + 2vw, 3rem);
}

.foes {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  margin-top: 32px;
}

@media (min-width: 720px) { .foes { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.foes li {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 16px;
  align-items: center;
  color: var(--ink-soft);
  line-height: 1.25;
}

.foes p { margin: 0; }

@media (min-width: 720px) {
  .foes li { grid-template-columns: 1fr; align-content: start; justify-items: center; text-align: center; }
}

.foes img {
  width: 96px;
  height: 96px;
  object-fit: contain;
}

@media (min-width: 720px) { .foes img { width: 140px; height: 140px; margin-bottom: 4px; } }

/* ---------- The close ---------- */

.closing {
  --tone: var(--blue); --tone-light: var(--blue-light); --tone-shade: var(--blue-shade);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.closing h2::after { margin-left: auto; margin-right: auto; }

.closing p { margin-left: auto; margin-right: auto; }

.closing .window { margin-top: 40px; }
.closing .window .soon { margin-top: 0; }

.cheer-row {
  display: flex;
  gap: calc(var(--crew) * 5);
  margin-top: 40px;
}

.cheer-row img {
  width: calc(28 * var(--crew));
  height: calc(31 * var(--crew));
}

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

.footer {
  padding: 28px 16px 40px;
  border-top: 2px dashed rgb(51 38 31 / 0.18);
  background: var(--paper);
  text-align: center;
  color: var(--ink-soft);
}

.footer p { margin: 0; }

a {
  color: var(--blue-shade);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

a:hover { color: var(--blue); }

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

/* ---------- The privacy policy ---------- */

.sky-band {
  display: flex;
  justify-content: center;
  align-items: center;
  height: clamp(132px, 22vw, 200px);
  background: url("/squarical/img/meadow.webp") repeat-x 50% 38% / auto 640px var(--sky);
  image-rendering: pixelated;
}

.home-link { display: block; line-height: 0; }

.home-link .logo {
  width: calc(72 * var(--sub));
  height: calc(11 * var(--sub));
}

.home-link:focus-visible { outline-color: var(--white); outline-offset: 6px; }

.policy article {
  max-width: 40rem;
  margin: 0 auto;
}

.policy h1 {
  margin: 0;
  font-family: var(--hand-font);
  font-weight: 400;
  font-size: clamp(2.75rem, 1.8rem + 4vw, 4.5rem);
  line-height: 1;
}

.policy .updated {
  margin: 0.5em 0 0;
  font-family: var(--pixel-font);
  font-size: 0.8125rem;
  color: var(--ink-soft);
}

/* The short answer, on a note card like the game's. */
.policy .summary {
  margin: 1.6em 0 1.4em;
  padding: 18px 22px;
  background: #fffdf8;
  border: 2px solid var(--ink);
  border-radius: 6px 10px 7px 9px;
  box-shadow: 4px 5px 0 rgb(51 38 31 / 0.12);
  font-size: 1.5rem;
  line-height: 1.35;
  color: var(--ink);
  transform: rotate(-0.6deg);
}

.policy h2 {
  margin-top: 1.6em;
  font-size: clamp(1.875rem, 1.5rem + 1.4vw, 2.5rem);
}

.policy p, .policy li { color: var(--ink-soft); }

.policy p { margin: 0.7em 0 0; }

.policy ul { margin-top: 0.7em; }

.policy li {
  position: relative;
  padding-left: 1.4em;
}

.policy li + li { margin-top: 0.3em; }

/* Bullets are little squares in the crew's colors. */
.policy li::before {
  content: "";
  position: absolute;
  left: 0.15em;
  top: 0.55em;
  width: 0.5em;
  height: 0.5em;
  border-radius: 2px;
  background: var(--blue);
  box-shadow: inset 0 0 0 1.5px rgb(0 0 0 / 0.2);
}

.policy li:nth-child(4n + 2)::before { background: var(--red); }
.policy li:nth-child(4n + 3)::before { background: var(--green); }
.policy li:nth-child(4n + 4)::before { background: var(--yellow); }

.footer .footer-links { margin-top: 0.4em; }