/*
 * naily — the shared look.
 *
 * A salon palette: warm blush, one hot pink that does the pointing, one lilac
 * that supports it. Everything is round, because nothing in a nail salon has a
 * sharp corner and neither should a game for a four-year-old.
 *
 * There are no webfonts here on purpose. The front page tells parents that the
 * game loads nothing from anyone else, and a font request to a CDN would make
 * that untrue for the sake of nicer letterforms.
 */
:root {
  --ink: #3f2436;
  --muted: #8a6d7e;
  --bg: #fff7f4;
  --bg-tint: #ffe9f1;
  --surface: #ffffff;
  --line: #f2dce4;
  --accent: #e0568a;
  --accent-ink: #ffffff;
  --lilac: #7c5cd6;
  --mint: #3fbf9e;
  --radius: 22px;
  --radius-lg: 30px;
  --shadow: 0 12px 30px -14px rgba(94, 33, 63, 0.4);
  --shadow-soft: 0 4px 14px -8px rgba(94, 33, 63, 0.5);
  --font: ui-rounded, "SF Pro Rounded", "Segoe UI Variable Display", "Nunito",
    system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100%;
  background: linear-gradient(170deg, var(--bg) 0%, var(--bg-tint) 100%);
  background-attachment: fixed;
  color: var(--ink);
  font: 17px/1.65 var(--font);
}

main { max-width: 760px; margin: 0 auto; padding: 40px 22px 72px; }

h1, h2, h3 { line-height: 1.15; letter-spacing: -0.02em; margin: 0 0 14px; }
h1 { font-size: clamp(34px, 6vw, 56px); }
h2 { font-size: clamp(24px, 3.6vw, 34px); }
h3 { font-size: 20px; }
p { margin: 0 0 16px; }

a { color: var(--accent); text-underline-offset: 3px; }

.lede { font-size: clamp(18px, 2.4vw, 22px); color: var(--muted); }

/* One button, two weights. Big enough for a small hand everywhere it appears. */
.button {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 56px;
  padding: 0 28px;
  border: 0;
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-ink);
  font: 600 18px/1 var(--font);
  text-decoration: none;
  cursor: pointer;
  box-shadow: var(--shadow);
  transition: transform 120ms ease, box-shadow 120ms ease;
}
.button:hover { transform: translateY(-2px); }
.button:active { transform: translateY(1px); }
.button--quiet {
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--shadow-soft);
}

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 26px;
  box-shadow: var(--shadow-soft);
}

:where(button, a, input, [tabindex]):focus-visible {
  outline: 3px solid var(--lilac);
  outline-offset: 3px;
}

/* The game page owns the whole viewport; the marketing pages do not. */
body.is-full { min-height: 100dvh; overflow: hidden; }
body.is-full main { max-width: none; margin: 0; padding: 0; height: 100dvh; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}