/* ============================================================
   Teatr Umysłu — design tokens
   Dark, one restrained accent (platinum blue), slow motion.
   ============================================================ */
:root {
  --bg: #0B0B0D;
  --surface: #16161A;
  --surface-2: #1E1E24;
  --ink: #EDE8E0;
  --muted: #8A8580;
  --accent: #8FB0C4;          /* pale platinum blue — the signature */
  --accent-strong: #B9D2E0;
  --accent-glow: rgba(143, 176, 196, 0.22);
  --accent-faint: rgba(143, 176, 196, 0.10);
  --line: rgba(237, 232, 224, 0.10);

  --serif: "Fraunces", ui-serif, "Iowan Old Style", "Palatino", Georgia, serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;

  /* iPhone 13 safe-area insets, with sane minimums */
  --pad-top: max(env(safe-area-inset-top), 12px);
  --pad-bottom: max(env(safe-area-inset-bottom), 16px);
  --pad-left: max(env(safe-area-inset-left), 22px);
  --pad-right: max(env(safe-area-inset-right), 22px);

  --ease: cubic-bezier(0.4, 0.0, 0.2, 1);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body {
  margin: 0; padding: 0;
  height: 100%;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  overscroll-behavior: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body {
  position: fixed; inset: 0;           /* lock the viewport; no rubber-band scroll */
  overflow: hidden;
  user-select: none; -webkit-user-select: none;
}
button { font-family: inherit; }

/* ---------- The Ember: ambient recurring orb ---------- */
#ambient {
  position: fixed; inset: 0;
  z-index: 0; pointer-events: none;
  display: grid; place-items: center;
  overflow: hidden;
}
.ember {
  width: 62vmin; height: 62vmin;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%,
      var(--accent-glow) 0%,
      rgba(143,176,196,0.05) 42%,
      transparent 70%);
  filter: blur(6px);
  opacity: 0.5;
  transform: translateY(6vh);
  animation: ember-drift 14s var(--ease) infinite;
}
@keyframes ember-drift {
  0%,100% { opacity: 0.38; transform: translateY(6vh) scale(1); }
  50%     { opacity: 0.60; transform: translateY(2vh) scale(1.06); }
}

/* ---------- App / screen scaffold ---------- */
#app { position: relative; z-index: 1; height: 100%; }
.screen {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  padding: calc(var(--pad-top) + 8px) var(--pad-right) calc(var(--pad-bottom) + 8px) var(--pad-left);
  animation: screen-in 0.6s var(--ease) both;
}
@keyframes screen-in { from { opacity: 0; } to { opacity: 1; } }
.screen.leaving { animation: screen-out 0.4s var(--ease) both; }
@keyframes screen-out { to { opacity: 0; } }

.grow { flex: 1 1 auto; }
.center-col { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
/* stages hold absolutely-positioned art — they must span the full width,
   otherwise align-items:center on the parent collapses them */
.breath-stage, .scene-stage, .vb-stage, .power-stage { width: 100%; align-self: stretch; }

/* ---------- Typography ---------- */
.eyebrow {
  font-family: var(--sans);
  font-size: 12px; letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--muted); font-weight: 500;
}
.display {
  font-family: var(--serif);
  font-weight: 340;
  line-height: 1.24;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.hint { color: var(--muted); font-size: 14px; line-height: 1.5; max-width: 30ch; }

/* ---------- Buttons ---------- */
.btn {
  appearance: none; border: 0; cursor: pointer;
  min-height: 56px; min-width: 44px;
  padding: 0 26px;
  border-radius: 16px;
  font-size: 17px; font-weight: 500; letter-spacing: 0.01em;
  color: var(--bg);
  background: var(--accent);
  transition: transform 0.25s var(--ease), background 0.25s var(--ease), opacity 0.25s var(--ease);
  width: 100%;
}
.btn:active { transform: scale(0.98); background: var(--accent-strong); }
.btn.ghost {
  background: transparent; color: var(--ink);
  border: 1px solid var(--line);
}
.btn.ghost:active { background: var(--surface); }
.btn.subtle {
  background: transparent; color: var(--accent);
  border: 1px solid var(--accent-faint);
  min-height: 52px; font-size: 16px;
}
.btn.subtle:active { background: var(--accent-faint); }
.btn.text {
  background: transparent; color: var(--muted);
  min-height: 44px; font-size: 15px; font-weight: 400;
  width: auto; padding: 0 12px;
}
.btn:disabled { opacity: 0.4; }

/* Thumb zone: primary actions live in the bottom third */
.actions {
  display: flex; flex-direction: column; gap: 12px;
  width: 100%;
  margin-top: auto;              /* pin to bottom of the flex column */
}
.actions .btn { width: 100%; }

/* Top bar with a restrained back/exit affordance */
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  min-height: 44px; margin-bottom: 8px;
}
.exit {
  appearance: none; background: transparent; border: 0; cursor: pointer;
  color: var(--muted); font-size: 22px; line-height: 1;
  width: 44px; height: 44px; display: grid; place-items: center;
  border-radius: 12px;
}
.exit:active { background: var(--surface); }

