/* ═══════════════════════════════════════════════════════════
   Breathe — Complete CSS Redesign
   Calm-app aesthetic · Plasma orb · Desktop + Mobile
   ═══════════════════════════════════════════════════════════ */

/* ── Reset ─────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }

body {
  font-family: 'Inter', 'Helvetica Neue', sans-serif;
  color: #dde2f0;
  background: #08091a;
  min-height: 100dvh;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  user-select: none;
  -webkit-user-select: none;
}

/* ── CSS Variables ──────────────────────────────────────── */
:root {
  /* Breath value 0–1, updated by JS */
  --b:  0;
  --b1: 0;
  --b2: 0;
  --b3: 0;

  /* Orb phase color (changed via .phase-* classes) */
  --orb-h: 230;
  --orb-s: 45%;
  --orb-l: 52%;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ── Animated Background ────────────────────────────────── */
.bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  background: #08091a;
  overflow: hidden;
}
.blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  will-change: transform;
  animation: blob-drift 16s ease-in-out infinite alternate;
}
.blob-a {
  width: 70vmax; height: 55vmax;
  background: radial-gradient(circle, hsla(195, 60%, 20%, 0.7) 0%, transparent 70%);
  top: -25%; left: -20%;
  animation-duration: 18s;
}
.blob-b {
  width: 55vmax; height: 45vmax;
  background: radial-gradient(circle, hsla(265, 50%, 18%, 0.7) 0%, transparent 70%);
  bottom: -15%; right: -15%;
  animation-direction: alternate-reverse;
  animation-duration: 22s;
}
.blob-c {
  width: 40vmax; height: 30vmax;
  background: radial-gradient(circle, hsla(225, 55%, 15%, 0.5) 0%, transparent 70%);
  top: 40%; left: 40%;
  animation-duration: 14s;
}
@keyframes blob-drift {
  from { transform: translate(0, 0) scale(1); }
  to   { transform: translate(4%, 6%) scale(1.12); }
}

/* ── Screens ─────────────────────────────────────────────── */
.screen {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: flex;
  flex-direction: column;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.55s ease, transform 0.55s var(--ease-out);
  transform: translateY(16px);
}
.screen.is-active {
  opacity: 1;
  pointer-events: all;
  transform: translateY(0);
}
.screen.is-leaving {
  opacity: 0;
  transform: translateY(-12px);
  pointer-events: none;
}

.scr-inner {
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: clamp(1.25rem, 5vw, 2rem);
  padding-top: max(env(safe-area-inset-top, 0px), clamp(1.25rem, 5vw, 2rem));
  padding-bottom: max(env(safe-area-inset-bottom, 0px), clamp(1.25rem, 5vw, 2rem));
}

/* ── Nav Back ────────────────────────────────────────────── */
.scr-header {
  flex-shrink: 0;
  margin-bottom: 1.5rem;
}
.nav-back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: hsla(220, 30%, 20%, 0.55);
  border: 1px solid hsla(220, 25%, 50%, 0.12);
  color: hsla(220, 15%, 70%, 1);
  cursor: pointer;
  text-decoration: none;
  transition: background 200ms ease, color 200ms ease;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.nav-back:hover { background: hsla(220, 30%, 28%, 0.7); color: #dde2f0; }

/* ═══════════════════════════════════════════════════════════
   SELECT SCREEN
   ═══════════════════════════════════════════════════════════ */
.select-inner { overflow-y: auto; gap: 1.5rem; }

.select-hero { flex-shrink: 0; }
.select-title {
  font-family: 'DM Sans', sans-serif;
  font-size: clamp(2.4rem, 9vw, 3.2rem);
  font-weight: 300;
  letter-spacing: -0.02em;
  line-height: 1;
  color: #eef0f8;
  margin-bottom: 0.6rem;
}
.select-sub {
  font-size: clamp(0.88rem, 2.5vw, 1rem);
  font-weight: 300;
  color: hsla(220, 15%, 60%, 1);
  line-height: 1.65;
}

/* ── Technique Cards ─────────────────────────────────────── */
.technique-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  flex: 1;
}

.tc {
  display: flex;
  align-items: flex-start;
  gap: 0.875rem;
  text-align: left;
  width: 100%;
  padding: 1.125rem 1.125rem 1.125rem 1.375rem;
  background: hsla(228, 32%, 11%, 0.65);
  border: 1px solid hsla(220, 25%, 35%, 0.12);
  border-radius: 16px;
  cursor: pointer;
  transition: background 220ms ease, border-color 220ms ease, transform 180ms ease;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  position: relative;
  overflow: hidden;
}
.tc::before {
  /* Left accent bar */
  content: '';
  position: absolute;
  left: 0; top: 18%; bottom: 18%;
  width: 3px;
  border-radius: 0 2px 2px 0;
  background: transparent;
  transition: background 220ms ease;
}
.tc:hover {
  background: hsla(228, 32%, 15%, 0.75);
  transform: translateY(-1px);
}
.tc[aria-checked="true"] {
  background: hsla(185, 60%, 14%, 0.55);
  border-color: hsla(185, 65%, 55%, 0.25);
}
.tc[aria-checked="true"]::before { background: hsl(185, 65%, 55%); }

