/* Goldie! — the website, in the game's own paint.
 *
 * Every value here traces to scripts/Palette.gd (class Pal) and
 * docs/DESIGN_SYSTEM.md. The rules that matter:
 *   - shadows are HARD offsets, never blurs (Pal.darker / Pal.SHADOW)
 *   - text is INK brown on light, WHITE #fffdf7 (never pure) on color
 *   - buttons are pills with a visible 3D lip that compresses when pressed
 *   - colors come from the palette; nothing is respelled inline
 */

:root {
  /* Sky + field (Pal.BG_TOP/BOTTOM, FIELD_TOP/BOTTOM) */
  --bg-top: #ffd66b;
  --bg-bottom: #ffb443;
  --field-top: #fdf6e3;
  --field-bottom: #ffeecb;

  /* Ink & neutrals */
  --ink: #8a4b00;
  --ink-soft: #b3763a;
  --white: #fffdf7;          /* never pure white */
  --shadow: rgba(0, 0, 0, 0.12);

  /* Gold — the coin */
  --gold: #f5a201;
  --gold-light: #ffe89a;
  --gold-outline: #c97a00;

  /* CTA green (face / rim / shadow) */
  --green: #66c742;
  --green-rim: #3a9228;
  --green-shadow: #2a6b1a;

  /* Candy ramp — accents, cool to hot */
  --candy-sky: #59b8e8;
  --candy-pink: #ff8ab5;
  --candy-purple: #8a6cf0;
  --candy-coral: #ff7a5c;

  /* Cream secondary button (Pal.CREAM_FACE / CREAM_RIM) */
  --cream-face: #fff7db;
  --cream-rim: #e0ccae;

  --radius-card: 28px;
  --radius-pill: 999px;
  --lip: 6px;                /* the hard offset every card shadow uses */

  --font: "Fredoka", "Baloo 2", ui-rounded, "Arial Rounded MT Bold",
          "Hiragino Maru Gothic ProN", system-ui, sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { color-scheme: light; }

body {
  font-family: var(--font);
  color: var(--ink);
  /* The menu sky: vertical gradient + the polka-dot motif (Draw.polka:
   * spacing 74, dot 5 in design units — scaled for the page). */
  background:
    radial-gradient(circle 3px at 18px 22px, rgba(201, 122, 0, 0.10) 98%, transparent) 0 0 / 56px 56px,
    linear-gradient(180deg, var(--bg-top), var(--bg-bottom));
  background-color: var(--bg-bottom);
  min-height: 100vh;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

/* ---------------------------------------------------------------- header */

.top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  max-width: 1020px;
  margin: 0 auto;
  padding: 22px 24px 0;
}

.wordmark {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: var(--ink);
  font-weight: 600;
  font-size: 1.7rem;
  letter-spacing: 0.01em;
}
.wordmark svg { width: 44px; height: 44px; display: block; }

nav.pills {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
/* PillButton, faithfully: a FACE over a DARKER LIP over a HARD SHADOW, and
 * never an outline — the game draws no borders anywhere. Pressing slides the
 * face down onto its lip, exactly the 3D press the app's buttons do. */
nav.pills a {
  text-decoration: none;
  color: var(--ink);
  font-weight: 600;
  font-size: 0.95rem;
  background: var(--white);
  border-radius: var(--radius-pill);
  padding: 9px 20px;
  box-shadow: 0 4px 0 var(--cream-rim), 0 8px 0 var(--shadow);
  transition: transform 80ms ease, box-shadow 80ms ease;
}
nav.pills a:hover { transform: translateY(-1px); }
nav.pills a:active {
  transform: translateY(3px);
  box-shadow: 0 1px 0 var(--cream-rim), 0 4px 0 var(--shadow);
}
nav.pills a[aria-current="page"] {
  background: var(--gold-light);
  box-shadow: 0 4px 0 var(--gold-outline), 0 8px 0 var(--shadow);
}
@media (max-width: 640px) {
  /* Not enough room beside the wordmark: one centred row of pills below it,
   * never a column down the side. */
  .top { flex-direction: column; align-items: center; gap: 14px; }
  nav.pills { justify-content: center; }
}

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

.hero {
  max-width: 1020px;
  margin: 0 auto;
  padding: 56px 24px 40px;
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 40px;
  align-items: center;
}
@media (max-width: 760px) {
  .hero { grid-template-columns: 1fr; text-align: center; padding-top: 36px; }
  .hero .mascot { order: -1; margin: 0 auto; }
}

.hero h1 {
  font-size: clamp(2.6rem, 7vw, 4.2rem);
  font-weight: 700;
  line-height: 1.05;
  /* The title wears the coin's own paint: WHITE face, gold-outline edge —
   * the outlined_text idiom from Draw. */
  color: var(--white);
  text-shadow:
    0 4px 0 var(--gold-outline),
    -2px 0 0 var(--gold-outline), 2px 0 0 var(--gold-outline),
    0 -2px 0 var(--gold-outline), 0 2px 0 var(--gold-outline);
  margin-bottom: 14px;
}
.hero .tagline {
  font-size: clamp(1.15rem, 2.6vw, 1.45rem);
  font-weight: 500;
  margin-bottom: 30px;
}
.hero .tagline .beat { white-space: nowrap; }

.mascot { width: min(320px, 70vw); }
.mascot svg { width: 100%; height: auto; display: block; }
@media (prefers-reduced-motion: no-preference) {
  /* MascotView's idle breath: a slow, small scale on the whole coin. */
  .mascot svg { animation: breathe 3.2s ease-in-out infinite; transform-origin: 50% 55%; }
  @keyframes breathe {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.035); }
  }
}

