/* SF Twin — shared brand theme.
   "Find Your SF Twin" Dolores Park identity: LIGHT MODE, English-garden
   pinks + greens + cream, Victorian-floral x glitch-wave. NO PURPLE, NO DARK.
   Loaded by index.html, game.html, wer.html. Tokens mirror the survey app,
   brightened. */

@font-face { font-family:'CMU Serif'; src:url('/static/cmunrm.woff') format('woff'); font-weight:400; }
@font-face { font-family:'CMU Serif'; src:url('/static/cmunbx.woff') format('woff'); font-weight:700; }
@font-face { font-family:'CMU Serif'; src:url('/static/cmunti.woff') format('woff'); font-style:italic; }

:root{
  /* backgrounds — cream on cream */
  --cream:#faf6ec; --cream2:#f3ecdb; --cream3:#fdfcf6;
  /* ink + muted text */
  --ink:#23392b; --ink2:#34493a; --muted:#6e8a5e; --muted2:#8a8271;
  /* sage / celadon greens */
  --celadon:#a8c3a0; --celadon-deep:#7fa377; --sage:#55714b; --sage-deep:#2e4a36;
  /* blossom pink — bright */
  --pink:#e6a6b0; --pink-deep:#d67f8e; --pink-hot:#e2648a; --rose:#b0526d;
  /* gold accent + hairlines */
  --gold:#c99c4d; --line:#d8cfba; --line2:rgba(43,64,50,.4);
}

*{ -webkit-tap-highlight-color:transparent; }

/* base page — cream, garden ink, CMU serif */
.theme-body{
  margin:0; background:var(--cream); color:var(--ink);
  font-family:'CMU Serif',Georgia,serif;
}

/* ---- kicker / headings ---- */
.kicker{ letter-spacing:.3em; text-indent:.3em; font-size:12px; text-transform:uppercase;
  color:var(--sage); }
.kicker b{ color:var(--rose); font-weight:400; }

/* ---- buttons ---- */
.btn{ font-family:inherit; font-size:18px; border:none; cursor:pointer; border-radius:999px;
  padding:15px 34px; background:var(--sage); color:#f6f2e6;
  box-shadow:0 6px 18px rgba(46,74,54,.28);
  transition:transform .12s ease, box-shadow .12s ease, filter .12s ease; }
.btn:hover{ filter:brightness(1.05); }
.btn:active{ transform:translateY(1px) scale(.99); }
.btn:disabled{ opacity:.5; cursor:not-allowed; box-shadow:none; }

/* the big blossom-pink CTA */
.btn.pink{ background:linear-gradient(180deg, var(--pink-hot), var(--pink-deep));
  color:#fff; box-shadow:0 8px 24px rgba(226,100,138,.4); }

/* full-width unmissable "tap to begin" CTA */
.cta-big{ display:block; width:100%; font-family:inherit; font-weight:700;
  font-size:21px; letter-spacing:.02em; border:none; cursor:pointer; border-radius:18px;
  padding:20px 24px; color:#fff;
  background:linear-gradient(180deg, var(--pink-hot), var(--pink-deep));
  box-shadow:0 10px 28px rgba(226,100,138,.45), inset 0 1px 0 rgba(255,255,255,.35);
  transition:transform .12s ease, box-shadow .12s ease, filter .12s ease; }
.cta-big:hover{ filter:brightness(1.05); }
.cta-big:active{ transform:translateY(1px) scale(.995); }
.cta-big:disabled{ opacity:.5; cursor:not-allowed; box-shadow:none; }

/* ---- form fields ---- */
.field input[type=text], .field input[type=email]{
  width:100%; font-family:inherit; color:var(--ink);
  background:var(--cream3); border:1px solid var(--line); border-radius:12px; }
.field input:focus{ outline:none; border-color:var(--rose);
  box-shadow:0 0 0 2px rgba(176,82,109,.14); }

/* ---- gentle CSS floral / glitch accents (non-shader pages) ---- */
/* a light petal-glitch hairline used above cards / headers */
.floral-rule{ height:2px; border:0; margin:0 auto;
  background:repeating-linear-gradient(90deg,
    var(--pink) 0 12px, transparent 12px 16px,
    var(--celadon) 16px 26px, transparent 26px 30px);
  opacity:.55; }