/* Apple-style palette + typography. Restraint over decoration:
 *   - Off-white ground, clean white cards, muted grey borders
 *   - Single blue accent, used only where it earns attention
 *   - Big-but-tight display type; body text in soft-black
 *   - No gradients on hero, no colored spine dots, no decorative emojis */
:root {
  --ink:      #1d1d1f;  /* soft-black, apple's primary text */
  --ink-2:    #6e6e73;  /* secondary text */
  --ink-3:    #86868b;  /* tertiary text */
  --bg:       #fbfbfd;  /* off-white ground */
  --card:     #ffffff;
  --hair:     #d2d2d7;  /* subtle border grey */
  --accent:   #0071e3;  /* apple blue */
  --accent-2: #0077ed;  /* hover */
  --gold:     #f5a623;  /* stars — the one place warmth stays */
}

* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0;
  background: var(--bg); color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display",
    "Helvetica Neue", "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ---------------- Hero ---------------- */
.hero {
  padding: 80px 24px 56px;
  text-align: center;
  background: var(--bg);      /* no gradient */
  color: var(--ink);
}
.hero h1 {
  margin: 0 0 12px;
  font-size: 56px; line-height: 1.05; letter-spacing: -0.02em; font-weight: 600;
}
.hero p {
  margin: 0 auto 32px; max-width: 620px;
  font-size: 19px; line-height: 1.5; color: var(--ink-2); font-weight: 400;
}

.hero-stats {
  display: flex; align-items: center; justify-content: center;
  gap: 20px; flex-wrap: wrap;
}
.stars-total {
  font-size: 15px; font-weight: 500; color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}
.stars-total::before { content: ""; }
.progress-track {
  width: 220px; max-width: 45vw; height: 4px;
  background: #e5e5e7; border-radius: 2px; overflow: hidden;
}
.progress-fill {
  height: 100%; width: 0%; background: var(--accent);
  transition: width .5s ease;
}
.continue-btn {
  padding: 10px 22px; border: none; border-radius: 980px;    /* apple pill */
  background: var(--accent); color: #fff;
  font: 500 15px -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif;
  cursor: pointer; letter-spacing: -0.01em;
}
.continue-btn:hover { background: var(--accent-2); }

/* ---------------- Badges (kept, restrained) ---------------- */
.badges {
  display: flex; gap: 8px; justify-content: center; flex-wrap: wrap;
  margin-top: 28px;
}
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px; border-radius: 100px;
  font-size: 12px; font-weight: 500; letter-spacing: -0.01em;
  border: 1px solid var(--hair); background: var(--card);
}
.badge.earned { color: var(--ink); border-color: var(--ink); }
.badge.locked { color: var(--ink-3); background: transparent; }
.badge.locked .badge-emoji { opacity: .4; }
.badge-emoji { font-size: 13px; }

/* ---------------- Quest map ---------------- */
.quest-map {
  max-width: 780px;
  margin: 40px auto 0; padding: 0 24px;
  position: relative;
}
.quest-map:before {
  content: ""; position: absolute;
  left: 40px; top: 20px; bottom: 20px;
  width: 1px; background: var(--hair);
}
.station {
  display: flex; align-items: stretch; gap: 20px;
  text-decoration: none; color: inherit;
  margin: 14px 0; position: relative;
}
.spine-dot {
  flex: 0 0 auto; width: 32px; height: 32px; margin-top: 22px;
  border-radius: 50%; background: var(--card);
  border: 1px solid var(--hair); color: var(--ink-2);
  display: flex; align-items: center; justify-content: center;
  font-weight: 500; font-size: 13px; z-index: 1;
  letter-spacing: -0.01em;
}
.spine-dot.done { background: var(--ink); color: #fff; border-color: var(--ink); }

.station-card {
  flex: 1; display: flex; align-items: center; gap: 18px;
  background: var(--card); border: 1px solid var(--hair);
  border-radius: 14px; padding: 22px 24px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.station:hover .station-card {
  border-color: var(--ink-3);
  box-shadow: 0 4px 14px rgba(0,0,0,.04);
}

.st-emoji { font-size: 22px; opacity: .85; }   /* kept small — a hint, not a mascot */
.st-body { flex: 1; }
.st-name {
  font-size: 19px; font-weight: 600; letter-spacing: -0.01em; color: var(--ink);
  margin-bottom: 2px;
}
.st-blurb {
  font-size: 14px; color: var(--ink-2); line-height: 1.4;
  margin: 0 0 10px;
}
.st-go {
  font-size: 14px; font-weight: 500; color: var(--accent);
  white-space: nowrap; letter-spacing: -0.01em;
}

/* Disabled = coming soon. Dim + suppress hover + swap CTA colour. */
.station.disabled .station-card { opacity: 0.5; }
.station.disabled:hover .station-card { border-color: var(--hair); box-shadow: none; }
.station.disabled .st-go { color: var(--ink-3); font-weight: 400; }
.station.disabled .spine-dot { opacity: 0.7; }

/* ---------------- Stars ---------------- */
/* Kept "legacy" per-point star helpers for challenge overlays elsewhere. */
.star-row { display: inline-flex; gap: 2px; }
.star { color: #d2d2d7; font-size: 14px; }
.star.on { color: var(--gold); }

.star-row-frac { display: inline-flex; gap: 5px; align-items: center; }
.star-frac {
  position: relative; display: inline-block;
  width: 15px; height: 15px; line-height: 15px;
  font-size: 15px; text-align: center;
}
.star-frac-outline { color: #d2d2d7; }
.star-frac-fill {
  position: absolute; top: 0; left: 0; height: 100%; width: var(--fill, 0%);
  color: var(--gold); overflow: hidden; white-space: nowrap;
}
.star-frac.empty .star-frac-fill { display: none; }
.star-frac.full  .star-frac-outline { color: var(--gold); }

.sandbox-tag {
  font-size: 10px; color: var(--ink-3);
  border: 1px solid var(--hair); background: transparent;
  padding: 2px 8px; border-radius: 100px;
  text-transform: uppercase; letter-spacing: 0.06em; font-weight: 500;
  margin-left: 8px;
}

/* ---------------- Footer / reset ---------------- */
.reset-row { text-align: center; margin: 40px 0 12px; }
.reset-btn {
  background: none; border: none; color: var(--ink-3);
  font-size: 12px; cursor: pointer; letter-spacing: -0.01em;
}
.reset-btn:hover { color: var(--ink); }
.foot {
  text-align: center; padding: 24px 20px 40px;
  font-size: 12px; color: var(--ink-3);
}
.foot a { color: var(--ink-2); text-decoration: none; }
.foot a:hover { color: var(--ink); }

/* ---------------- Responsive ---------------- */
@media (max-width: 640px) {
  .hero { padding: 48px 20px 36px; }
  .hero h1 { font-size: 38px; }
  .hero p { font-size: 16px; }
  .quest-map { padding: 0 16px; margin-top: 24px; }
  .quest-map:before { left: 32px; }
  .spine-dot { width: 28px; height: 28px; margin-top: 18px; font-size: 12px; }
  .station-card { padding: 18px; gap: 14px; }
  .st-name { font-size: 17px; }
  .st-emoji { font-size: 20px; }
}