/* =========================================================
   Bloom Garden — website styles
   Colors pulled directly from the iOS app's asset catalog so
   the site reads as a natural extension of the game.
   ========================================================= */

:root {
  /* Core theme (from Color+Theme.swift / Assets.xcassets) */
  --garden-green:      #4CAF50; /* GardenGreen  — primary accent */
  --garden-green-deep: #3F8C42;
  --sunshine-yellow:   #FFC107; /* SunshineYellow — stars / highlights */
  --cream-bg:          #FFF8E1; /* CreamBackground */
  --earth-brown:       #3E2723; /* EarthBrown — primary text */
  --lavender-accent:   #9C27B0; /* LavenderAccent */
  --success-green:     #66C574; /* SuccessGreen */
  --error-red:         #F44336; /* ErrorRed */

  --mint-meadow:       #C8E6C9; /* MintMeadow — soft playfield */
  --fresh-grass:       #A5D6A7; /* FreshGrass */
  --spring-sky-mist:   #E3F2FD; /* SpringSkyMist */
  --leaf-mid:          #60A062;
  --leaf-deep:         #3B7A3F;
  --petal-pink:        #F8BBD0;
  --petal-lavender:    #D1C4E9;

  /* Semantic */
  --bg:                var(--cream-bg);
  --bg-soft:           #FFFDF4;
  --surface:           #FFFFFF;
  --text:              var(--earth-brown);
  --text-muted:        #6D4C41;
  --accent:            var(--garden-green);
  --accent-hover:      var(--garden-green-deep);
  --border:            rgba(62, 39, 35, 0.12);
  --shadow-sm:         0 2px 6px rgba(62, 39, 35, 0.08);
  --shadow-md:         0 8px 24px rgba(62, 39, 35, 0.12);
  --shadow-lg:         0 16px 48px rgba(62, 39, 35, 0.16);

  /* Gradient matching the in-game garden background */
  --garden-gradient: linear-gradient(
    180deg,
    var(--spring-sky-mist) 0%,
    var(--mint-meadow) 45%,
    var(--fresh-grass) 100%
  );

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-pill: 999px;

  --content-width: 1120px;
}

/* Dark mode mirrors the app's dusk-garden palette */
@media (prefers-color-scheme: dark) {
  :root {
    --cream-bg:        #1B2E1F;
    --bg:              #15221A;
    --bg-soft:         #1F3425;
    --surface:         #253F2C;
    --text:            #F5E0CC; /* EarthBrown dark */
    --text-muted:      #C4B39C;
    --earth-brown:     #F5E0CC;
    --mint-meadow:     #2E4A33;
    --fresh-grass:     #264838;
    --spring-sky-mist: #233033;
    --garden-green:    #419544;
    --accent:          #5FB862;
    --accent-hover:    #7ACB7C;
    --border:          rgba(245, 224, 204, 0.14);
    --shadow-sm:       0 2px 6px rgba(0, 0, 0, 0.3);
    --shadow-md:       0 8px 24px rgba(0, 0, 0, 0.35);
    --shadow-lg:       0 16px 48px rgba(0, 0, 0, 0.45);
  }
}

/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Rounded",
               "Avenir Next", "Segoe UI", system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  color: var(--text);
  background: var(--bg);
  background-image:
    radial-gradient(circle at 10% -10%, rgba(76, 175, 80, 0.10), transparent 50%),
    radial-gradient(circle at 110% 10%, rgba(255, 193, 7, 0.10), transparent 50%);
  background-attachment: fixed;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--accent); text-decoration: none; transition: color .2s ease; }
a:hover, a:focus { color: var(--accent-hover); text-decoration: underline; }

h1, h2, h3, h4 {
  font-family: "SF Pro Rounded", -apple-system, "Avenir Next Rounded",
               "Nunito", system-ui, sans-serif;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -0.01em;
  line-height: 1.2;
  margin: 0 0 .5em;
}
h1 { font-size: clamp(2.2rem, 5vw + 1rem, 3.6rem); }
h2 { font-size: clamp(1.6rem, 2.2vw + 1rem, 2.3rem); margin-top: 1.5em; }
h3 { font-size: 1.25rem; margin-top: 1.25em; }

p { margin: 0 0 1em; }

.container {
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 0 24px;
}