.tc-body { flex: 1; min-width: 0; }
.tc-name {
  font-family: 'DM Sans', sans-serif;
  font-size: clamp(0.95rem, 2.5vw, 1.05rem);
  font-weight: 500;
  color: #dde2f0;
  margin-bottom: 0.2rem;
}
.tc-rhythm {
  font-size: 0.72rem;
  font-weight: 400;
  color: hsl(185, 65%, 58%);
  letter-spacing: 0.02em;
  margin-bottom: 0.35rem;
}
.tc-route {
  font-size: 0.74rem;
  font-weight: 400;
  color: hsla(220, 20%, 75%, 1);
  letter-spacing: 0.01em;
  margin-bottom: 0.55rem;
}
.tc-desc {
  font-size: 0.8rem;
  font-weight: 300;
  color: hsla(220, 15%, 55%, 1);
  line-height: 1.6;
}

.tc-check {
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 1.5px solid hsla(220, 20%, 40%, 0.4);
  flex-shrink: 0;
  margin-top: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 220ms ease;
}
.tc[aria-checked="true"] .tc-check {
  background: hsl(185, 65%, 55%);
  border-color: hsl(185, 65%, 55%);
}
.tc[aria-checked="true"] .tc-check::after {
  content: '';
  width: 5px; height: 9px;
  border-right: 2px solid hsl(230, 40%, 8%);
  border-bottom: 2px solid hsl(230, 40%, 8%);
  transform: rotate(40deg) translateY(-1px);
}

/* ── Select Footer ───────────────────────────────────────── */
.select-footer {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  padding-top: 0.5rem;
}

.begin-btn {
  font-family: 'DM Sans', sans-serif;
  font-size: 1.05rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: hsl(230, 40%, 8%);
  background: linear-gradient(135deg, hsl(185, 70%, 58%) 0%, hsl(260, 60%, 65%) 100%);
  border: none;
  border-radius: 50px;
  padding: 0.95rem 3rem;
  min-height: 54px;
  width: 100%;
  cursor: pointer;
  box-shadow: 0 0 40px hsla(185, 70%, 55%, 0.3), 0 4px 20px hsla(0,0%,0%,0.3);
  transition: transform 180ms var(--ease-bounce), box-shadow 180ms ease;
  will-change: transform;
}
.begin-btn:hover {
  transform: scale(1.02);
  box-shadow: 0 0 55px hsla(185, 70%, 55%, 0.45), 0 6px 25px hsla(0,0%,0%,0.35);
}
.begin-btn:active { transform: scale(0.97); }

.disclaimer {
  font-size: 0.68rem;
  color: hsla(220, 15%, 40%, 1);
  text-align: center;
  line-height: 1.5;
}

/* ═══════════════════════════════════════════════════════════
   PLAY SCREEN
   ═══════════════════════════════════════════════════════════ */
.play-inner { gap: 0; }

.play-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  margin-bottom: 0.75rem;
}
.header-spacer { width: 40px; }

/* Cycle progress dots */
.cycle-dots { display: flex; gap: 7px; align-items: center; }
.dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: hsla(220, 20%, 35%, 0.5);
  transition: all 400ms var(--ease-out);
  flex-shrink: 0;
}
.dot.done  { background: hsla(185, 60%, 55%, 0.65); }
.dot.active {
  background: hsl(185, 65%, 65%);
  width: 18px;
  border-radius: 3px;
  box-shadow: 0 0 8px hsla(185, 65%, 65%, 0.6);
}

/* Phase label + timer */
.phase-display {
  flex-shrink: 0;
  text-align: center;
  min-height: 124px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  overflow: visible;
}
.phase-label {
  font-family: 'DM Sans', sans-serif;
  font-size: clamp(0.75rem, 2.5vw, 0.9rem);
  font-weight: 400;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: hsla(220, 20%, 60%, 1);
  transition: opacity 300ms ease, color 1.5s ease;
  min-height: 1.2em;
}
.phase-timer {
  font-family: 'DM Sans', sans-serif;
  font-size: clamp(3rem, 11vw, 4.5rem);
  font-weight: 200;
  color: #eef0f8;
  letter-spacing: -0.04em;
  line-height: 1.1;
  transition: opacity 200ms ease;
  min-height: 1.1em;
  display: block;
}
.phase-route {
  font-family: 'Inter', sans-serif;
  font-size: clamp(0.68rem, 2.2vw, 0.78rem);
  font-weight: 300;
  color: hsla(220, 20%, 65%, 1);
  letter-spacing: 0.01em;
  min-height: 1.2em;
  transition: opacity 300ms ease;
}
.phase-label.fading,
.phase-timer.fading,
.phase-route.fading { opacity: 0; }

