/* unsmoke — minimal landing + privacy. No build step. */

:root {
  --bg:         #f4f3ef;
  --text:       #111111;
  --text-dim:   #6b6b6b;
  --border:     #d8d6d0;

  /* Dark download page palette */
  --d-text:     #f3f4f7;
  --d-dim:      #9aa2b1;
  --d-border:   rgba(255, 255, 255, 0.10);

  --container:  1240px;
  --pad-x:      clamp(20px, 4vw, 56px);

  --f-mono:     ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --f-sans:     "Inter", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --f-display:  "VT323", ui-monospace, monospace; /* the app's font */
}

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

html, body { height: 100%; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--f-sans);
  font-feature-settings: "ss01", "cv11";
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Text selection — ::selection can't take a gradient (solid color only),
   so use an on-brand wallet color with near-black text. */
::selection      { background: #c768ff; color: #0b0d12; }
::-moz-selection { background: #c768ff; color: #0b0d12; }

/* =========================================================
   LANDING — centered dark download page
   ========================================================= */

body.landing {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  color: var(--d-text);
  /* Dark grayscale gradient with a subtle glow behind the cigarette. */
  background:
    radial-gradient(110% 70% at 50% 2%, #242424 0%, rgba(36, 36, 36, 0) 58%),
    linear-gradient(180deg, #151515 0%, #0c0c0c 55%, #050505 100%);
  background-attachment: fixed;
}

.hero {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 22px;
  padding: 48px var(--pad-x) 56px;
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
}

/* Logo — animated diagonal gradient clipped to the text, matching the
   app's wallet "MovingGradientText" (pink → purple → cyan → gold).
   Shared by the landing hero and the privacy-page header. */
.hero .brand,
.legal-header .brand {
  font-family: var(--f-display);
  line-height: 1;
  letter-spacing: 0.14em;
  text-transform: lowercase;
  background: linear-gradient(
    100deg,
    #ff6b9d 0%, #c768ff 25%, #68d9ff 50%, #ffd768 75%, #ff6b9d 100%
  );
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: brand-flow 7s linear infinite;
}
.hero .brand { font-size: clamp(34px, 8vw, 56px); margin-bottom: 10px; }
@keyframes brand-flow {
  to { background-position: 300% 50%; }
}
@media (prefers-reduced-motion: reduce) {
  .hero .brand,
  .legal-header .brand { animation: none; }
}

/* ---- Cigarette stage: small, rotating, up top ---- */
.cig-stage {
  position: relative;
  width: min(300px, 70vw);
  height: min(300px, 70vw);
}
#cig-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.slogan {
  font-family: var(--f-display);
  font-size: clamp(40px, 8vw, 68px);
  font-weight: 400;
  line-height: 1.0;
  letter-spacing: 0.01em;
  max-width: 18ch;
}

.lede {
  font-size: clamp(15px, 1.6vw, 17px);
  color: var(--d-dim);
  max-width: 42ch;
  line-height: 1.55;
}

/* ---- Play badge ---- */
.play-badge {
  margin-top: 8px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: #ffffff;
  color: #0b0d12;
  border: 1px solid #ffffff;
  padding: 14px 26px;
  border-radius: 999px;
  transition: transform .15s ease, box-shadow .15s ease;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35);
}
.play-badge:hover {
  text-decoration: none;
  transform: translateY(-2px);
  box-shadow: 0 12px 38px rgba(0, 0, 0, 0.45);
}
.play-badge svg { width: 22px; height: 22px; flex-shrink: 0; }
.play-badge svg path { fill: #0b0d12; }
.play-badge .pb-text { line-height: 1.1; text-align: left; display: flex; flex-direction: column; }
.play-badge .pb-small { font-size: 10px; color: #5a6170; text-transform: uppercase; letter-spacing: .8px; }
.play-badge .pb-big { font-family: var(--f-display); font-size: 22px; line-height: 1; color: #0b0d12; letter-spacing: 0.02em; }

/* ---- Footer ---- */
.site-footer {
  border-top: 1px solid var(--d-border);
  padding: 20px var(--pad-x);
  font-size: 13px;
  color: var(--d-dim);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  flex-wrap: wrap;
}
.site-footer a { color: var(--d-dim); }
.site-footer a:hover { color: var(--d-text); text-decoration: none; }
.site-footer .copyright { font-family: var(--f-mono); font-size: 12px; }

/* =========================================================
   PRIVACY PAGE
   ========================================================= */

body.legal-page {
  color: var(--d-text);
  background:
    radial-gradient(110% 60% at 50% 0%, #242424 0%, rgba(36, 36, 36, 0) 55%),
    linear-gradient(180deg, #151515 0%, #0a0a0a 60%, #050505 100%);
  background-attachment: fixed;
  min-height: 100vh;
}

.legal-header {
  border-bottom: 1px solid var(--d-border);
  padding: 16px 0;
}
.legal-header .wrap {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--pad-x);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.legal-header .brand { font-size: 30px; }
.legal-header .back { color: var(--d-dim); font-size: 13px; }
.legal-header .back:hover { color: var(--d-text); text-decoration: none; }

.legal {
  max-width: 720px;
  margin: 0 auto;
  padding: 56px var(--pad-x) 96px;
}
.legal h1 {
  font-family: var(--f-display);
  font-size: clamp(40px, 6vw, 58px);
  font-weight: 400;
  letter-spacing: 0.01em;
  margin-bottom: 8px;
}
.legal .updated {
  font-family: var(--f-mono);
  color: var(--d-dim);
  font-size: 12px;
  letter-spacing: 0.05em;
  margin-bottom: 40px;
  text-transform: uppercase;
}
.legal h2 {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.005em;
  margin: 36px 0 12px;
  padding-top: 28px;
  border-top: 1px solid var(--d-border);
}
.legal h2:first-of-type { border-top: none; padding-top: 0; margin-top: 0; }
.legal p, .legal li {
  color: var(--d-text);
  margin-bottom: 14px;
  font-size: 15px;
}
.legal ul { padding-left: 22px; }
.legal li { margin-bottom: 8px; }
.legal strong { font-weight: 600; color: #fff; }
.legal a { color: #d6b3ff; text-decoration: underline; text-underline-offset: 3px; }
.legal a:hover { color: #fff; }