/* --------------------------------------------------------------- buttons */

/* PillButton: chunky pill, 3D lip, hard offset shadow. The face sits on a
 * darker rim; pressing slides the face down onto it (LIP 13 → 5px here). */
.pill {
  display: inline-block;
  text-decoration: none;
  font-weight: 700;
  border-radius: var(--radius-pill);
  padding: 18px 42px;
  font-size: 1.2rem;
  transition: transform 70ms ease, box-shadow 70ms ease;
  text-align: center;
}
.pill.cta {
  color: var(--white);
  background: var(--green);
  box-shadow: 0 6px 0 var(--green-rim), 0 13px 0 var(--shadow);
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.16);
}
.pill.cta:hover { transform: translateY(-1px); }
.pill.cta:active {
  transform: translateY(4px);
  box-shadow: 0 1px 0 var(--green-rim), 0 4px 0 var(--shadow);
}
/* Not a link yet ("Coming soon"): it must not out-shout the real buttons.
 * The locked-state grays are Pal.LOCK_GRAY / LOCK_GRAY_DK. */
.pill.cta[aria-disabled="true"] {
  background: #b9bec9;
  box-shadow: 0 6px 0 #9096a6, 0 13px 0 var(--shadow);
  cursor: default;
  transform: none;
  text-shadow: none;
}

/* The Goldie component (goldie.js) mounts into these. */
[data-goldie] { display: inline-block; line-height: 0; }
[data-goldie] svg { width: 100%; height: 100%; display: block; }
.wordmark [data-goldie] { width: 44px; height: 44px; }
.hero-goldie { width: 100%; height: auto; aspect-ratio: 1; display: block; }
.pill.cream {
  color: var(--ink);
  background: var(--white);
  box-shadow: 0 5px 0 var(--cream-rim), 0 11px 0 var(--shadow);
  font-weight: 600;
  font-size: 1.02rem;
  padding: 15px 32px;
}
.pill.cream:active {
  transform: translateY(4px);
  box-shadow: 0 1px 0 var(--cream-rim), 0 5px 0 var(--shadow);
}