/* ── Orb Area ────────────────────────────────────────────── */
.orb-area {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.orb-stage {
  position: relative;
  width: clamp(200px, 58vmin, 310px);
  height: clamp(200px, 58vmin, 310px);
  display: flex;
  align-items: center;
  justify-content: center;
  /* Phase color drives ring currentColor */
  color: hsl(230, 45%, 52%);
  transition: color 2s ease;
}

/* Phase color classes */
.orb-stage.phase-inhale { color: hsl(185, 72%, 60%); }
.orb-stage.phase-hold   { color: hsl(215, 65%, 65%); }
.orb-stage.phase-exhale { color: hsl(265, 58%, 65%); }

/* ── Plasma Rings (outermost → innermost) ────────────────── */
.ring {
  position: absolute;
  border-radius: 50%;
  border-color: currentColor;
  border-style: solid;
  will-change: transform, opacity;
  pointer-events: none;
}

/* r4 — outermost, most delayed, most faint */
.r4 {
  inset: -65%;
  border-width: 0.5px;
  transform: scale(calc(1 + var(--b3) * 1.2));
  opacity: calc(0.04 + var(--b3) * 0.1);
}
/* r3 */
.r3 {
  inset: -42%;
  border-width: 0.75px;
  transform: scale(calc(1 + var(--b2) * 0.75));
  opacity: calc(0.1 + var(--b2) * 0.18);
}
/* r2 */
.r2 {
  inset: -25%;
  border-width: 1px;
  transform: scale(calc(1 + var(--b1) * 0.45));
  opacity: calc(0.22 + var(--b1) * 0.28);
}
/* r1 — innermost, tightest, most visible */
.r1 {
  inset: -11%;
  border-width: 1.5px;
  transform: scale(calc(1 + var(--b) * 0.22));
  opacity: calc(0.45 + var(--b) * 0.35);
}

/* ── Plasma Core ─────────────────────────────────────────── */
.orb-core {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  transform: scale(calc(0.88 + var(--b) * 0.14));
  will-change: transform;
  transition: background 2.2s ease, box-shadow 2.2s ease;
  /* Default (idle) */
  background: radial-gradient(circle at 40% 34%,
    hsla(0,0%,100%,0.4)  0%,
    hsl(220, 55%, 72%)   12%,
    hsl(230, 50%, 54%)   36%,
    hsl(240, 48%, 30%)   65%,
    hsl(235, 45%, 12%)   100%
  );
  box-shadow:
    0 0  30px 10px hsla(230, 50%, 55%, 0.45),
    0 0  80px 30px hsla(230, 50%, 55%, 0.18),
    0 0 170px 60px hsla(230, 50%, 55%, 0.07);
}

/* Specular sheen */
.orb-sheen {
  position: absolute;
  width: 38%; height: 28%;
  top: 14%; left: 20%;
  border-radius: 50%;
  background: radial-gradient(circle, hsla(0,0%,100%,0.22) 0%, transparent 100%);
  pointer-events: none;
}

/* ── Orb per-phase colors ────────────────────────────────── */
.orb-stage.phase-inhale .orb-core {
  background: radial-gradient(circle at 40% 34%,
    hsla(0,0%,100%,0.55)  0%,
    hsl(178, 80%, 78%)    10%,
    hsl(185, 72%, 60%)    32%,
    hsl(195, 65%, 36%)    62%,
    hsl(215, 55%, 13%)   100%
  );
  box-shadow:
    0 0  35px 12px hsla(185, 72%, 60%, 0.6),
    0 0  90px 35px hsla(185, 72%, 60%, 0.24),
    0 0 180px 70px hsla(185, 72%, 60%, 0.09);
}

.orb-stage.phase-hold .orb-core {
  background: radial-gradient(circle at 40% 34%,
    hsla(0,0%,100%,0.55)  0%,
    hsl(200, 75%, 82%)    10%,
    hsl(215, 68%, 64%)    32%,
    hsl(225, 60%, 38%)    62%,
    hsl(232, 55%, 13%)   100%
  );
  box-shadow:
    0 0  35px 12px hsla(215, 68%, 64%, 0.55),
    0 0  90px 35px hsla(215, 68%, 64%, 0.22),
    0 0 180px 70px hsla(215, 68%, 64%, 0.08);
}

.orb-stage.phase-exhale .orb-core {
  background: radial-gradient(circle at 40% 34%,
    hsla(0,0%,100%,0.5)   0%,
    hsl(250, 70%, 82%)    10%,
    hsl(265, 58%, 64%)    32%,
    hsl(275, 52%, 36%)    62%,
    hsl(245, 50%, 13%)   100%
  );
  box-shadow:
    0 0  35px 12px hsla(265, 58%, 64%, 0.6),
    0 0  90px 35px hsla(265, 58%, 64%, 0.24),
    0 0 180px 70px hsla(265, 58%, 64%, 0.09);
}

/* ── Play Footer spacer (safe area) ─────────────────────── */
.play-foot { flex-shrink: 0; height: 50px; }

/* ═══════════════════════════════════════════════════════════
   SESSION COMPLETE OVERLAY
   ═══════════════════════════════════════════════════════════ */
.overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  pointer-events: none;
  opacity: 0;
  transition: opacity 400ms ease;
}
.overlay.visible { opacity: 1; pointer-events: all; }