/* ============================================================
   HOME
   ============================================================ */
.home-head { margin-top: 6px; }
.home-title { font-family: var(--serif); font-size: 30px; font-weight: 340; letter-spacing: -0.01em; }
.home-countdown { margin-top: 10px; color: var(--muted); font-size: 15px; line-height: 1.5; }
.home-countdown b { color: var(--accent); font-weight: 500; }

.stats {
  display: grid; grid-template-columns: 1fr 1fr 1fr;
  gap: 10px; margin-top: 30px;
}
.stat {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 16px 12px;
  text-align: center;
}
.stat .num { font-family: var(--serif); font-size: 34px; font-weight: 440; line-height: 1; color: var(--ink); }
.stat .lbl { margin-top: 8px; font-size: 11px; letter-spacing: 0.06em; color: var(--muted); text-transform: uppercase; }
.stat.hero .num { color: var(--accent); }

.plan-reminder {
  margin-top: 22px;
  background: var(--accent-faint);
  border: 1px solid var(--accent-faint);
  border-radius: 16px;
  padding: 16px 18px;
  display: flex; gap: 12px; align-items: flex-start;
}
.plan-reminder .txt { font-size: 14px; line-height: 1.5; color: var(--ink); }
.plan-reminder .txt em { color: var(--accent); font-style: normal; }
.plan-reminder .dismiss {
  margin-left: auto; background: transparent; border: 0; color: var(--muted);
  width: 32px; height: 32px; font-size: 18px; cursor: pointer; flex: none;
}

/* ============================================================
   SCENT (step 1)
   ============================================================ */
.scent .glyph {
  width: 64px; height: 64px; margin-bottom: 26px;
  color: var(--accent);
}
.scent .display { font-size: 27px; max-width: 15ch; }

/* ============================================================
   BREATH (step 2)
   ============================================================ */
.breath-stage { position: relative; display: grid; place-items: center; }
.breath-orb {
  width: 46vmin; height: 46vmin; border-radius: 50%;
  background: radial-gradient(circle at 50% 45%, var(--accent-glow), transparent 68%);
  border: 1px solid rgba(143,176,196,0.35);
  box-shadow: 0 0 60px var(--accent-glow);
  display: grid; place-items: center;
  transform: scale(0.72);
}
.breath-orb.run { animation: breathe 8s ease-in-out infinite; }
@keyframes breathe {
  0%   { transform: scale(0.72); box-shadow: 0 0 30px var(--accent-faint); }
  50%  { transform: scale(1.0);  box-shadow: 0 0 80px var(--accent-glow); }
  100% { transform: scale(0.72); box-shadow: 0 0 30px var(--accent-faint); }
}
.breath-word {
  font-family: var(--serif); font-size: 22px; color: var(--accent-strong);
  letter-spacing: 0.02em; opacity: 0.9;
}
.breath-count { margin-top: 30px; color: var(--muted); font-size: 14px; letter-spacing: 0.1em; }