.cta-row { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
@media (max-width: 760px) { .cta-row { justify-content: center; } }

.cta-note { font-size: 0.85rem; color: var(--ink-soft); margin-top: 12px; }

/* ----------------------------------------------------------------- cards */

.features {
  max-width: 1020px;
  margin: 0 auto;
  padding: 24px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
}

.card {
  background: var(--white);
  border-radius: var(--radius-card);
  padding: 26px 24px 24px;
  box-shadow: 0 var(--lip) 0 var(--shadow);
}
.card .chip {
  width: 52px;
  height: 52px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  margin-bottom: 14px;
}
.card .chip svg { width: 30px; height: 30px; }
.card h3 { font-size: 1.15rem; font-weight: 600; margin-bottom: 6px; }
.card p { font-size: 0.95rem; color: var(--ink-soft); }

/* Each chip wears one candy color, face-on-rim like everything else. */
.chip.sky    { background: var(--candy-sky);    box-shadow: 0 4px 0 #3f92bd; }
.chip.pink   { background: var(--candy-pink);   box-shadow: 0 4px 0 #d66490; }
.chip.purple { background: var(--candy-purple); box-shadow: 0 4px 0 #6a4fc4; }
.chip.coral  { background: var(--candy-coral);  box-shadow: 0 4px 0 #d55a40; }
.chip.gold   { background: var(--gold);         box-shadow: 0 4px 0 var(--gold-outline); }

/* ----------------------------------------------------------------- paper */

/* Legal and support pages read on the FIELD cream, like the playfield:
 * one big sheet of paper on the sunny sky. */
.paper {
  max-width: 760px;
  margin: 36px auto 48px;
  padding: 44px clamp(24px, 6vw, 56px) 52px;
  background: linear-gradient(180deg, var(--field-top), var(--field-bottom));
  border-radius: var(--radius-card);
  box-shadow: 0 var(--lip) 0 var(--shadow);
}
.paper h1 { font-size: 2rem; font-weight: 700; margin-bottom: 4px; }
.paper .updated { color: var(--ink-soft); font-size: 0.9rem; margin-bottom: 28px; }
.paper h2 {
  font-size: 1.3rem;
  font-weight: 600;
  margin: 34px 0 10px;
  padding-top: 8px;
}
.paper p, .paper li { font-size: 1rem; margin-bottom: 10px; }
.paper ul { padding-left: 22px; margin-bottom: 12px; }
.paper li { margin-bottom: 6px; }
.paper a { color: var(--gold-outline); font-weight: 500; }
.paper strong { font-weight: 600; }

/* The "say the number" callout — a fact the reader can plan around. */
.paper .plain {
  background: var(--gold-light);
  border-radius: 16px;
  padding: 14px 18px;
  box-shadow: 0 4px 0 var(--shadow);
  margin: 14px 0;
}

/* ---------------------------------------------------------------- footer */

footer {
  max-width: 1020px;
  margin: 0 auto;
  padding: 28px 24px 44px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  align-items: center;
  justify-content: center;
  color: var(--ink);
  font-size: 0.9rem;
}
footer a { color: var(--ink); font-weight: 500; }

/* ------------------------------------------------------------ reset page */

.reset-card {
  max-width: 440px;
  margin: 56px auto;
  background: var(--white);
  border-radius: var(--radius-card);
  padding: 40px 34px;
  box-shadow: 0 var(--lip) 0 var(--shadow);
  text-align: center;
}
.reset-card .mascot { width: 120px; margin: 0 auto 18px; }
.reset-card h1 { font-size: 1.6rem; font-weight: 700; margin-bottom: 10px; }
.reset-card p { color: var(--ink-soft); font-size: 0.98rem; }

/* The new-password form: one borderless field over a rule, the ticket idiom
 * the app's account screen draws — not a boxed input. */
.reset-card form { margin-top: 26px; text-align: left; }
.pw-row {
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: 4px solid var(--cream-rim);
  padding-bottom: 8px;
  margin-bottom: 18px;
}
.pw-row:focus-within { border-color: var(--gold); }
.pw-row input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  font-family: var(--font);
  font-size: 1.1rem;
  color: var(--ink);
  padding: 8px 2px;
}
.pw-row input::placeholder { color: var(--ink-soft); opacity: 0.55; }
.pw-row button {
  border: 0;
  background: none;
  font-family: var(--font);
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--candy-coral);
  cursor: pointer;
  padding: 8px;
}
.form-error { color: #e2574b; font-size: 0.92rem; margin-bottom: 14px; }
.reset-card .pill.cta { width: 100%; }
.reset-card .pill.cta[aria-disabled="true"] { opacity: 0.75; pointer-events: none; }