.overlay-bg {
  position: absolute;
  inset: 0;
  background: hsla(228, 40%, 5%, 0.7);
  backdrop-filter: blur(16px) saturate(0.8);
  -webkit-backdrop-filter: blur(16px) saturate(0.8);
}

.overlay-card {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 480px;
  background: hsl(228, 30%, 11%);
  border: 1px solid hsla(220, 25%, 40%, 0.12);
  border-radius: 28px 28px 0 0;
  padding: clamp(2rem, 6vw, 2.75rem);
  padding-bottom: max(env(safe-area-inset-bottom, 0px), 2.5rem);
  transform: translateY(100%);
  transition: transform 550ms var(--ease-out);
  text-align: center;
}
.overlay.visible .overlay-card { transform: translateY(0); }

.overlay-emoji {
  font-size: 2.8rem;
  display: block;
  margin-bottom: 0.875rem;
  animation: gentle-bob 3s ease-in-out infinite;
}
@keyframes gentle-bob {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-5px); }
}

.overlay-title {
  font-family: 'DM Sans', sans-serif;
  font-size: clamp(1.5rem, 5vw, 2rem);
  font-weight: 300;
  color: #eef0f8;
  letter-spacing: -0.01em;
  margin-bottom: 0.6rem;
}
.overlay-msg {
  font-size: clamp(0.85rem, 2.5vw, 0.95rem);
  font-weight: 300;
  color: hsla(220, 15%, 58%, 1);
  line-height: 1.65;
  max-width: 30ch;
  margin: 0 auto 2rem;
}

.next-suggestion {
  font-size: 0.8rem;
  font-weight: 300;
  font-style: italic;
  color: hsla(185, 70%, 68%, 0.9);
  line-height: 1.5;
  max-width: 30ch;
  margin: -0.75rem auto 1.25rem;
}
.next-suggestion:empty { display: none; }

.overlay-actions {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.btn-primary {
  font-family: 'DM Sans', sans-serif;
  font-size: 1rem;
  font-weight: 500;
  color: hsl(230, 40%, 8%);
  background: linear-gradient(135deg, hsl(185, 70%, 58%) 0%, hsl(260, 60%, 65%) 100%);
  border: none;
  border-radius: 50px;
  padding: 0.9rem 2rem;
  min-height: 52px;
  cursor: pointer;
  box-shadow: 0 0 30px hsla(185, 70%, 55%, 0.25);
  transition: transform 180ms var(--ease-bounce), box-shadow 180ms ease;
}
.btn-primary:hover { transform: scale(1.02); box-shadow: 0 0 45px hsla(185, 70%, 55%, 0.4); }
.btn-primary:active { transform: scale(0.97); }

.btn-ghost {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.9rem;
  font-weight: 400;
  color: hsla(220, 15%, 52%, 1);
  background: transparent;
  border: 1px solid hsla(220, 20%, 35%, 0.18);
  border-radius: 50px;
  padding: 0.75rem 2rem;
  min-height: 46px;
  cursor: pointer;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 180ms ease, border-color 180ms ease;
}
.btn-ghost:hover { color: #dde2f0; border-color: hsla(220, 20%, 50%, 0.3); }

/* Ad slot */
.ad-slot {
  display: none;
  margin-top: 1.25rem;
  padding: 0.6rem;
  border-radius: 10px;
  background: hsla(230, 30%, 8%, 0.7);
  border: 1px solid hsla(220, 20%, 28%, 0.1);
}
.ad-label {
  display: block;
  font-size: 0.6rem;
  color: hsla(220, 15%, 38%, 1);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 0.3rem;
}

/* ── Reduced motion ──────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .blob, .overlay-emoji { animation: none !important; }
  .ring  { transition: none !important; }
  .orb-core { transition: background 0.5s ease, box-shadow 0.5s ease !important; }
  .screen { transition: opacity 0.3s ease !important; transform: none !important; }
}