/* ============================================================
   SCENE (step 3)
   ============================================================ */
.scene-stage {
  display: flex; align-items: center; justify-content: center;
  padding: 0 6px;
}
.scene-line {
  font-family: var(--serif); font-weight: 340;
  font-size: 28px; line-height: 1.35; letter-spacing: -0.01em;
  text-align: center; color: var(--ink);
  max-width: 18ch;
  opacity: 0;
}
.scene-line.show { animation: line-fade 4.6s var(--ease) forwards; }
@keyframes line-fade {
  0%   { opacity: 0; transform: translateY(6px); }
  16%  { opacity: 1; transform: translateY(0); }
  82%  { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(-4px); }
}
.scene-progress {
  position: absolute; left: var(--pad-left); right: var(--pad-right);
  bottom: calc(var(--pad-bottom) + 6px);
  height: 2px; background: var(--line); border-radius: 2px; overflow: hidden;
}
.scene-progress > i { display: block; height: 100%; width: 0; background: var(--accent); }

/* ============================================================
   VOICE (step 4)
   ============================================================ */
.voice { }
.voice-scroll {
  flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: 8px 2px 12px; mask-image: linear-gradient(to bottom, transparent, #000 6%, #000 94%, transparent);
}
.manifesto {
  font-family: var(--serif); font-weight: 340;
  font-size: 22px; line-height: 1.5; letter-spacing: -0.005em;
  color: var(--ink); text-align: center;
}
.manifesto p { margin: 0 0 1.1em; }
.manifesto .final { color: var(--accent-strong); }
.pace-bar {
  height: 3px; background: var(--line); border-radius: 3px; overflow: hidden;
  margin: 4px 0 14px;
}
.pace-bar > i { display: block; height: 100%; width: 0; background: var(--accent);
  animation: pace 70s linear forwards; }
@keyframes pace { to { width: 100%; } }
.rec-row { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.rec-btn {
  appearance: none; border: 1px solid var(--line); background: var(--surface);
  color: var(--ink); border-radius: 14px; min-height: 48px; padding: 0 18px;
  display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-size: 15px;
}
.rec-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--accent); }
.rec-btn.recording .rec-dot { animation: rec-pulse 1.1s ease-in-out infinite; background: #d9705f; }
@keyframes rec-pulse { 50% { opacity: 0.3; } }

/* ============================================================
   VISION BOARD (step 5)
   ============================================================ */
.vb-stage { position: relative; display: grid; place-items: center; }
.vb-frame {
  position: absolute; inset: 0; display: grid; place-items: center;
  opacity: 0; transition: opacity 1.1s var(--ease);
  padding: 8px;
}
.vb-frame.show { opacity: 1; }
.vb-frame svg { width: min(72vw, 320px); height: auto; }
/* real-photo panels — contained (never cropped), seamless on the dark bg */
.vb-frame img.vb-img {
  max-width: min(82vw, 400px);
  max-height: 82%;
  width: auto; height: auto;
  object-fit: contain;
  border-radius: 22px;
  display: block;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.55);
}
.vb-caption {
  position: absolute; left: 0; right: 0; bottom: calc(var(--pad-bottom) + 4px);
  text-align: center; color: var(--muted); font-size: 13px; letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* dashboard + static-ad cards live inside SVG-sized boxes */
.card {
  width: min(76vw, 330px);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 22px; padding: 22px;
}
.card .row { display: flex; justify-content: space-between; align-items: baseline; margin-top: 14px; }
.card .k { color: var(--muted); font-size: 13px; }
.card .v { font-family: var(--serif); color: var(--ink); font-size: 20px; font-weight: 440; }
.card .roas { font-family: var(--serif); font-size: 56px; font-weight: 440; color: var(--accent); line-height: 1; }
.card .roas small { font-size: 22px; color: var(--muted); }

/* True One static-ad mockup */
.ad {
  width: min(72vw, 300px); aspect-ratio: 4/5;
  background: linear-gradient(160deg, #14171b, #0d0f12);
  border: 1px solid var(--line); border-radius: 18px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 20px; position: relative; overflow: hidden;
}
.ad .brand { position: absolute; top: 16px; letter-spacing: 0.36em; font-size: 11px; color: var(--accent); }
.ad .headline { font-family: var(--serif); font-size: 22px; color: var(--ink); text-align: center; max-width: 16ch; line-height: 1.3; }
.ad .cta { border: 1px solid var(--accent); color: var(--accent); border-radius: 999px; padding: 8px 20px; font-size: 12px; letter-spacing: 0.14em; }

/* ============================================================
   CLOSE
   ============================================================ */
.close .display { font-size: 27px; max-width: 16ch; }
.close .streak-note { color: var(--muted); margin-top: 18px; font-size: 15px; }

/* ============================================================
   TRYB MOCY (Power Mode) — same brand, higher energy
   ============================================================ */
.power { }
.power .eyebrow { color: var(--accent-strong); }
.power-intro .display { font-size: 26px; max-width: 16ch; }
.power-stage { position: relative; display: grid; place-items: center; }
.power-orb {
  position: absolute; width: 60vmin; height: 60vmin; border-radius: 50%;
  background: radial-gradient(circle, var(--accent-glow), transparent 65%);
  opacity: 0.5;
}
.power-orb.pulse { animation: power-pulse 0.9s var(--ease) infinite; }
@keyframes power-pulse { 0%,100% { transform: scale(0.9); opacity: 0.35; } 50% { transform: scale(1.12); opacity: 0.7; } }
.power-line {
  position: relative; z-index: 1;
  font-family: var(--serif); font-weight: 560;
  font-size: 34px; line-height: 1.2; text-align: center;
  color: var(--accent-strong); max-width: 14ch; letter-spacing: -0.01em;
}
.power-line.hit { animation: power-hit 0.35s var(--ease); }
@keyframes power-hit { 0% { transform: scale(1.14); } 60% { transform: scale(0.97); } 100% { transform: scale(1); } }
.power-reps { margin-top: 34px; display: flex; gap: 12px; justify-content: center; }
.rep-pip { width: 12px; height: 12px; border-radius: 50%; border: 1.5px solid var(--accent); opacity: 0.4; transition: all 0.25s var(--ease); }
.rep-pip.on { background: var(--accent); opacity: 1; transform: scale(1.25); box-shadow: 0 0 16px var(--accent-glow); }
.power-hint { margin-top: 22px; color: var(--muted); font-size: 14px; letter-spacing: 0.02em; }
.power-count-note { color: var(--muted); font-size: 13px; }

/* ============================================================
   ONBOARDING (first launch) — if-then plan
   ============================================================ */
.onb .display { font-size: 26px; max-width: 18ch; }
.onb textarea {
  width: 100%; min-height: 130px; resize: none;
  background: var(--surface); border: 1px solid var(--line); border-radius: 16px;
  color: var(--ink); font-family: var(--sans); font-size: 16px; line-height: 1.5;
  padding: 16px; margin-top: 20px;
}
.onb textarea:focus { outline: none; border-color: var(--accent); }
.onb .example { color: var(--muted); font-size: 13px; margin-top: 12px; line-height: 1.5; font-style: italic; }

/* ============================================================
   Motion-reduction: hold still, no drift/scale
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .ember, .breath-orb.run, .power-orb.pulse, .pace-bar > i { animation: none !important; }
  .scene-line.show { animation: none; opacity: 1; }
  .screen, .screen.leaving { animation-duration: 0.01ms; }
  .breath-orb { transform: scale(0.88); }
  * { transition-duration: 0.01ms !important; }
}