/* ---------- Site nav ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 248, 225, 0.85);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--border);
}
@media (prefers-color-scheme: dark) {
  .site-header { background: rgba(21, 34, 26, 0.85); }
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 24px;
  max-width: var(--content-width);
  margin: 0 auto;
}
.nav-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 800;
  font-size: 1.15rem;
  color: var(--text);
}
.nav-brand:hover { text-decoration: none; color: var(--text); }
.nav-brand img {
  width: 40px; height: 40px;
  border-radius: 10px;
  box-shadow: var(--shadow-sm);
}
.nav-links { display: flex; gap: 8px; align-items: center; list-style: none; margin: 0; padding: 0; }
.nav-links a {
  padding: 8px 14px;
  border-radius: var(--radius-pill);
  color: var(--text);
  font-weight: 600;
}
.nav-links a:hover, .nav-links a:focus {
  background: var(--mint-meadow);
  text-decoration: none;
}
.nav-links a.active { background: var(--garden-green); color: #fff; }

.nav-toggle {
  display: none;
  background: transparent;
  border: 0;
  font-size: 1.6rem;
  color: var(--text);
  cursor: pointer;
  padding: 6px 10px;
  border-radius: var(--radius-sm);
}
@media (max-width: 720px) {
  .nav-toggle { display: inline-flex; }
  .nav-links {
    position: absolute;
    top: 100%;
    right: 16px;
    left: 16px;
    flex-direction: column;
    gap: 4px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 10px;
    box-shadow: var(--shadow-md);
    display: none;
  }
  .nav-links.open { display: flex; }
  .nav-links a { padding: 10px 14px; }
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  padding: 64px 0 40px;
  background: var(--garden-gradient);
  overflow: hidden;
}
.hero::before,
.hero::after {
  content: "";
  position: absolute;
  width: 260px; height: 260px;
  border-radius: 50%;
  filter: blur(40px);
  opacity: 0.5;
  pointer-events: none;
}
.hero::before { background: var(--petal-pink);     top: -80px; left: -80px; }
.hero::after  { background: var(--petal-lavender); bottom: -100px; right: -80px; }

.hero-inner {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 56px;
  align-items: center;
  position: relative;
}
@media (max-width: 860px) {
  .hero-inner { grid-template-columns: 1fr; text-align: center; gap: 32px; }
}

.hero h1 { margin-bottom: 16px; }
.hero .tagline {
  font-size: 1.2rem;
  color: var(--text-muted);
  max-width: 40ch;
  margin-bottom: 28px;
}
@media (max-width: 860px) { .hero .tagline { margin-left: auto; margin-right: auto; } }

.hero-art {
  position: relative;
  aspect-ratio: 1 / 1;
  max-width: 420px;
  margin: 0 auto;
}
.hero-art img {
  position: absolute;
  border-radius: 24px;
  box-shadow: var(--shadow-lg);
  border: 6px solid rgba(255, 255, 255, 0.85);
}
.hero-art .art-main {
  inset: 0;
  transform: rotate(-3deg);
  z-index: 2;
}
.hero-art .art-side {
  width: 55%;
  right: -4%;
  bottom: -6%;
  transform: rotate(6deg);
  z-index: 1;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 24px;
  border-radius: var(--radius-pill);
  font-weight: 700;
  font-size: 1rem;
  border: 0;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .2s ease, background .2s ease;
  text-decoration: none;
}
.btn-primary {
  background: var(--garden-green);
  color: #fff;
  box-shadow: 0 6px 0 var(--garden-green-deep), var(--shadow-md);
}
.btn-primary:hover,
.btn-primary:focus {
  background: var(--garden-green-deep);
  color: #fff;
  text-decoration: none;
  transform: translateY(-1px);
}
.btn-primary:active { transform: translateY(2px); box-shadow: 0 2px 0 var(--garden-green-deep), var(--shadow-sm); }

.btn-secondary {
  background: var(--surface);
  color: var(--text);
  border: 2px solid var(--border);
}
.btn-secondary:hover,
.btn-secondary:focus {
  border-color: var(--garden-green);
  color: var(--text);
  text-decoration: none;
}

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

/* Official-style store badges */
.store-badge {
  display: inline-block;
  line-height: 0;
  border-radius: 10px;
  transition: transform .15s ease, box-shadow .2s ease;
  box-shadow: var(--shadow-sm);
}
.store-badge:hover,
.store-badge:focus {
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
  text-decoration: none;
}
.store-badge img, .store-badge svg { height: 54px; width: auto; display: block; }
@media (max-width: 520px) {
  .store-badge img, .store-badge svg { height: 46px; }
}

