/* Cozy Flower Shop website: the game's own palette (cf_app/src/styles/tokens.css) and fonts. */

/* Fonts are served from this site, not Google Fonts, so a visit sends nothing to a third party (privacy.html §12). */
@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: "Nunito";
  font-weight: 400;
  font-display: swap;
  src: url(fonts/nunito-latin-ext-400-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: "Nunito";
  font-weight: 400;
  font-display: swap;
  src: url(fonts/nunito-latin-400-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: "Nunito";
  font-weight: 700;
  font-display: swap;
  src: url(fonts/nunito-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: "Nunito";
  font-weight: 700;
  font-display: swap;
  src: url(fonts/nunito-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 {
  --ground: #f6f4ee;
  --surface: #ffffff;
  --ink: #23302a;
  --ink-2: #3e4a43;
  --muted: #4a5650;
  --line: #e4e0d6;
  --rose: #b9475f;
  --rose-ink: #8e3349;
  --rose-soft: #f8e3e7;
  --rose-mist: #fbedef;
  --sage: #477657;
  --sage-ink: #2f5a3e;
  --sage-soft: #e3eee6;
  --gold-soft: #fbefd6;
  --lavender-soft: #e7e1f2;
  --font-title: "Fredoka", "Nunito", system-ui, sans-serif;
  --font-body: "Nunito", system-ui, sans-serif;
  color-scheme: light;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font-body);
  color: var(--ink-2);
  background:
    radial-gradient(circle at 12% 0%, var(--rose-mist) 0, transparent 38%),
    radial-gradient(circle at 92% 8%, var(--sage-soft) 0, transparent 34%),
    var(--ground);
  padding: 0 16px;
}

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

h1, h2, h3, h4 { font-family: var(--font-title); color: var(--ink); font-weight: 600; }

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

.hero img {
  width: 128px;
  height: 128px;
  border-radius: 29px;
  box-shadow: 0 12px 28px rgba(35, 48, 42, 0.18);
}

h1 {
  margin: 4px 0 0;
  font-size: clamp(38px, 8vw, 58px);
  line-height: 1.05;
  text-wrap: balance;
}

.tagline {
  margin: 0;
  font-size: 20px;
  max-width: 36ch;
  color: var(--ink-2);
  text-wrap: balance;
}

/* Download buttons. Their links are in links.js; without a link a button reads "Coming soon". */
.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;
  min-height: 44px;
  padding: 9px 22px 11px;
  border-radius: 14px;
  background: var(--ink);
  color: #fff;
  line-height: 1.15;
  text-decoration: none;
  box-shadow: 0 8px 18px rgba(35, 48, 42, 0.18);
  transition: transform 0.12s ease;
}

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

.store-button b { font-family: var(--font-title); font-size: 22px; font-weight: 600; }

a.store-button[href]:hover { transform: translateY(-2px); }

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

.store-button.soon { background: var(--surface); color: var(--muted); border: 1.5px dashed #c9c2b2; box-shadow: none; }

.note { margin: 2px 0 0; font-size: 14px; color: var(--muted); }

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

.intro {
  margin: 0;
  max-width: 46ch;
  font-size: 17px;
  line-height: 1.55;
  text-wrap: pretty;
}

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: 24px clamp(18px, 4vw, 34px);
  line-height: 1.6;
  font-size: 17px;
}

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

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

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

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

.card a { color: var(--rose-ink); font-weight: 700; overflow-wrap: anywhere; }

.card b { color: var(--ink); }

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

.how li { border-radius: 16px; padding: 12px 14px; background: var(--sage-soft); }

.how li:nth-child(3n + 2) { background: var(--rose-soft); }

.how li:nth-child(3n) { background: var(--gold-soft); }

.how b { display: block; font-family: var(--font-title); font-weight: 600; font-size: 18px; }

/* The promise: the card with the dark green of the game's Owner pass card. */
.promise { background: var(--sage-ink); border-color: var(--sage-ink); color: #fff; }

.promise h2, .promise b { color: #fff; }

.promise ul { margin: 8px 0 0; padding-left: 22px; }

.promise li { margin: 4px 0; }

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

.toc, .who { background: var(--ground); border-radius: 16px; }

.toc { padding: 12px 14px 12px 36px; margin: 16px 0 4px; }

.toc li { margin: 2px 0; }

.who { padding: 12px 16px; margin: 12px 0; }

.who p { margin: 2px 0; }

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

footer { text-align: center; font-size: 14px; color: var(--muted); }

footer a { color: var(--rose-ink); font-weight: 700; }

footer .legal { font-size: 12.5px; line-height: 1.5; }

@media (prefers-reduced-motion: reduce) {
  .store-button { transition: none; }
  a.store-button[href]:hover { transform: none; }
}