/* Pixel Munch website: same candy palette as the game. */

/* Fredoka is served from this site, not Google Fonts, so a visit sends nothing to a third party. */
@font-face {
  font-family: "Fredoka";
  font-weight: 500;
  font-display: swap;
  src: url(fonts/fredoka-latin-ext-500-normal.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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Fredoka";
  font-weight: 500;
  font-display: swap;
  src: url(fonts/fredoka-latin-500-normal.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;
}
@font-face {
  font-family: "Fredoka";
  font-weight: 600;
  font-display: swap;
  src: url(fonts/fredoka-latin-ext-600-normal.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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Fredoka";
  font-weight: 600;
  font-display: swap;
  src: url(fonts/fredoka-latin-600-normal.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;
}
@font-face {
  font-family: "Fredoka";
  font-weight: 700;
  font-display: swap;
  src: url(fonts/fredoka-latin-ext-700-normal.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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Fredoka";
  font-weight: 700;
  font-display: swap;
  src: url(fonts/fredoka-latin-700-normal.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 {
  --bg-top: #3d2b74;
  --bg-bottom: #1c1338;
  --paper: #fff8ee;
  --ink: #3a2d5c;
  --muted: #6d6190;
  --accent: #ff5d73;
  --accent-2: #7c4dff;
  --green: #2fb344;
  --font: "Fredoka", ui-rounded, "SF Pro Rounded", system-ui, sans-serif;
  color-scheme: dark;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font);
  color: #fff;
  background:
    radial-gradient(rgba(255, 255, 255, 0.05) 1.2px, transparent 1.3px) 0 0 / 22px 22px,
    linear-gradient(180deg, var(--bg-top), var(--bg-bottom) 70%) no-repeat,
    var(--bg-bottom);
  padding: 0 16px;
}

main {
  max-width: 920px;
  margin: 0 auto;
  padding-block: 48px 64px;
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 14px;
}

.hero img {
  width: 128px;
  height: 128px;
  border-radius: 30px;
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.35);
}

h1 {
  margin: 0;
  font-size: clamp(40px, 8vw, 64px);
  font-weight: 700;
  line-height: 1;
  text-shadow: 0 3px 0 var(--accent), 0 6px 0 var(--accent-2);
  text-wrap: balance;
}

.tagline {
  margin: 6px 0 0;
  font-size: 21px;
  max-width: 34ch;
  text-wrap: balance;
}

/* Download buttons. Their links are in links.js. */
.store-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 8px;
}

.store-button {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 180px;
  padding: 9px 22px 11px;
  border-radius: 14px;
  background: #0d0820;
  border: 1.5px solid rgba(255, 255, 255, 0.35);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.3);
  color: #fff;
  line-height: 1.15;
  text-decoration: none;
  transition: transform 0.12s ease, border-color 0.12s ease;
}

.store-button small { font-size: 12.5px; font-weight: 500; opacity: 0.85; }

.store-button b { font-size: 22px; font-weight: 700; }

.store-button:hover { transform: translateY(-2px); border-color: #fff; }

.store-button:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }

/* /download page: one centred screen. */
main.download { min-height: 100vh; justify-content: center; }

.intro {
  margin: 0;
  max-width: 44ch;
  font-size: 17px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.85);
  text-wrap: pretty;
}

.note { margin: 4px 0 0; font-size: 14px; color: rgba(255, 255, 255, 0.65); }

.shots {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.shots img {
  width: 100%;
  max-width: 100%;
  border-radius: 18px;
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.35);
}

.card {
  background: var(--paper);
  color: var(--ink);
  border-radius: 24px;
  padding: 24px clamp(18px, 4vw, 34px);
  line-height: 1.55;
  font-size: 17px;
}

.card h2 {
  margin: 0 0 8px;
  font-size: 26px;
}

.card h3 {
  margin: 20px 0 6px;
  font-size: 19px;
}

.card p, .card li { max-width: 68ch; }

.card a { color: var(--accent-2); font-weight: 600; overflow-wrap: anywhere; }

.how {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px;
  padding: 0;
  margin: 12px 0 0;
  list-style: none;
}

.how li {
  background: #f3e8ff;
  border-radius: 16px;
  padding: 12px 14px;
}

.how b { display: block; color: var(--accent); }

/* Legal pages */
.updated { color: var(--muted); font-style: italic; }

.toc {
  background: #f3e8ff;
  border-radius: 16px;
  padding: 12px 14px 12px 36px;
  margin: 16px 0 4px;
}

.toc li { margin: 2px 0; }

.who {
  background: #f3e8ff;
  border-radius: 16px;
  padding: 12px 16px;
  margin: 12px 0;
}

.who p { margin: 2px 0; }

.card h3[id] { scroll-margin-top: 16px; }

.card h4 { margin: 14px 0 4px; font-size: 17px; }

footer {
  text-align: center;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.7);
}

footer a { color: #fff; }

footer .legal { font-size: 12.5px; line-height: 1.5; color: rgba(255, 255, 255, 0.55); }

.email {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  background: #f3e8ff;
  padding: 2px 8px;
  border-radius: 8px;
  user-select: all;
}

@media (max-width: 560px) {
  .shots { grid-template-columns: 1fr 1fr; }
  .shots img:last-child { display: none; }
}