.store-badges {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 8px;
}
@media (max-width: 860px) { .store-badges { justify-content: center; } }

.store-badge-coming {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text-muted);
  font-size: 0.85rem;
  font-weight: 600;
  padding: 8px 14px;
  border-radius: var(--radius-pill);
  border: 1px dashed var(--border);
  background: transparent;
}

.coming-soon-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 193, 7, 0.18);
  border: 1px solid rgba(255, 193, 7, 0.45);
  color: var(--earth-brown);
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  font-size: 0.85rem;
  font-weight: 700;
  margin-bottom: 20px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
@media (prefers-color-scheme: dark) {
  .coming-soon-pill { color: var(--sunshine-yellow); }
}

/* ---------- Generic sections ---------- */
section { padding: 64px 0; }
.section-tight { padding: 40px 0; }

.section-title {
  text-align: center;
  margin: 0 auto 12px;
  max-width: 28ch;
}
.section-sub {
  text-align: center;
  color: var(--text-muted);
  max-width: 56ch;
  margin: 0 auto 40px;
}

/* ---------- Feature cards ---------- */
.features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
}
.feature {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 28px 24px;
  box-shadow: var(--shadow-sm);
  transition: transform .2s ease, box-shadow .2s ease;
}
.feature:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.feature-icon {
  width: 52px; height: 52px;
  border-radius: 14px;
  background: var(--mint-meadow);
  display: grid;
  place-items: center;
  font-size: 1.6rem;
  margin-bottom: 14px;
}
.feature h3 { margin-top: 0; }
.feature p { margin-bottom: 0; color: var(--text-muted); }

/* ---------- Screenshot strip ---------- */
.shots {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
@media (max-width: 860px) { .shots { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .shots { grid-template-columns: 1fr; } }
.shots img {
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  border: 4px solid #fff;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  background: var(--mint-meadow);
}

/* ---------- Prose (for privacy / support) ---------- */
.prose {
  max-width: 760px;
  margin: 0 auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 40px 44px;
  box-shadow: var(--shadow-sm);
}
.prose h1 { font-size: 2.2rem; }
.prose h2 { font-size: 1.4rem; border-bottom: 1px solid var(--border); padding-bottom: 6px; }
.prose ul { padding-left: 22px; }
.prose li { margin-bottom: 6px; }
.prose .meta {
  color: var(--text-muted);
  font-size: 0.92rem;
  margin-bottom: 24px;
}
@media (max-width: 520px) { .prose { padding: 28px 22px; } }

/* ---------- FAQ ---------- */
.faq details {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 4px 20px;
  margin-bottom: 10px;
  box-shadow: var(--shadow-sm);
}
.faq summary {
  cursor: pointer;
  font-weight: 700;
  padding: 16px 0;
  list-style: none;
  color: var(--text);
  position: relative;
  padding-right: 28px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.4rem;
  color: var(--accent);
  transition: transform .2s ease;
}
.faq details[open] summary::after { content: "−"; }
.faq details p {
  margin: 0 0 16px;
  color: var(--text-muted);
}

/* ---------- Contact card ---------- */
.contact-card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  max-width: 760px;
  margin: 0 auto 40px;
}
@media (max-width: 720px) { .contact-card { grid-template-columns: 1fr; } }

.contact-card .card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 28px;
  box-shadow: var(--shadow-sm);
}
.contact-card .card h3 { margin-top: 0; }
.contact-card a { font-weight: 700; word-break: break-all; }

/* ---------- Footer ---------- */
.site-footer {
  padding: 32px 16px 40px;
  border-top: 1px solid var(--border);
  color: var(--text-muted);
  font-size: 0.9rem;
  text-align: center;
  background: var(--bg-soft);
}
.site-footer a { color: var(--text-muted); }
.site-footer nav {
  display: flex;
  gap: 18px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

/* ---------- Utilities ---------- */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}