/* ===================== CALM PAGE STYLES ===================== */

/* Note: Header sticky glassmorphism styles moved to global scope in style.css */

/* Modern Calm Page Design */
.calm {
  /* Note: --brand override only affects page content, not header (header uses --header-bg) */
  --brand: #1f3a93;
  --ink: #0f172a;
  --muted: #64748b;
  --ring: rgba(31,58,147,.2);
  
  /* Soft color palette for cards - more differentiated */
  --card-mint: #f0fdf4;      /* Breathing exercises - mint green */
  --card-blue: #eff6ff;      /* TIPP/Cold exercises - pale blue */
  --card-sage: #ecfdf5;      /* Grounding exercises - sage green (slightly different from mint) */
  --card-lavender: #faf5ff;  /* Body scan - soft lavender */
  --card-peach: #fff7ed;     /* Butterfly - warm peach */
  
  /* Icon circle backgrounds - slightly darker for contrast */
  --icon-green: #bbf7d0;     /* Breathing - medium green */
  --icon-blue: #bfdbfe;      /* TIPP/Cold - medium blue */
  --icon-sage: #bbf7d0;      /* Grounding - medium green */
  --icon-purple: #ddd6fe;   /* Body scan - medium purple */
  --icon-orange: #fed7aa;   /* Butterfly - warm orange */
  
  /* Icon stroke colors - darker for better contrast */
  --icon-stroke-green: #047857;
  --icon-stroke-blue: #0369a1;
  --icon-stroke-purple: #6d28d9;
  --icon-stroke-orange: #c2410c;
}

/* ========== RELAXING PALETTE TOKENS (RGBA-safe, no color-mix) ========== */
:root {
  /* Base (neutral) */
  --bg: #F7FAFF;
  --surface: rgba(255, 255, 255, 0.86);
  
  /* Mint (breathing / calm) - soft seafoam gradient */
  --tint-mint: rgba(203, 245, 226, 0.75);
  --tint-mint2: rgba(224, 250, 239, 0.85);
  --accent-mint: rgba(78, 191, 150, 0.35);
  --accent2-mint: rgba(78, 191, 150, 0.18);
  --mint-ink: #166534;
  
  /* Blue (TIPP / cold) */
  --tint-blue: rgba(234, 243, 255, 0.85);
  --accent-blue: rgba(132, 182, 255, 0.24);
  --accent2-blue: rgba(132, 182, 255, 0.16);
  
  /* Lavender (scan/STOP) */
  --tint-lav: rgba(242, 238, 255, 0.85);
  --accent-lav: rgba(184, 168, 255, 0.22);
  --accent2-lav: rgba(184, 168, 255, 0.14);
  
  /* Peach (butterfly) */
  --tint-peach: rgba(255, 241, 230, 0.85);
  --accent-peach: rgba(255, 181, 138, 0.24);
  --accent2-peach: rgba(255, 181, 138, 0.16);
  
  /* Current calm variables (default to mint) */
  --calm-tint: var(--tint-mint);
  --calm-tint2: var(--tint-mint2);
  --calm-accent: var(--accent-mint);
  --calm-accent2: var(--accent2-mint);
  
  /* Calm design tokens - single source of truth for guided UI */
  --calm-bg: rgba(247, 250, 255, 0.95); /* Very light tinted background, not gray */
  --calm-surface: rgba(255, 255, 255, 0.92); /* Warm white, slightly translucent */
  --calm-ink: #0F172A; /* Text */
  --calm-muted: rgba(100, 116, 139, 0.85); /* Muted text with slight tint, not pure gray */
}

/* Decorative background elements */
.calm-page {
  position: relative;
  background-image: 
    radial-gradient(circle at 20% 50%, rgba(240, 253, 244, 0.15) 0%, transparent 50%),
    radial-gradient(circle at 80% 80%, rgba(219, 234, 254, 0.15) 0%, transparent 50%);
  background-attachment: fixed;
  min-height: 100vh;
  /* CRITICAL: Ensure no overflow restrictions that break sticky positioning */
  overflow: visible !important;
  overflow-x: hidden; /* Only hide horizontal overflow */
}

.calm-page::before {
  content: '';
  position: fixed;
  top: -30%;
  right: -15%;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(240, 253, 244, 0.4) 0%, transparent 70%);
  border-radius: 50%;
  z-index: 0;
  pointer-events: none;
}

.calm-page::after {
  content: '';
  position: fixed;
  bottom: -20%;
  left: -10%;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(219, 234, 254, 0.3) 0%, transparent 70%);
  border-radius: 50%;
  z-index: 0;
  pointer-events: none;
}

.calm .container {
  max-width: 820px;
  margin: 0 auto;
  padding: 2rem 1rem 4rem;
  position: relative;
  z-index: 1;
  /* Add top padding to account for sticky header (60px) + safe area */
  padding-top: calc(2rem + 60px + env(safe-area-inset-top, 0));
}

/* Mobile adjustment for padding */
@media (max-width: 640px) {
  .calm .container {
    padding-top: calc(1rem + 60px + env(safe-area-inset-top, 0));
  }
}

.calm h1 {
  margin: 0 0 2rem;
  color: var(--ink);
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1.2;
}

/* ===== Calm page title (softer) ===== */
.calm #calm-title {
  position: relative;
  margin: 10px 0 18px;
  padding-left: 18px;
  font-size: 38px;
  line-height: 1.05;
  font-weight: 600;          /* було занадто "тяжко" — робимо м'якше */
  letter-spacing: -0.02em;
  color: #111827;
}

/* М'який "спокійний" штрих зліва (без крапки) */
.calm #calm-title::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  bottom: 10px;
  width: 3px;
  border-radius: 999px;
  /* дуже легкий, холодний, без жовтого */
  background: linear-gradient(
    180deg,
    rgba(11, 61, 145, 0.10),
    rgba(11, 61, 145, 0.22),
    rgba(11, 61, 145, 0.10)
  );
}

/* Трохи "повітря" на мобільному */
@media (max-width: 480px) {
  .calm #calm-title {
    font-size: 34px;
    padding-left: 16px;
  }
  
  .calm #calm-title::before {
    top: 5px;
    bottom: 9px;
  }
}

/* ====== MODERNIZED EXERCISE CARDS ====== */
.calm .card {
  --card-accent: #10b981;   /* default, overridden per card below */
  background: #ffffff;
  border-radius: 18px;
  padding: 1.25rem 1.5rem;
  margin: 0.875rem 0;
  box-shadow: 0 2px 10px rgba(0,0,0,0.055), 0 0 0 1px rgba(0,0,0,0.045);
  border: none;
  border-left: 4px solid var(--card-accent);
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
  position: relative;
  overflow: hidden;
}

/* Subtle color wash behind card via pseudo-element */
.calm .card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, color-mix(in srgb, var(--card-accent) 6%, transparent) 0%, transparent 60%);
  pointer-events: none;
  border-radius: inherit;
}

/* Per-card accent colors */
.calm .card:nth-child(1) { --card-accent: #059669; }  /* Breathing - emerald */
.calm .card:nth-child(2) { --card-accent: #0891b2; }  /* Grounding - cyan */
.calm .card:nth-child(3) { --card-accent: #ea580c; }  /* Butterfly - orange */
.calm .card:nth-child(4) { --card-accent: #2563eb; }  /* TIPP - blue */
.calm .card:nth-child(5) { --card-accent: #7c3aed; }  /* Body scan - violet */
.calm .card:nth-child(6) { --card-accent: #059669; }  /* Hand - emerald */
.calm .card:nth-child(7) { --card-accent: #6d28d9; }  /* STOP - purple */

.calm .card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 28px rgba(0,0,0,0.10),
              0 0 0 1px rgba(0,0,0,0.04),
              0 0 0 4px color-mix(in srgb, var(--card-accent) 12%, transparent);
}

.calm .card:active {
  transform: translateY(-1px);
  box-shadow: 0 3px 12px rgba(0,0,0,0.08);
}

/* Touch feedback for mobile */
@media (max-width: 480px) {
  .calm .card:active {
    transform: scale(0.985);
  }
}

.calm details[open] {
  outline: none;
}

.calm details[open] .card {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

/* Accordion content - smooth transition for desktop */
.calm details > *:not(summary) {
  opacity: 1;
  transition: opacity 0.3s ease;
}

/* Hide content by default on mobile when closed */
@media (max-width: 480px) {
  /* Wrap content in a container for smooth accordion */
  .calm details {
    overflow: hidden;
  }
  
  .calm details:not([open]) > ol,
  .calm details:not([open]) > p {
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    margin: 0;
    padding: 0;
    transition: opacity 0.25s ease, max-height 0.3s ease, margin 0.3s ease, padding 0.3s ease;
  }
  
  .calm details[open] > ol,
  .calm details[open] > p {
    opacity: 1;
    max-height: 1000px;
    transition: opacity 0.3s ease 0.1s, max-height 0.4s ease, margin 0.3s ease, padding 0.3s ease;
  }
}

.calm summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  gap: 0.875rem;
  align-items: center;
  justify-content: space-between;
  position: relative;
  padding-right: 5rem; /* Space for badge + arrow */
}

.calm summary::-webkit-details-marker {
  display: none;
}

/* Right-side play arrow */
.calm summary::after {
  content: "›";
  font-size: 1.6rem;
  line-height: 1;
  color: var(--card-accent, #64748b);
  opacity: 0.45;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  transition: opacity 0.18s ease, transform 0.18s ease;
  pointer-events: none;
}

.calm .card:hover summary::after {
  opacity: 0.85;
  transform: translateY(-50%) translateX(4px);
}

.calm .title {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 0.875rem;
  font-weight: 700;
  color: #111827;
  font-size: 1.08rem;
  line-height: 1.35;
}

.calm .title > div {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.calm .subtitle {
  font-size: 0.82rem;
  font-weight: 400;
  color: #64748b;
  line-height: 1.35;
  margin-top: 0.05rem;
}

/* Icon wrapper — modern rounded square */
.calm .icon-wrapper {
  width: 48px;
  height: 48px;
  border-radius: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: color-mix(in srgb, var(--card-accent) 14%, #fff);
  box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--card-accent) 22%, transparent);
  transition: box-shadow 0.18s ease;
}

.calm .card:hover .icon-wrapper {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--card-accent) 38%, transparent);
}

/* Remove per-card icon-wrapper overrides — color-mix handles it via --card-accent */
.calm .card:nth-child(1) .icon-wrapper,
.calm .card:nth-child(2) .icon-wrapper,
.calm .card:nth-child(3) .icon-wrapper,
.calm .card:nth-child(4) .icon-wrapper,
.calm .card:nth-child(5) .icon-wrapper,
.calm .card:nth-child(6) .icon-wrapper,
.calm .card:nth-child(7) .icon-wrapper { background: color-mix(in srgb, var(--card-accent) 14%, #fff); }

.calm .icon {
  width: 22px;
  height: 22px;
  stroke: var(--card-accent);
  fill: none;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.calm .card:nth-child(1) .icon { stroke: var(--card-accent); fill: color-mix(in srgb, var(--card-accent) 10%, transparent); }
.calm .card:nth-child(2) .icon { stroke: var(--card-accent); fill: color-mix(in srgb, var(--card-accent) 10%, transparent); }
.calm .card:nth-child(3) .icon { stroke: var(--card-accent); fill: color-mix(in srgb, var(--card-accent) 10%, transparent); }
.calm .card:nth-child(4) .icon { stroke: var(--card-accent); fill: color-mix(in srgb, var(--card-accent) 10%, transparent); }
.calm .card:nth-child(5) .icon { stroke: var(--card-accent); fill: color-mix(in srgb, var(--card-accent) 10%, transparent); }
.calm .card:nth-child(6) .icon { stroke: var(--card-accent); fill: color-mix(in srgb, var(--card-accent) 10%, transparent); }
.calm .card:nth-child(7) .icon { stroke: var(--card-accent); fill: color-mix(in srgb, var(--card-accent) 10%, transparent); }

/* Duration badge — inline pill with accent color */
.calm summary small {
  position: absolute;
  top: 50%;
  right: 1.6rem;    /* space for the › arrow */
  transform: translateY(-50%);
  background: color-mix(in srgb, var(--card-accent) 12%, #fff);
  color: var(--card-accent);
  border: 1px solid color-mix(in srgb, var(--card-accent) 22%, transparent);
  padding: 0.22rem 0.65rem;
  border-radius: 99px;
  font-size: 0.75rem;
  font-weight: 700;
  white-space: nowrap;
  letter-spacing: 0.02em;
  z-index: 1;
}

@media (max-width: 480px) {
  .calm summary small {
    font-size: 0.7rem;
    padding: 0.18rem 0.55rem;
    right: 1.5rem;
  }
}

.calm ol {
  margin: 1.25rem 0 0 1.5rem;
  padding: 0;
  line-height: 1.7;
}

.calm ol li {
  margin: 0.5rem 0;
  color: var(--ink);
}

.calm p {
  margin: 1.25rem 0 0;
  line-height: 1.7;
  color: var(--ink);
}

.calm .muted {
  color: var(--muted);
  margin-top: 2rem;
  font-size: 0.95rem;
  line-height: 1.6;
  padding: 1rem;
  background: rgba(255, 255, 255, 0.6);
  border-radius: 12px;
}

/* Footer Cards - Harmonious informational cards */
.footer-card {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 1rem;
  border-radius: 12px;
  font-size: 0.9rem;
  line-height: 1.6;
  margin-top: 2rem;
  color: var(--ink);
}

.footer-card-icon {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
  margin-top: 0.1rem;
}

.footer-card span {
  flex: 1;
}

/* Advice Card - Glassmorphism effect with emerald */
.footer-card--advice {
  background: rgba(240, 253, 244, 0.6);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(22, 163, 74, 0.2);
  border-left: 2px solid #16a34a;
  color: #166534;
  box-shadow: 0 2px 8px rgba(22, 163, 74, 0.08);
}

.footer-card--advice .footer-card-icon {
  color: #16a34a;
}

/* Warning Card - High Priority Note with soft cream */
.footer-card--warning {
  background: #fef9e7;
  border: 1px solid rgba(251, 191, 36, 0.3);
  color: #78350f;
  box-shadow: 0 2px 12px rgba(251, 191, 36, 0.15);
  border-left: 3px solid #f59e0b;
}

.footer-card--warning .footer-card-icon {
  color: #d97706;
  stroke-width: 2;
}

.footer-card--warning strong {
  font-weight: 700;
  color: #b45309;
  font-size: 1.05em;
}

@media (max-width: 480px) {
  .footer-card {
    padding: 0.875rem;
    font-size: 0.85rem;
    margin-top: 1.5rem;
  }

  .footer-card-icon {
    width: 18px;
    height: 18px;
  }
  
  .calm h1 {
    font-size: 1.75rem;
    margin-bottom: 1.5rem;
  }
  
  .calm .container {
    padding: 1.5rem 0.875rem;
    padding-bottom: 80px; /* Safe area for bottom navigation/chat button */
  }
  
  .calm .card {
    padding: 1rem 1rem 1rem 0.875rem;
    margin: 0.75rem 0;
  }

  .calm .title {
    font-size: 0.96rem;
    line-height: 1.3;
    gap: 0.65rem;
  }

  .calm .icon-wrapper {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    flex-shrink: 0;
  }

  .calm .icon {
    width: 18px;
    height: 18px;
  }

  /* Ensure summary has enough space for badge + arrow */
  .calm summary {
    padding-right: 5rem;
    min-height: 2.5rem;
  }
  
  /* Smooth accordion transitions */
  .calm details {
    transition: all 0.3s ease;
  }
  
  .calm details[open] {
    margin-bottom: 0.5rem;
  }
  
  /* List and paragraph spacing on mobile */
  .calm ol,
  .calm p {
    margin-top: 0.75rem;
    padding-top: 0.5rem;
  }
  
  .calm ol {
    margin-left: 1.25rem;
  }
  
  .calm ol li {
    margin: 0.4rem 0;
    line-height: 1.6;
  }
}

/* ========== OVERLAY STYLES ========== */
#exercise-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  /* Soft tinted backdrop for pre-start modal - no dark gray */
  background: rgba(203, 245, 226, 0.4);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  z-index: 1000;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  padding: 1rem;
}

/* #guided-overlay is defined separately below with its own backdrop */

@media (min-width: 640px) {
  #exercise-overlay,
  #guided-overlay:not(.guided-overlay--ex1):not(.guided-overlay--ground):not(.guided-overlay--butterfly):not(.guided-overlay--tipp):not(.guided-overlay--bodyscan):not(.guided-overlay--hand):not(.guided-overlay--stop) {
    align-items: center;
  }
}

#exercise-overlay.open,
#guided-overlay.open {
  opacity: 1;
  visibility: visible;
}

.overlay-content {
  background: linear-gradient(180deg, var(--overlay-tint, var(--calm-tint)) 0%, rgba(255, 255, 255, 1) 58%);
  border-radius: 20px 20px 0 0;
  border: 1px solid rgba(15, 23, 42, 0.06);
  width: 100%;
  max-width: 600px;
  max-height: 90vh;
  overflow-y: auto;
  transform: translateY(100%);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 10px 40px rgba(15, 23, 42, 0.18);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  display: flex;
  flex-direction: column;
  position: relative;
}

/* Accent border - apply opacity to the accent color */
.overlay-content::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--overlay-accent, var(--calm-accent));
  opacity: 0.6;
  border-radius: 20px 0 0 0;
  pointer-events: none;
}

@media (min-width: 640px) {
  .overlay-content {
    border-radius: 20px;
    max-height: 85vh;
    transform: translateY(0) scale(0.95);
  }
  
  #exercise-overlay.open .overlay-content,
  #guided-overlay.open .overlay-content {
    transform: scale(1);
  }
}

#exercise-overlay.open .overlay-content,
#guided-overlay.open .overlay-content {
  transform: translateY(0);
}

.overlay-header {
  padding: 1.5rem;
  padding-right: 52px; /* Reserve space for close button */
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  flex-shrink: 0;
  position: relative;
}

.overlay-header-main {
  flex: 1;
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  min-width: 0;
}

.overlay-icon-wrapper {
  position: relative; /* For badge positioning */
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: var(--overlay-accent, var(--calm-accent));
}

.overlay-icon-badge {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  background: var(--calm-accent);
  color: #fff;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.12);
}

.overlay-icon-wrapper .icon {
  width: 24px;
  height: 24px;
  stroke: var(--overlay-accent-ink, var(--icon-stroke-green));
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.overlay-header-text {
  flex: 1;
  min-width: 0; /* Critical for flex text wrapping */
}

.overlay-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 0.5rem;
  line-height: 1.15;
  /* No ellipsis, allow natural wrapping up to 2-3 lines */
  display: block;
  white-space: normal;
  word-break: normal;
  overflow-wrap: normal; /* important: avoid 'anywhere' */
  hyphens: none; /* avoid odd hyphenation */
  text-overflow: clip; /* remove ellipsis */
  overflow: visible; /* allow natural height */
  min-width: 0; /* Ensure wrapping works in flex container */
}

.overlay-chips {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  flex-wrap: wrap;
}

.overlay-duration-badge {
  display: inline-block;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(0, 0, 0, 0.06);
  color: var(--overlay-accent-ink, var(--muted));
  padding: 0.35rem 0.75rem;
  border-radius: 12px;
  font-size: 0.8rem;
  font-weight: 600;
  white-space: nowrap;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.overlay-pattern-chip {
  display: inline-block;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(0, 0, 0, 0.06);
  color: var(--overlay-accent-ink, var(--muted));
  padding: 0.35rem 0.75rem;
  border-radius: 12px;
  font-size: 0.8rem;
  font-weight: 600;
  white-space: nowrap;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.overlay-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 44px;
  height: 44px;
  border: none;
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  color: var(--muted);
  transition: background 0.2s ease, color 0.2s ease;
  z-index: 1;
}

.overlay-close:hover {
  background: rgba(0, 0, 0, 0.05);
  color: var(--ink);
}

.overlay-close svg {
  width: 24px;
  height: 24px;
  stroke: currentColor;
  stroke-width: 2;
}

.overlay-body {
  padding: 1.5rem;
  flex: 1;
  overflow-y: auto;
}

/* Butterfly illustration (exercise #3 only) */
.calm-illustration {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 0 1.5rem;
  width: 100%;
}

.calm-illustration img,
img.calm-illustration {
  max-width: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 12px;
  margin: 0 auto;
  display: block;
}

/* Responsive adjustments for very small screens */
@media (max-width: 480px) {
  .calm-illustration img,
  img.calm-illustration {
    max-height: 220px;
  }
}

.overlay-summary {
  font-size: 0.95rem;
  color: var(--muted);
  margin: 0 0 1rem;
}

.overlay-why {
  font-size: 0.9rem;
  color: var(--muted);
  margin: 0 0 1.5rem;
  font-style: italic;
}

.overlay-steps {
  list-style: none;
  padding: 0;
  margin: 0 0 2rem;
}

.overlay-steps li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.overlay-steps li:last-child {
  border-bottom: none;
}

.step-icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  stroke: var(--brand);
  fill: none;
  stroke-width: 1.5;
  margin-top: 0.125rem;
}

.step-text {
  flex: 1;
  color: var(--ink);
  line-height: 1.6;
}

.overlay-actions {
  padding: 1.5rem;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  flex-shrink: 0;
}

.btn-start {
  width: 100%;
  padding: 1rem 1.5rem;
  background: var(--brand);
  color: #fff;
  border: none;
  border-radius: 12px;
  font-size: 1.1rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.1s ease;
  min-height: 48px;
}

.btn-start:hover {
  background: #0848A8;
}

.btn-start:active {
  transform: scale(0.98);
}

/* Guided Mode Styles */
#guided-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1000;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  padding: 1rem;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* Mint backdrop only for generic guided flows (ex1, ground, butterfly & tipp set their own full-bleed background) */
#guided-overlay:not(.guided-overlay--ex1):not(.guided-overlay--ground):not(.guided-overlay--butterfly):not(.guided-overlay--tipp):not(.guided-overlay--bodyscan):not(.guided-overlay--hand):not(.guided-overlay--stop) {
  background: rgba(203, 245, 226, 0.45);
}

@supports (background: color-mix(in srgb, red 50%, transparent)) {
  #guided-overlay:not(.guided-overlay--ex1):not(.guided-overlay--ground):not(.guided-overlay--butterfly):not(.guided-overlay--tipp):not(.guided-overlay--bodyscan):not(.guided-overlay--hand):not(.guided-overlay--stop) {
    background: color-mix(in srgb, var(--calm-tint) 55%, transparent);
  }
}

.guided-content {
  /* Warm white glass surface with calm gradient */
  background: linear-gradient(180deg, 
    var(--calm-tint) 0%, 
    var(--calm-tint) 15%,
    var(--calm-surface) 45%,
    rgba(255, 255, 255, 0.98) 100%
  );
  /* Subtle top glow using accent */
  position: relative;
  border-radius: 20px;
  border: 1px solid rgba(78, 191, 150, 0.12); /* Tinted border, not gray */
  width: 100%;
  max-width: 500px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  transform: translateY(100%) scale(0.95);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  /* Soft shadow using tint */
  box-shadow: 
    0 0 0 1px rgba(255, 255, 255, 0.8),
    0 8px 32px rgba(78, 191, 150, 0.15),
    0 4px 16px rgba(15, 23, 42, 0.08);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  overflow: hidden;
}

/* Subtle top glow */
.guided-content::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 200px;
  background: radial-gradient(circle at 50% 20%, 
    color-mix(in srgb, var(--calm-accent) 18%, transparent) 0%,
    transparent 60%
  );
  pointer-events: none;
  z-index: 0;
}

.guided-content > * {
  position: relative;
  z-index: 1;
}

@media (min-width: 640px) {
  .guided-content {
    border-radius: 20px;
    transform: scale(0.9);
  }
  
  #guided-overlay.open .guided-content {
    transform: scale(1);
  }
}

#guided-overlay.open .guided-content {
  transform: translateY(0) scale(1);
}

/* Dedicated premium guided state for ex1 — full-bleed breathing surface */
#guided-overlay.guided-overlay--ex1 {
  padding: 0;
  align-items: stretch;
  justify-content: stretch;
  /* Single background shorthand so it always wins over generic #guided-overlay rules */
  background:
    radial-gradient(ellipse 120% 80% at 50% 18%, rgba(255, 255, 255, 0.65) 0%, transparent 55%),
    radial-gradient(ellipse 100% 55% at 50% 100%, rgba(255, 255, 255, 0.5) 0%, rgba(230, 240, 252, 0.35) 42%, transparent 70%),
    linear-gradient(180deg, #cfe2f4 0%, #dceaf8 38%, #e8f1fb 100%);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* Beat #guided-overlay.open .guided-content transform/background from generic guided rules */
#guided-overlay.guided-overlay--ex1.open .guided-content {
  width: 100vw;
  max-width: none;
  height: 100vh;
  max-height: none;
  min-height: 100vh;
  min-height: 100dvh;
  border-radius: 0;
  border: none;
  transform: none !important;
  box-shadow: none;
  background: transparent !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

#guided-overlay.guided-overlay--ex1 .guided-content::before,
#guided-overlay.guided-overlay--ex1 .guided-header,
#guided-overlay.guided-overlay--ex1 .guided-controls {
  display: none;
}

#guided-overlay.guided-overlay--ex1 .guided-main {
  min-height: 100vh;
  width: 100%;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  box-sizing: border-box;
}

.ex1-shell {
  box-sizing: border-box;
  width: 100%;
  /* No max-width here — canvas + atmosphere must bleed edge-to-edge.
     Content is capped inside via .ex1-content-cap on each section. */
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  font-family: ui-rounded, system-ui, -apple-system, "Segoe UI", "Inter", Roboto, sans-serif;
  color: #142a45;
  -webkit-tap-highlight-color: transparent;
}

/* Inner content cap — keeps text comfortable on wide viewports */
.ex1-shell .ex1-top-bar,
.ex1-shell .ex1-start-body,
.ex1-shell .ex1-start-footer,
.ex1-shell .ex1-active-stage,
.ex1-shell .ex1-complete-center {
  max-width: 540px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

/* Full-bleed breathing planet canvas (start + active screens) */
.ex1-planet-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 0;
  pointer-events: none;
}

/* ——— Start ——— */
.ex1-shell--start {
  position: relative;
  isolation: isolate;
  padding: max(12px, env(safe-area-inset-top, 0px)) 24px max(24px, env(safe-area-inset-bottom, 0px));
  color: #eaf4ff;
}

.ex1-shell--start .ex1-top-bar,
.ex1-shell--start .ex1-start-body,
.ex1-shell--start .ex1-start-footer {
  position: relative;
  z-index: 1;
}

/* START reference-matched: deep space + hero spotlight + rich lower mist */
.ex1-shell--start::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 85% 55% at 50% 32%, rgba(255, 255, 255, 0.22) 0%, rgba(180, 215, 250, 0.08) 42%, transparent 62%),
    radial-gradient(ellipse 130% 50% at 50% 0%, rgba(190, 220, 255, 0.45) 0%, rgba(100, 160, 220, 0.15) 40%, transparent 68%),
    radial-gradient(ellipse 160% 75% at 50% 100%, rgba(255, 255, 255, 0.72) 0%, rgba(245, 250, 255, 0.48) 24%, rgba(220, 238, 252, 0.22) 48%, rgba(190, 225, 248, 0.08) 72%, transparent 88%),
    radial-gradient(ellipse 80% 45% at 12% 88%, rgba(255, 255, 255, 0.16) 0%, transparent 55%),
    radial-gradient(ellipse 78% 42% at 90% 86%, rgba(255, 255, 255, 0.14) 0%, transparent 54%),
    linear-gradient(
      180deg,
      #030d1f 0%,
      #071f3d 10%,
      #0f3a66 26%,
      #2a6aa8 48%,
      #7eb0e0 72%,
      #d8ecfc 91%,
      #f5f9ff 100%
    );
}


.ex1-top-bar {
  display: grid;
  grid-template-columns: minmax(72px, 1fr) minmax(0, 2.2fr) minmax(72px, 1fr);
  align-items: start;
  gap: 8px;
  width: 100%;
  flex-shrink: 0;
}

.ex1-top-bar--start {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
}

.ex1-start-top-row {
  display: flex;
  justify-content: flex-end;
  width: 100%;
}

.ex1-top-bar--start .ex1-screen-title {
  overflow: visible;
  text-overflow: clip;
}

.ex1-top-bar--active,
.ex1-top-bar--complete {
  margin-bottom: 4px;
}

/* Beenden sits in the right grid column, hugging the right edge */
.ex1-top-bar--active .ex1-quiet-link,
.ex1-top-bar--complete .ex1-quiet-link {
  justify-self: end;
}

/* ACTIVE: small grey Beenden on deep scene */
.ex1-shell.ex1-shell--active .ex1-top-bar--active .ex1-quiet-link {
  font-size: 0.8125rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.38);
}

.ex1-shell.ex1-shell--active .ex1-top-bar--active .ex1-quiet-link:hover {
  color: rgba(255, 255, 255, 0.55);
}

.ex1-shell.ex1-shell--active .ex1-top-bar--active .ex1-quiet-link:focus-visible {
  outline-color: rgba(255, 255, 255, 0.45);
}

.ex1-top-spacer {
  display: block;
}

.ex1-quiet-link {
  justify-self: start;
  padding: 8px 4px;
  margin: 0;
  border: none;
  background: none;
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 500;
  color: rgba(20, 42, 69, 0.45);
  cursor: pointer;
  text-align: left;
}

.ex1-quiet-link:hover {
  color: rgba(20, 42, 69, 0.65);
}

.ex1-quiet-link:focus-visible {
  outline: 2px solid rgba(31, 58, 147, 0.35);
  outline-offset: 2px;
  border-radius: 6px;
}

.ex1-shell--start .ex1-quiet-link {
  color: rgba(255, 255, 255, 0.52);
}

.ex1-shell--start .ex1-quiet-link:hover {
  color: rgba(255, 255, 255, 0.78);
}

.ex1-shell--start .ex1-quiet-link:focus-visible {
  outline-color: rgba(255, 255, 255, 0.45);
}

.ex1-screen-title {
  margin: 0;
  padding: 6px 4px 0;
  font-size: clamp(13px, 3.2vw, 20px);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.2;
  text-align: center;
  color: #071a33;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

/* Title: readable against the deep-space canvas */
.ex1-shell--start .ex1-screen-title {
  font-size: clamp(14px, 3.2vw, 19px);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: rgba(238, 248, 255, 0.96);
  line-height: 1.22;
  padding-top: 4px;
  text-shadow: 0 1px 5px rgba(0, 14, 34, 0.55);
}

.ex1-start-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding-bottom: min(2vh, 16px);
  width: 100%;
  position: relative;
}

/* Planet lives in the canvas; hero is a no-op spacer kept for structure. */
.ex1-start-hero {
  display: none;
}

.ex1-shell--start .ex1-start-rhythm {
  margin: 0 0 8px;
  font-size: clamp(1rem, 3.4vw, 1.125rem);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: #f1f8ff;
  text-shadow: 0 1px 5px rgba(0, 14, 34, 0.5);
}

.ex1-shell--start .ex1-start-meta {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 500;
  color: rgba(223, 240, 255, 0.82);
  text-shadow: 0 1px 5px rgba(0, 14, 34, 0.55);
}

.ex1-shell--start .ex1-start-hint {
  margin: 14px 0 0;
  max-width: 22em;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.45;
  text-align: center;
  color: rgba(214, 235, 255, 0.92);
  text-shadow: 0 1px 5px rgba(0, 14, 34, 0.55);
}

.ex1-start-footer {
  flex-shrink: 0;
  width: 100%;
  display: flex;
  justify-content: center;
  padding: 14px 0 8px;
}

.ex1-pill-cta {
  min-width: 152px;
  height: 52px;
  padding: 0 32px;
  border: 1px solid rgba(255, 255, 255, 0.62);
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.99) 0%, rgba(250, 253, 255, 0.9) 35%, rgba(226, 240, 252, 0.94) 100%);
  color: #0a2238;
  font: inherit;
  font-size: 1.02rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  cursor: pointer;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 1) inset,
    0 -1px 0 rgba(110, 155, 195, 0.1) inset,
    0 11px 30px rgba(40, 90, 145, 0.13),
    0 3px 11px rgba(22, 65, 108, 0.07);
  transition: transform 0.15s ease, box-shadow 0.2s ease, filter 0.2s ease;
}

.ex1-pill-cta:hover {
  filter: brightness(1.025);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 1) inset,
    0 -1px 0 rgba(110, 155, 195, 0.08) inset,
    0 14px 34px rgba(42, 98, 152, 0.16),
    0 4px 12px rgba(25, 72, 118, 0.09);
}

.ex1-pill-cta:focus-visible {
  outline: 2px solid rgba(31, 58, 147, 0.45);
  outline-offset: 3px;
}

.ex1-pill-cta:active {
  transform: scale(0.985);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.85) inset,
    0 6px 18px rgba(45, 95, 150, 0.12),
    0 2px 6px rgba(20, 60, 100, 0.08);
}

/* Start CTA: calm open tracking, no extra chrome */
.ex1-shell--start .ex1-pill-cta {
  letter-spacing: 0.022em;
}

/* START mobile portrait fit guard: keep full screen visible with CTA above fold */
@media (max-width: 430px) and (max-height: 932px) {
  .ex1-shell--start {
    padding: max(10px, env(safe-area-inset-top, 0px)) 18px max(12px, env(safe-area-inset-bottom, 0px));
  }

  .ex1-top-bar--start {
    gap: 4px;
  }

  .ex1-shell--start .ex1-screen-title {
    font-size: clamp(13px, 3.9vw, 17px);
    line-height: 1.18;
    padding-top: 2px;
  }

  .ex1-start-body {
    padding-bottom: min(1.4vh, 12px);
  }

  .ex1-start-rhythm {
    margin-bottom: 6px;
    font-size: clamp(0.95rem, 3.2vw, 1.02rem);
  }

  .ex1-start-meta {
    font-size: 0.89rem;
  }

  .ex1-start-hint {
    margin-top: 10px;
    font-size: 0.82rem;
  }

  .ex1-start-footer {
    padding: 10px 0 4px;
  }

  .ex1-pill-cta {
    min-width: 146px;
    height: 48px;
  }
}

/* ——— Active (ex1): spec layer order — bg → mist → ring+glow (animated) → open interior → static text → cues */
.ex1-shell.ex1-shell--active {
  position: relative;
  isolation: isolate;
  padding: max(10px, env(safe-area-inset-top, 0px)) 18px max(16px, env(safe-area-inset-bottom, 0px));
  flex: 1;
  min-height: 0;
}

.ex1-shell.ex1-shell--active .ex1-top-bar--active {
  position: relative;
  z-index: 3;
}

/* ACTIVE atmosphere: deeper top blue, lower mist; no center spotlight (light only from ring). */
.ex1-shell.ex1-shell--active::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 96% 44% at 50% 20%, rgba(255, 255, 255, 0.14) 0%, transparent 58%),
    radial-gradient(ellipse 120% 64% at 50% 100%, rgba(255, 255, 255, 0.36) 0%, rgba(210, 236, 255, 0.13) 42%, transparent 72%),
    linear-gradient(190deg, #010818 0%, #061d35 26%, #20537e 54%, #81b6d8 82%, #d7e9f4 100%);
}

.ex1-shell.ex1-shell--active .ex1-active-stage {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  min-height: 0;
  width: 100%;
}

/* Phase word + countdown sit at the planet's centre (canvas centerYRatio 0.44).
   Positioned against the shell (not the stage) so it tracks the canvas exactly. */
.ex1-shell.ex1-shell--active .ex1-active-center {
  position: absolute;
  left: 0;
  right: 0;
  top: 44%;
  transform: translateY(-50%);
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.1rem;
  pointer-events: none;
  text-align: center;
  color: #fff;
  text-shadow:
    0 1px 6px rgba(0, 12, 30, 0.6),
    0 0 26px rgba(190, 232, 255, 0.28);
}

.ex1-shell.ex1-shell--active .ex1-active-phase-word {
  font-size: clamp(1rem, 4.4vw, 1.25rem);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.92;
  transition: opacity 0.4s ease;
}

.ex1-shell.ex1-shell--active .ex1-active-count {
  font-size: clamp(3.4rem, 19vw, 5.2rem);
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.ex1-shell.ex1-shell--active .ex1-active-progress {
  position: relative;
  z-index: 3;
  width: 100%;
  display: flex;
  justify-content: center;
  padding: 0 0 max(10px, env(safe-area-inset-bottom, 0px));
  flex-shrink: 0;
}

.ex1-shell.ex1-shell--active .ex1-progress-label {
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: rgba(228, 244, 255, 0.72);
  text-shadow: 0 1px 4px rgba(0, 14, 34, 0.5);
}

.ex1-shell.ex1-shell--active .ex1-screen-title--active {
  margin: 0;
  align-self: center;
  justify-self: center;
  text-align: center;
  font-size: clamp(13px, 3.2vw, 17px);
  letter-spacing: 0.01em;
  color: rgba(236, 248, 255, 0.95);
  text-shadow: 0 1px 4px rgba(0, 14, 34, 0.55);
}

/* Runtime guard: hide ACTIVE chrome if main is marked START/COMPLETE (stale node safety) */
#guided-main-content[data-ex1-phase="start"] .ex1-active-stage,
#guided-main-content[data-ex1-phase="complete"] .ex1-active-stage {
  display: none !important;
}

#guided-main-content[data-ex1-phase="active"] #ex1-start-btn,
#guided-main-content[data-ex1-phase="active"] .ex1-start-footer,
#guided-main-content[data-ex1-phase="active"] .ex1-start-rhythm,
#guided-main-content[data-ex1-phase="active"] .ex1-start-meta,
#guided-main-content[data-ex1-phase="active"] .ex1-start-hint {
  display: none !important;
}

/* ——— Complete ——— */
.ex1-shell--complete {
  display: flex;
  flex-direction: column;
  padding: max(10px, env(safe-area-inset-top, 0px)) 20px max(24px, env(safe-area-inset-bottom, 0px));
  min-height: 100vh;
  min-height: 100dvh;
  cursor: default;
}

.ex1-complete-center {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 50vh;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.ex1-complete-text {
  margin: 0;
  font-size: clamp(1.45rem, 5vw, 1.75rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: #142a45;
  opacity: 0;
  animation: ex1-fertig-in 420ms ease-out forwards;
}

@media (prefers-reduced-motion: reduce) {
  .ex1-complete-text {
    animation: none;
    opacity: 1;
  }
}

@keyframes ex1-fertig-in {
  to {
    opacity: 1;
  }
}

.guided-header {
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid rgba(78, 191, 150, 0.12); /* Tinted border, not gray */
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  background: transparent;
}

.guided-title-wrapper {
  flex: 1;
  min-width: 0;
}

.guided-title {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--calm-ink);
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.guided-time {
  font-size: 0.85rem;
  color: var(--calm-muted);
  margin: 0.25rem 0 0;
}

.guided-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3rem 1.5rem;
  min-height: 300px;
  /* Inherits gradient from .guided-content, but ensure visibility */
  background: transparent;
}

/* Breathing Circle - Relaxing aura with soft mint gradient and glow */
.breathing-circle {
  position: relative;
  width: 200px;
  height: 200px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 2rem;
  /* Soft radial gradient: mint center fading to white */
  background: radial-gradient(circle at 30% 30%,
    rgba(255, 255, 255, 0.95) 0%,
    var(--calm-tint) 40%,
    var(--calm-tint2) 60%,
    rgba(255, 255, 255, 0.98) 100%);
  /* Subtle outer glow and inner light */
  box-shadow:
    0 0 24px rgba(78, 191, 150, 0.15),
    0 8px 24px rgba(15, 23, 42, 0.08),
    inset 0 0 0 1px rgba(255, 255, 255, 0.75);
  transform: scale(1);
  will-change: transform;
}

/* Ring 1 - Inner accent ring */
.breathing-circle::before {
  content: "";
  position: absolute;
  inset: -10px;
  border-radius: 999px;
  background: radial-gradient(circle,
    transparent 55%,
    var(--calm-accent) 62%,
    var(--calm-accent) 68%,
    transparent 75%);
  opacity: 0.85;
  pointer-events: none;
}

/* Ring 2 - Outer glow ring */
.breathing-circle::after {
  content: "";
  position: absolute;
  inset: -22px;
  border-radius: 999px;
  background: radial-gradient(circle,
    transparent 58%,
    var(--calm-accent2) 64%,
    var(--calm-accent2) 70%,
    transparent 82%);
  opacity: 0.7;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .breathing-circle.breathing-in,
  .breathing-circle.breathing-out {
    animation: none !important;
  }
}

.breathing-circle.breathing-in {
  animation: breatheIn 4s ease-in-out;
}

.breathing-circle.breathing-out {
  animation: breatheOut 6s ease-in-out;
}

@keyframes breatheIn {
  from { transform: scale(0.92); }
  to { transform: scale(1.06); }
}

@keyframes breatheOut {
  from { transform: scale(1.06); }
  to { transform: scale(0.92); }
}

.guided-instruction {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--calm-ink);
  text-align: center;
  margin: 0 0 0.75rem;
}

/* Exercise 4 (TIPP) completion message - large and centered */
.calm-completion-message {
  font-size: 2rem;
  font-weight: 700;
  color: var(--calm-ink);
  text-align: center;
  margin: 2rem 0;
  padding: 1.5rem;
  line-height: 1.4;
  letter-spacing: -0.01em;
}

/* Timer hint for Exercise 4 step 3 (breathing instruction) */
.timer-hint {
  font-size: 0.9rem;
  color: var(--calm-muted);
  text-align: center;
  margin-top: 0.5rem;
  opacity: 0.85;
  font-style: italic;
}

.guided-secondary {
  font-size: 1rem;
  color: var(--calm-muted);
  opacity: 0.85;
  text-align: center;
  margin: 0 0 2rem;
  letter-spacing: 0.01em;
}

.cycle-counter {
  font-size: 0.9rem;
  color: var(--calm-muted);
  opacity: 0.75;
  text-align: center;
  margin: 1.25rem 0 0;
  letter-spacing: 0.02em;
}

.guided-controls {
  padding: 1.25rem 1.5rem;
  border-top: 1px solid rgba(78, 191, 150, 0.12); /* Tinted border, not gray */
  display: flex;
  gap: 0.75rem;
  flex-shrink: 0;
  background: transparent;
}

.btn-control {
  flex: 1;
  padding: 0.875rem 1rem;
  /* Warm white with tinted border, not gray */
  border: 1px solid rgba(78, 191, 150, 0.2);
  background: var(--calm-surface);
  color: var(--calm-ink);
  border-radius: 10px;
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.1s ease;
  min-height: 48px;
}

.btn-control:hover {
  background: rgba(255, 255, 255, 0.98);
  border-color: rgba(78, 191, 150, 0.3);
}

.btn-control.primary {
  /* Calm gradient using accent colors */
  background: linear-gradient(180deg, var(--calm-accent) 0%, var(--calm-accent2) 100%);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 2px 8px rgba(78, 191, 150, 0.2);
}

/* Completion modal Done button and step Next button - high contrast black text */
.guided-controls .btn-control.primary,
#btn-done-exercise,
#btn-next-step {
  color: #000000;
  font-weight: 600;
}

.btn-control.primary:hover {
  background: linear-gradient(180deg, rgba(78, 191, 150, 0.45) 0%, rgba(78, 191, 150, 0.25) 100%);
  box-shadow: 0 4px 12px rgba(78, 191, 150, 0.3);
}

/* Completion modal Done button and step Next button hover - slightly darker for feedback */
.guided-controls .btn-control.primary:hover,
#btn-done-exercise:hover,
#btn-next-step:hover {
  background: linear-gradient(180deg, rgba(78, 191, 150, 0.5) 0%, rgba(78, 191, 150, 0.3) 100%);
  color: #000000;
}

/* Completion modal Done button and step Next button active/pressed state */
.guided-controls .btn-control.primary:active,
#btn-done-exercise:active,
#btn-next-step:active {
  background: linear-gradient(180deg, rgba(78, 191, 150, 0.4) 0%, rgba(78, 191, 150, 0.2) 100%);
  color: #0a1a3d;
  transform: translateY(1px);
  box-shadow: 0 1px 4px rgba(78, 191, 150, 0.25);
}

/* Completion modal Done button and step Next button focus state for accessibility */
.guided-controls .btn-control.primary:focus-visible,
#btn-done-exercise:focus-visible,
#btn-next-step:focus-visible {
  outline: 2px solid #1f3a93;
  outline-offset: 2px;
}

.btn-control.primary.btn-disabled,
.btn-control.primary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
  /* Ensure disabled state is visually clear but still calm */
  background: rgba(78, 191, 150, 0.15) !important;
  color: var(--calm-muted) !important;
  border-color: rgba(78, 191, 150, 0.2) !important;
  box-shadow: none !important;
}

/* Central guided step button - soft cloud look with glass effect */
.calm .calm-step-cloud-btn {
  position: relative;
  isolation: isolate; /* keeps pseudo-elements behind text cleanly */
  opacity: 1; /* ensure active is not faded */
  color: var(--calm-ink, var(--ink)) !important;
  font-weight: 700;

  /* soft "cloud glass" */
  background: rgba(255, 255, 255, 0.68);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  /* Subtle mint tint overlay without changing global variables */
  background-image: linear-gradient(
    180deg,
    rgba(187, 247, 208, 0.22),
    rgba(255, 255, 255, 0.55)
  );

  border: 1px solid rgba(15, 23, 42, 0.10);
  border-radius: 999px;

  box-shadow:
    0 10px 24px rgba(0, 0, 0, 0.10),
    0 2px 6px rgba(0, 0, 0, 0.06);

  /* Remove text shadow if any */
  text-shadow: none;
  
  /* Keep current sizing if layout depends on it */
  min-height: 48px;
}

/* Cloud bumps */
.calm .calm-step-cloud-btn::before,
.calm .calm-step-cloud-btn::after {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
  background: rgba(255, 255, 255, 0.60);
  filter: blur(0.2px);
  border-radius: 999px;
}

.calm .calm-step-cloud-btn::before {
  width: 70%;
  height: 70%;
  top: -22%;
  left: -18%;
}

.calm .calm-step-cloud-btn::after {
  width: 78%;
  height: 78%;
  top: -28%;
  right: -20%;
}

/* Hover/focus (desktop) – gentle, not flashy */
.calm .calm-step-cloud-btn:focus-visible {
  outline: none;
  box-shadow:
    0 12px 28px rgba(0, 0, 0, 0.12),
    0 0 0 3px rgba(31, 58, 147, 0.12);
}

.calm .calm-step-cloud-btn:hover:not(:disabled):not(.btn-disabled) {
  background-image: linear-gradient(
    180deg,
    rgba(187, 247, 208, 0.28),
    rgba(255, 255, 255, 0.62)
  );
  border-color: rgba(15, 23, 42, 0.14);
  box-shadow:
    0 12px 28px rgba(0, 0, 0, 0.12),
    0 3px 8px rgba(0, 0, 0, 0.08);
}

/* Ensure disabled state still looks disabled */
.calm .calm-step-cloud-btn.btn-disabled,
.calm .calm-step-cloud-btn:disabled {
  opacity: 0.5 !important;
  cursor: not-allowed;
  background-image: linear-gradient(
    180deg,
    rgba(187, 247, 208, 0.12),
    rgba(255, 255, 255, 0.35)
  ) !important;
  color: var(--calm-muted) !important;
  border-color: rgba(15, 23, 42, 0.08) !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06) !important;
  pointer-events: none;
}

/* Chips UI for ex2_54321 */
.chip-counter {
  text-align: center;
  font-size: 1rem;
  font-weight: 500;
  color: var(--calm-muted);
  margin: 1rem 0 1.5rem;
}

.chip-container {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
  margin: 1.5rem 0;
  padding: 0 0.5rem;
}

.chip-chip {
  min-width: 56px;
  height: 56px;
  border: 2px solid rgba(78, 191, 150, 0.3);
  background: var(--calm-surface);
  color: var(--calm-ink);
  border-radius: 12px;
  font-size: 1.125rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.chip-chip:hover {
  border-color: rgba(78, 191, 150, 0.5);
  background: rgba(78, 191, 150, 0.05);
  transform: translateY(-2px);
}

.chip-chip:active {
  transform: translateY(0);
}

.chip-chip--selected {
  background: linear-gradient(180deg, var(--calm-accent) 0%, var(--calm-accent2) 100%);
  border-color: rgba(78, 191, 150, 0.6);
  color: #fff;
  box-shadow: 0 2px 8px rgba(78, 191, 150, 0.25);
}

.chip-chip--selected:hover {
  border-color: rgba(78, 191, 150, 0.8);
  box-shadow: 0 4px 12px rgba(78, 191, 150, 0.35);
}

/* RTL support for Arabic and Farsi */
[dir="rtl"] .chip-container {
  direction: rtl;
}

[dir="rtl"] .chip-counter {
  direction: rtl;
}

@media (max-width: 480px) {
  .chip-chip {
    min-width: 52px;
    height: 52px;
    font-size: 1rem;
  }
  
  .chip-container {
    gap: 0.625rem;
  }
}

/* ========== Variant B: Grounding Chips UI (ex2_54321) ========== */
/* ============================================================
   Exercise 2 — 5·4·3·2·1 Grounding (immersive sensory stage)
   Full-screen takeover, deep teal-green palette. Mirrors ex1.
   ============================================================ */

/* Full-screen overlay takeover (mirrors guided-overlay--ex1) */
#guided-overlay.guided-overlay--ground {
  padding: 0;
  align-items: stretch;
  justify-content: stretch;
  background:
    radial-gradient(ellipse 130% 70% at 50% 12%, rgba(111, 227, 189, 0.18) 0%, transparent 55%),
    radial-gradient(ellipse 100% 60% at 50% 100%, rgba(63, 185, 143, 0.16) 0%, transparent 70%),
    linear-gradient(180deg, #04150f 0%, #082019 42%, #0c2c23 100%);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

#guided-overlay.guided-overlay--ground.open .guided-content {
  width: 100vw;
  max-width: none;
  height: 100vh;
  max-height: none;
  min-height: 100vh;
  min-height: 100dvh;
  border-radius: 0;
  border: none;
  transform: none !important;
  box-shadow: none;
  background: transparent !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

#guided-overlay.guided-overlay--ground .guided-content::before,
#guided-overlay.guided-overlay--ground .guided-header,
#guided-overlay.guided-overlay--ground .guided-controls {
  display: none;
}

#guided-overlay.guided-overlay--ground .guided-main {
  min-height: 100vh;
  min-height: 100dvh;
  width: 100%;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  box-sizing: border-box;
}

/* Shell ---------------------------------------------------- */
.ground-shell {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  padding: clamp(20px, 5vh, 44px) clamp(18px, 6vw, 40px) clamp(24px, 5vh, 40px);
  box-sizing: border-box;
  color: #e9f7f0;
  text-align: center;
}

/* Quit (top-right) */
.ground-quit {
  position: absolute;
  top: clamp(14px, 3vh, 24px);
  right: clamp(16px, 5vw, 28px);
  z-index: 3;
  border: none;
  background: transparent;
  color: rgba(201, 235, 222, 0.78);
  font-family: inherit;
  font-size: clamp(13px, 3.4vw, 15px);
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  padding: 6px 4px;
  transition: color 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}
.ground-quit:hover { color: #e9f7f0; }
[dir="rtl"] .ground-quit { right: auto; left: clamp(16px, 5vw, 28px); }

/* 5·4·3·2·1 journey trail */
.ground-trail {
  display: flex;
  gap: clamp(8px, 2.6vw, 14px);
  margin-top: clamp(28px, 5vh, 44px);
}
.ground-trail-dot {
  width: clamp(24px, 7vw, 30px);
  height: clamp(24px, 7vw, 30px);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(11px, 3vw, 13px);
  font-weight: 700;
  color: rgba(180, 214, 202, 0.5);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(111, 227, 189, 0.18);
  transition: all 0.3s ease;
}
.ground-trail-dot.is-done {
  color: rgba(8, 32, 25, 0.9);
  background: linear-gradient(180deg, #6fe3bd 0%, #3fb98f 100%);
  border-color: transparent;
}
.ground-trail-dot.is-current {
  color: #e9f7f0;
  background: rgba(111, 227, 189, 0.16);
  border-color: rgba(111, 227, 189, 0.7);
  box-shadow: 0 0 0 3px rgba(111, 227, 189, 0.12);
  transform: scale(1.08);
}

/* Stage (center) */
.ground-stage {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 460px;
  gap: clamp(10px, 2vh, 18px);
}

/* Aura + sense icon */
.ground-aura {
  position: relative;
  width: clamp(116px, 30vw, 150px);
  height: clamp(116px, 30vw, 150px);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at 50% 42%, rgba(111, 227, 189, 0.28) 0%, rgba(63, 185, 143, 0.12) 45%, transparent 72%);
}
.ground-aura::before {
  content: "";
  position: absolute;
  inset: -14%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(111, 227, 189, 0.22) 0%, transparent 68%);
  animation: ground-breathe 5.6s ease-in-out infinite;
}
.ground-icon {
  position: relative;
  width: clamp(54px, 14vw, 70px);
  height: clamp(54px, 14vw, 70px);
  color: #aef3d8;
  filter: drop-shadow(0 2px 10px rgba(111, 227, 189, 0.45));
}
.ground-icon svg { width: 100%; height: 100%; display: block; }

@keyframes ground-breathe {
  0%, 100% { transform: scale(1); opacity: 0.7; }
  50% { transform: scale(1.12); opacity: 1; }
}

/* Anchor gently sways on intro + completion screens */
.ground-shell--intro .ground-icon,
.ground-shell--done .ground-icon {
  transform-origin: 50% 14%;  /* swing from the ring at top */
  animation: ground-anchor-sway 4.6s ease-in-out infinite;
}
@keyframes ground-anchor-sway {
  0%, 100% { transform: rotate(-5deg); }
  50%       { transform: rotate(5deg); }
}

.ground-sense {
  margin: clamp(6px, 1.4vh, 12px) 0 0;
  font-size: clamp(22px, 6.4vw, 30px);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #f3fbf7;
}
.ground-shell .ground-instruction {
  margin: 0;
  max-width: 22em;
  font-size: clamp(14px, 4vw, 17px);
  line-height: 1.5;
  color: rgba(223, 246, 237, 0.94);
}

/* Tappable sensory lights */
.ground-orbs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(12px, 3.6vw, 18px);
  margin-top: clamp(8px, 2vh, 16px);
}
/* Tappable fingerprint orbs */
.ground-orb {
  position: relative;
  width: clamp(52px, 14vw, 64px);
  height: clamp(52px, 14vw, 64px);
  border-radius: 50%;
  border: 1.5px solid rgba(111, 227, 189, 0.28);
  background: rgba(255, 255, 255, 0.03);
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.3s ease, background 0.3s ease,
              box-shadow 0.3s ease, transform 0.15s ease;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  overflow: hidden;
}
.ground-orb svg {
  width: 54%;
  height: 54%;
  color: rgba(174, 243, 216, 0.38);
  transition: color 0.3s ease, filter 0.3s ease, transform 0.3s ease;
  pointer-events: none;
  flex-shrink: 0;
}
/* gentle idle hint — draws eye to the orbs */
.ground-orb:not(.is-on) {
  animation: ground-print-idle 3.8s ease-in-out infinite;
}
.ground-orb:not(.is-on):nth-child(2) { animation-delay: 0.5s; }
.ground-orb:not(.is-on):nth-child(3) { animation-delay: 1s; }
.ground-orb:not(.is-on):nth-child(4) { animation-delay: 1.5s; }
.ground-orb:not(.is-on):nth-child(5) { animation-delay: 2s; }
@keyframes ground-print-idle {
  0%, 100% { border-color: rgba(111, 227, 189, 0.28); box-shadow: none; }
  50%       { border-color: rgba(111, 227, 189, 0.55);
              box-shadow: 0 0 10px rgba(111, 227, 189, 0.15); }
}
.ground-orb:hover:not(.is-on) { border-color: rgba(111, 227, 189, 0.6); }
.ground-orb:active { transform: scale(0.92); }

/* Lit state — fingerprint "turns on" */
.ground-orb.is-on {
  border-color: rgba(111, 227, 189, 0.88);
  background: rgba(111, 227, 189, 0.12);
  box-shadow: 0 0 18px rgba(111, 227, 189, 0.4), inset 0 0 14px rgba(111, 227, 189, 0.18);
  animation: none;
}
.ground-orb.is-on svg {
  color: #aef3d8;
  filter: drop-shadow(0 0 5px rgba(111, 227, 189, 0.7));
  transform: scale(1.06);
}
.ground-orb.is-pulse { animation: ground-orb-pop 0.55s ease; }
@keyframes ground-orb-pop {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.2); }
  100% { transform: scale(1); }
}
.ground-orb:focus-visible {
  outline: 2px solid rgba(111, 227, 189, 0.7);
  outline-offset: 3px;
}

.ground-count {
  margin-top: clamp(4px, 1.2vh, 10px);
  font-size: clamp(14px, 3.8vw, 16px);
  font-weight: 500;
  color: rgba(190, 224, 212, 0.7);
  letter-spacing: 0.04em;
}
.ground-count b {
  color: #aef3d8;
  font-size: 1.25em;
  font-weight: 700;
}

/* Footer / advance button */
.ground-foot {
  width: 100%;
  max-width: 420px;
  margin-top: auto;
  padding-top: clamp(16px, 3vh, 28px);
}
.ground-next {
  width: 100%;
  border: none;
  border-radius: 16px;
  padding: clamp(15px, 2.2vh, 18px);
  font-family: inherit;
  font-size: clamp(15px, 4.2vw, 17px);
  font-weight: 700;
  letter-spacing: 0.01em;
  color: rgba(233, 247, 240, 0.5);
  background: rgba(255, 255, 255, 0.06);
  cursor: not-allowed;
  transition: all 0.3s ease;
  -webkit-tap-highlight-color: transparent;
}
.ground-next.is-ready {
  color: #06231a;
  background: linear-gradient(180deg, #7df0c9 0%, #3fb98f 100%);
  box-shadow: 0 8px 24px rgba(63, 185, 143, 0.35);
  cursor: pointer;
}
.ground-next.is-ready:hover { filter: brightness(1.04); transform: translateY(-1px); }
.ground-next.is-ready:active { transform: translateY(0); }

/* Intro screen */
.ground-shell--intro .ground-stage { gap: clamp(14px, 2.4vh, 22px); }
.ground-trail--intro {
  margin-top: clamp(4px, 1vh, 10px);
}
.ground-trail--intro .ground-trail-dot {
  color: rgba(174, 243, 216, 0.78);
  background: rgba(111, 227, 189, 0.1);
  border-color: rgba(111, 227, 189, 0.35);
}
.ground-time-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 16px;
  border-radius: 999px;
  font-size: clamp(13px, 3.6vw, 15px);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #aef3d8;
  background: rgba(111, 227, 189, 0.12);
  border: 1px solid rgba(111, 227, 189, 0.3);
}
.ground-shell--intro .ground-instruction {
  max-width: 24em;
  color: rgba(226, 247, 239, 0.96);
  font-size: clamp(14px, 4.1vw, 17px);
}

/* Completion screen */
.ground-shell--done .ground-aura--done::before {
  animation-duration: 4.4s;
}
.ground-done-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  max-width: 320px;
  margin-top: clamp(14px, 3vh, 26px);
}
.ground-secondary {
  border: 1px solid rgba(111, 227, 189, 0.4);
  background: transparent;
  color: #cdeede;
  border-radius: 16px;
  padding: clamp(14px, 2vh, 16px);
  font-family: inherit;
  font-size: clamp(15px, 4vw, 16px);
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}
.ground-secondary:hover { background: rgba(111, 227, 189, 0.1); }
.ground-done-actions .ground-next { width: 100%; }

[dir="rtl"] .ground-shell { text-align: center; }

@media (prefers-reduced-motion: reduce) {
  .ground-aura::before { animation: none; }
  .ground-orb.is-pulse { animation: none; }
  .ground-orb:not(.is-on) { animation: none; }
  .ground-shell--intro .ground-icon,
  .ground-shell--done .ground-icon { animation: none; }
  .ground-trail-dot.is-current { transition: none; }
}

@media (max-width: 380px) {
  .ground-orbs { gap: 10px; }
  .ground-trail { gap: 7px; }
}

.completion-actions .btn-primary {
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--calm-accent, var(--brand)) 92%, #fff 8%),
    var(--calm-accent, var(--brand))
  );
}

.timer-display {
  font-size: 2rem;
  font-weight: 600;
  color: var(--brand);
  text-align: center;
  margin: 1rem 0;
}

@media (max-width: 480px) {
  .guided-main {
    padding: 2rem 1rem;
  }
  
  .breathing-circle {
    width: 160px;
    height: 160px;
  }

  .guided-instruction {
    font-size: 1.25rem;
  }
  
  /* Exercise 4 completion message on mobile */
  .calm-completion-message {
    font-size: 1.75rem;
    padding: 1.25rem;
  }
}

/* Optional: Glow wrapper if .breathing-wrap exists */
.breathing-wrap {
  position: relative;
}

.breathing-wrap::before {
  content: "";
  position: absolute;
  inset: -18%;
  border-radius: 999px;
  background: radial-gradient(circle, var(--calm-accent) 0%, transparent 70%);
  filter: blur(8px);
  opacity: 0.9;
  pointer-events: none;
}

/* =====================================================================
   BUTTERFLY (EX3) — immersive bilateral-tapping overlay
   Dark-forest night palette: near-black bg, cool-blue left, warm-amber right
   ===================================================================== */

/* Full-bleed takeover */
#guided-overlay.guided-overlay--butterfly {
  padding: 0;
  align-items: stretch;
  justify-content: stretch;
  background: #060c14;
}

#guided-overlay.guided-overlay--butterfly.open .guided-content {
  width: 100vw;
  max-width: none;
  height: 100vh;
  height: 100dvh;
  max-height: none;
  min-height: 100vh;
  min-height: 100dvh;
  border-radius: 0;
  border: none;
  transform: none !important;
  box-shadow: none;
  background: transparent !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  display: flex;
  flex-direction: column;
  padding: 0;
}

/* Hide generic guided chrome (header, controls, glass surface) */
#guided-overlay.guided-overlay--butterfly .guided-content::before,
#guided-overlay.guided-overlay--butterfly .guided-header,
#guided-overlay.guided-overlay--butterfly .guided-controls {
  display: none !important;
}

#guided-overlay.guided-overlay--butterfly .guided-main {
  flex: 1;
  min-height: 100vh;
  min-height: 100dvh;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  overflow: hidden;
  padding: 0;
  box-sizing: border-box;
}

/* ---- Shell (common) ---- */
.btf-shell {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  position: relative;
  overflow: hidden;
  color: rgba(215, 230, 255, 0.92);
  font-family: inherit;
  background: #060c14;
}

/* ---- Firefly canvas (lives behind all content) ---- */
.btf-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}

/* ---- Top bar (shared by all screens) ---- */
.btf-bar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: clamp(14px, 3.5vh, 20px) clamp(16px, 5vw, 24px) 8px;
  gap: 8px;
  position: relative;
  z-index: 1;
  flex-shrink: 0;
}

.btf-bar-title {
  font-size: clamp(0.875rem, 3.5vw, 1rem);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-align: center;
  color: rgba(215, 230, 255, 0.7);
  margin: 0;
  text-transform: uppercase;
}

.btf-quit {
  background: none;
  border: none;
  color: rgba(215, 230, 255, 0.45);
  font-size: clamp(0.8rem, 3vw, 0.875rem);
  padding: 6px 0;
  cursor: pointer;
  justify-self: end;
  transition: color 0.2s;
  font-family: inherit;
  -webkit-tap-highlight-color: transparent;
}
.btf-quit:hover { color: rgba(215, 230, 255, 0.8); }

/* =====================================================================
   INTRO SCREEN
   ===================================================================== */

.btf-shell--intro {
  justify-content: space-between;
}

.btf-intro-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(16px, 2.8vh, 26px);
  padding: 0 clamp(24px, 7vw, 48px);
  text-align: center;
  position: relative;
  z-index: 1;
}

/* Butterfly SVG wrapper — intro (larger) */
.btf-butterfly-wrap {
  width: clamp(100px, 28vw, 150px);
  height: auto;
  flex-shrink: 0;
  filter:
    drop-shadow(0 0 18px rgba(140, 200, 255, 0.28))
    drop-shadow(0 0 36px rgba(255, 190, 80, 0.18));
}
.btf-butterfly-wrap svg { width: 100%; height: auto; display: block; }

/* ---- Wing animations ---- */

/* Global: gentle symmetric flap (intro + complete screens) */
.btf-wing--left,
.btf-wing--left-lower {
  transform-box: fill-box;
  transform-origin: right center;
  animation: btf-flap 3.2s ease-in-out infinite;
}
.btf-wing--right,
.btf-wing--right-lower {
  transform-box: fill-box;
  transform-origin: left center;
  animation: btf-flap 3.2s ease-in-out infinite;
}

@keyframes btf-flap {
  0%, 100% { transform: scaleX(1); opacity: 1; }
  50%       { transform: scaleX(0.48); opacity: 0.75; }
}

/* Active screen: bilateral beat — left wing open = tap left, right wing open = tap right.
   The butterfly IS the rhythm guide. */
.btf-butterfly-center .btf-wing--left,
.btf-butterfly-center .btf-wing--left-lower {
  animation: btf-beat-left 2.2s ease-in-out infinite;
}
.btf-butterfly-center .btf-wing--right,
.btf-butterfly-center .btf-wing--right-lower {
  animation: btf-beat-right 2.2s ease-in-out infinite;
}

@keyframes btf-beat-left {
  0%    { transform: scaleX(1.0);  opacity: 1.0; }
  40%   { transform: scaleX(1.0);  opacity: 1.0; }
  48%   { transform: scaleX(0.22); opacity: 0.35; }
  91%   { transform: scaleX(0.22); opacity: 0.35; }
  100%  { transform: scaleX(1.0);  opacity: 1.0; }
}
@keyframes btf-beat-right {
  0%    { transform: scaleX(0.22); opacity: 0.35; }
  45%   { transform: scaleX(0.22); opacity: 0.35; }
  53%   { transform: scaleX(1.0);  opacity: 1.0; }
  91%   { transform: scaleX(1.0);  opacity: 1.0; }
  100%  { transform: scaleX(0.22); opacity: 0.35; }
}

/* Complete screen: slow, peaceful symmetric flap */
.btf-butterfly-done .btf-wing--left,
.btf-butterfly-done .btf-wing--left-lower,
.btf-butterfly-done .btf-wing--right,
.btf-butterfly-done .btf-wing--right-lower {
  animation-name: btf-flap;
  animation-duration: 4.8s;
}

/* Scope to parent to beat `.calm p` (0,1,1) specificity */
.btf-intro-body .btf-intro-text {
  font-size: clamp(1rem, 4vw, 1.15rem);
  line-height: 1.65;
  color: rgba(230, 242, 255, 0.96);
  max-width: 300px;
  margin: 0;
  text-shadow: 0 1px 8px rgba(0,0,0,0.55);
}

.btf-intro-body .btf-intro-hint {
  font-size: clamp(0.82rem, 3.2vw, 0.92rem);
  color: rgba(195, 218, 255, 0.84);
  letter-spacing: 0.05em;
  margin: 0;
  text-shadow: 0 1px 6px rgba(0,0,0,0.5);
}

.btf-intro-foot {
  padding: clamp(18px, 3.5vh, 28px) clamp(20px, 6vw, 36px);
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: relative;
  z-index: 1;
}

.btf-btn-start {
  width: 100%;
  padding: clamp(13px, 2.5vh, 16px) 24px;
  border-radius: 18px;
  border: 1px solid rgba(140, 200, 255, 0.35);
  background: rgba(140, 200, 255, 0.12);
  color: rgba(220, 235, 255, 0.95);
  font-size: clamp(0.95rem, 4vw, 1.05rem);
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.2s, transform 0.12s;
  -webkit-tap-highlight-color: transparent;
}
.btf-btn-start:hover { background: rgba(140, 200, 255, 0.22); }
.btf-btn-start:active { transform: scale(0.97); }

/* =====================================================================
   ACTIVE SCREEN — bilateral tap zones
   ===================================================================== */

.btf-shell--active {
  /* canvas is z-index 0; zones and footer are z-index 1 */
}

/* Zones row fills the space between bar and footer */
.btf-zones {
  flex: 1;
  display: flex;
  align-items: stretch;
  position: relative;
  overflow: hidden;
  z-index: 1;
}

/* ---- Tap zones ---- */
.btf-zone {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  font-family: inherit;
  padding: 0;
  gap: clamp(10px, 2vh, 16px);
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
}

.btf-zone--left  { background: rgba(100, 160, 230, 0.04); }
.btf-zone--right { background: rgba(220, 140, 50, 0.04); }
.btf-zone--left:active  { background: rgba(100, 160, 230, 0.12); }
.btf-zone--right:active { background: rgba(220, 140, 50, 0.12); }

.btf-zone-label {
  font-size: clamp(0.7rem, 2.8vw, 0.875rem);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  pointer-events: none;
  transition: opacity 0.2s;
}
.btf-zone--left  .btf-zone-label { color: rgba(140, 200, 255, 0.70); }
.btf-zone--right .btf-zone-label { color: rgba(255, 190, 80, 0.70); }

.btf-zone-arrow {
  font-size: clamp(1.2rem, 4vw, 1.6rem);
  opacity: 0.20;
  pointer-events: none;
  line-height: 1;
}

/* Tap flash overlay */
@keyframes btf-flash {
  0%   { opacity: 0; }
  18%  { opacity: 1; }
  100% { opacity: 0; }
}
.btf-zone-flash {
  position: absolute;
  inset: 0;
  pointer-events: none;
  animation: btf-flash 0.42s ease-out forwards;
}
.btf-zone--left  .btf-zone-flash { background: radial-gradient(ellipse at center, rgba(140,200,255,0.26) 0%, transparent 68%); }
.btf-zone--right .btf-zone-flash { background: radial-gradient(ellipse at center, rgba(255,190,80,0.26) 0%, transparent 68%); }

/* ---- Center divider ---- */
.btf-divider {
  width: 1px;
  flex-shrink: 0;
  background: rgba(200, 220, 255, 0.07);
  align-self: stretch;
}

/* ---- Butterfly floating center (active screen) ---- */
.btf-butterfly-center {
  position: absolute;
  top: 18%;
  left: 50%;
  transform: translateX(-50%);
  width: clamp(90px, 24vw, 140px);   /* bigger so the bilateral beat is clearly visible */
  pointer-events: none;
  z-index: 2;
  filter:
    drop-shadow(0 0 14px rgba(140, 200, 255, 0.30))
    drop-shadow(0 0 28px rgba(255, 190, 80, 0.20));
}
.btf-butterfly-center svg { width: 100%; height: auto; display: block; }

/* Faster beat on tap */
.btf-butterfly-center.is-tapping .btf-wing--left,
.btf-butterfly-center.is-tapping .btf-wing--left-lower,
.btf-butterfly-center.is-tapping .btf-wing--right,
.btf-butterfly-center.is-tapping .btf-wing--right-lower {
  animation-duration: 0.20s;
}

/* =====================================================================
   FOOTER — progress dots + Fertig button
   ===================================================================== */

.btf-foot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(10px, 2vh, 16px);
  padding: clamp(12px, 2.5vh, 20px) clamp(16px, 5vw, 24px);
  position: relative;
  z-index: 1;
  flex-shrink: 0;
}

.btf-progress-row {
  display: flex;
  gap: clamp(16px, 5vw, 28px);
  align-items: center;
}

.btf-dots {
  display: flex;
  gap: clamp(4px, 1.2vw, 7px);
}

.btf-dot {
  width: clamp(7px, 2vw, 9px);
  height: clamp(7px, 2vw, 9px);
  border-radius: 50%;
  border: 1.5px solid currentColor;
  transition: background 0.22s, transform 0.18s;
  flex-shrink: 0;
}
.btf-dots--left  { color: rgba(140, 200, 255, 0.45); }
.btf-dots--right { color: rgba(255, 190, 80, 0.45); }
.btf-dot.is-on {
  background: currentColor;
  transform: scale(1.25);
  border-color: currentColor;
}

.btf-btn-done {
  width: 100%;
  max-width: 230px;
  padding: clamp(11px, 2vh, 14px) 24px;
  border-radius: 16px;
  border: 1.5px solid rgba(220, 235, 255, 0.14);
  background: rgba(255, 255, 255, 0.04);
  color: rgba(215, 230, 255, 0.38);
  font-size: clamp(0.9rem, 3.8vw, 1rem);
  font-weight: 600;
  font-family: inherit;
  cursor: not-allowed;
  transition: all 0.28s ease;
  -webkit-tap-highlight-color: transparent;
}
.btf-btn-done:not(:disabled) {
  background: rgba(140, 200, 255, 0.16);
  border-color: rgba(140, 200, 255, 0.42);
  color: rgba(220, 235, 255, 0.95);
  cursor: pointer;
}
.btf-btn-done:not(:disabled):hover {
  background: rgba(140, 200, 255, 0.26);
  transform: translateY(-1px);
}
.btf-btn-done:not(:disabled):active { transform: none; }

/* =====================================================================
   COMPLETE SCREEN
   ===================================================================== */

.btf-shell--complete {
  justify-content: space-between;
}

.btf-complete-center {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(14px, 2.6vh, 24px);
  padding: 0 clamp(24px, 7vw, 48px);
  text-align: center;
  position: relative;
  z-index: 1;
}

/* Butterfly on complete — gentle glow */
.btf-butterfly-done {
  filter:
    drop-shadow(0 0 24px rgba(140, 200, 255, 0.38))
    drop-shadow(0 0 48px rgba(255, 190, 80, 0.22));
}

.btf-complete-title {
  font-size: clamp(1.2rem, 4.5vw, 1.6rem);
  font-weight: 700;
  color: rgba(220, 235, 255, 0.95);
  margin: 0;
}

.btf-complete-center .btf-complete-desc {
  font-size: clamp(0.875rem, 3.5vw, 1rem);
  color: rgba(195, 218, 255, 0.82);
  margin: 0;
}

.btf-complete-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  max-width: 280px;
}

.btf-btn-secondary {
  padding: clamp(11px, 2vh, 13px) 20px;
  border-radius: 14px;
  border: 1px solid rgba(220, 235, 255, 0.18);
  background: transparent;
  color: rgba(215, 230, 255, 0.55);
  font-size: clamp(0.875rem, 3.5vw, 0.95rem);
  font-family: inherit;
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s;
  -webkit-tap-highlight-color: transparent;
}
.btf-btn-secondary:hover {
  color: rgba(215, 230, 255, 0.88);
  border-color: rgba(220, 235, 255, 0.38);
}

/* =====================================================================
   REDUCED MOTION
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
  .btf-wing--left,
  .btf-wing--left-lower,
  .btf-wing--right,
  .btf-wing--right-lower,
  .btf-dot { animation: none; transition: none; }
}

/* =====================================================================
   SMALL SCREENS
   ===================================================================== */
@media (max-width: 360px) {
  .btf-progress-row { gap: 10px; }
  .btf-dot          { width: 6px; height: 6px; }
}


/* =====================================================================
   EX4 TIPP — Kälte · Bewegung · Atmen (immersive 3-step flow)
   ===================================================================== */

/* Full-bleed overlay takeover */
#guided-overlay.guided-overlay--tipp {
  padding: 0;
  align-items: stretch;
  justify-content: stretch;
  background: #060c14;
}

#guided-overlay.guided-overlay--tipp.open .guided-content {
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  max-width: none;
  max-height: none;
  min-height: 100vh;
  min-height: 100dvh;
  border-radius: 0;
  border: none;
  background: transparent !important;
  box-shadow: none;
  transform: none !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  overflow: hidden;
}

/* Hide generic chrome */
#guided-overlay.guided-overlay--tipp .guided-content::before,
#guided-overlay.guided-overlay--tipp .guided-header,
#guided-overlay.guided-overlay--tipp .guided-controls { display: none !important; }

#guided-overlay.guided-overlay--tipp .guided-main {
  min-height: 100vh;
  min-height: 100dvh;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 0;
  box-sizing: border-box;
}

/* ---- Shell (full-screen section) ---- */
.tipp-shell {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
  background: linear-gradient(160deg, #060d1a 0%, #0a1428 100%);
}

.tipp-shell--cold    { background: linear-gradient(160deg, #060e1c 0%, #0b1830 60%, #0a1f30 100%); }
.tipp-shell--move    { background: linear-gradient(160deg, #0c0900 0%, #1a1200 55%, #1c1000 100%); }
.tipp-shell--breathe { background: linear-gradient(160deg, #020f0e 0%, #051c1a 55%, #081e1c 100%); }
.tipp-shell--complete{ background: linear-gradient(160deg, #031412 0%, #071e1c 100%); }

/* ---- Top bar ---- */
.tipp-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: clamp(14px, 4vw, 20px) clamp(16px, 5vw, 28px);
  gap: 12px;
  flex-shrink: 0;
}

.tipp-bar-title {
  font-size: clamp(0.85rem, 3.5vw, 1rem);
  font-weight: 600;
  color: rgba(200, 225, 255, 0.72);
  margin: 0;
  letter-spacing: 0.02em;
}

.tipp-step-tag {
  font-size: 0.78rem;
  font-weight: 700;
  color: rgba(200, 228, 255, 0.72);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  flex: 1;
  text-align: center;
}

.tipp-quit {
  background: transparent;
  border: 1px solid rgba(200, 225, 255, 0.2);
  color: rgba(200, 225, 255, 0.5);
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 0.78rem;
  font-family: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: color 0.2s, border-color 0.2s;
  flex-shrink: 0;
}
.tipp-quit:hover { color: rgba(200, 225, 255, 0.85); border-color: rgba(200, 225, 255, 0.4); }

/* ---- Step progress dots ---- */
.tipp-dots-row {
  display: flex;
  gap: 7px;
  align-items: center;
  flex-shrink: 0;
}

.tipp-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(200, 225, 255, 0.2);
  transition: background 0.3s ease, transform 0.3s ease;
}

.tipp-dot--active {
  background: rgba(200, 225, 255, 0.78);
  transform: scale(1.3);
}

.tipp-dot--done {
  background: rgba(200, 225, 255, 0.42);
}

/* ---- Intro screen ---- */
.tipp-intro-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(20px, 4vh, 36px);
  padding: clamp(16px, 3vw, 32px) clamp(14px, 5vw, 28px);
}

/* Start button inline in intro body — always visible */
.tipp-btn-start-inline {
  width: 100%;
  max-width: 300px;
  flex-shrink: 0;
}

.tipp-preview-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(6px, 2.5vw, 14px);
  width: 100%;
}

.tipp-preview-card {
  flex: 1;
  max-width: 115px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.045);
  border-radius: 16px;
  padding: clamp(12px, 2.2vw, 18px) 10px;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.tipp-preview-card--cold    { border-color: rgba(140, 200, 255, 0.2); }
.tipp-preview-card--move    { border-color: rgba(255, 190, 60, 0.2); }
.tipp-preview-card--breathe { border-color: rgba(80, 210, 185, 0.2); }

.tipp-preview-figure {
  width: 50px;
  height: 60px;
}
.tipp-preview-figure svg { width: 100%; height: 100%; }

.tipp-preview-tag {
  font-size: clamp(0.7rem, 2.8vw, 0.82rem);
  font-weight: 600;
  color: rgba(215, 232, 255, 0.88);
  text-align: center;
  letter-spacing: 0.01em;
}

.tipp-preview-time {
  font-size: clamp(0.65rem, 2.5vw, 0.75rem);
  color: rgba(180, 210, 255, 0.48);
  text-align: center;
}

.tipp-preview-sep {
  font-size: 1.2rem;
  color: rgba(200, 225, 255, 0.25);
  flex-shrink: 0;
  line-height: 1;
}

/* ---- Shared foot buttons ---- */
.tipp-step-foot,
.tipp-complete-actions {
  padding: clamp(14px, 3.5vw, 22px) clamp(22px, 7vw, 48px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.tipp-btn-primary {
  width: 100%;
  max-width: 300px;
  padding: clamp(13px, 2.5vh, 16px) 20px;
  border-radius: 16px;
  border: none;
  background: rgba(100, 190, 255, 0.17);
  color: rgba(200, 235, 255, 0.92);
  font-size: clamp(0.95rem, 3.5vw, 1.05rem);
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.2s, transform 0.15s;
}
.tipp-btn-primary:hover  { background: rgba(100, 190, 255, 0.28); transform: translateY(-1px); }
.tipp-btn-primary:active { transform: none; }

/* Teal primary for complete screen */
.tipp-shell--complete .tipp-btn-primary {
  background: rgba(80, 200, 180, 0.2);
  color: rgba(180, 245, 230, 0.92);
}
.tipp-shell--complete .tipp-btn-primary:hover { background: rgba(80, 200, 180, 0.32); }

.tipp-btn-skip {
  background: transparent;
  border: 1px solid rgba(200, 225, 255, 0.16);
  color: rgba(200, 225, 255, 0.46);
  padding: 9px 22px;
  border-radius: 20px;
  font-size: clamp(0.78rem, 3vw, 0.875rem);
  font-family: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: color 0.2s, border-color 0.2s;
}
.tipp-btn-skip:hover { color: rgba(200, 225, 255, 0.82); border-color: rgba(200, 225, 255, 0.35); }

/* ---- Step main area ---- */
.tipp-step-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(12px, 2.2vh, 20px);
  padding: 0 clamp(18px, 6vw, 40px);
  min-height: 0;
}

/* ---- Figure ---- */
.tipp-figure-wrap {
  width: clamp(96px, 26vw, 148px);
  height: clamp(96px, 26vw, 148px);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.tipp-figure-svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* Movement figure bounce */
.tipp-figure-svg--move {
  animation: tipp-bounce 1.4s ease-in-out infinite;
  transform-origin: center bottom;
}

@keyframes tipp-bounce {
  0%, 100% { transform: translateY(0) scaleY(1); }
  48%       { transform: translateY(9px) scaleY(0.88); }
  52%       { transform: translateY(9px) scaleY(0.88); }
}

/* Cold ring spin */
.tipp-cold-ring {
  transform-origin: 50% 50%;
  transform-box: fill-box;
  animation: tipp-cold-spin 9s linear infinite;
}
@keyframes tipp-cold-spin {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Snowflake drift */
.tipp-snowflake {
  transform-origin: center;
}
.tipp-snowflake--1 { animation: tipp-snow-drift 3.6s ease-in-out infinite; }
.tipp-snowflake--2 { animation: tipp-snow-drift 4.4s ease-in-out infinite 0.9s; }
.tipp-snowflake--3 { animation: tipp-snow-drift 3.9s ease-in-out infinite 1.8s; }

@keyframes tipp-snow-drift {
  0%   { transform: translateY(0)    rotate(0deg);  opacity: 0; }
  15%  { opacity: 0.9; }
  75%  { opacity: 0.55; }
  100% { transform: translateY(-20px) rotate(40deg); opacity: 0; }
}

/* Breathing rings */
.tipp-breathe-ring {
  transform-origin: center center;
  transform-box: fill-box;
  animation: tipp-breathe-pulse 6s ease-in-out infinite;
}
.tipp-breathe-ring-outer {
  transform-origin: center center;
  transform-box: fill-box;
  animation: tipp-breathe-pulse 6s ease-in-out infinite 0.4s;
}
@keyframes tipp-breathe-pulse {
  0%, 100% { transform: scale(1);    opacity: 0.38; }
  33%       { transform: scale(1.42); opacity: 0.6;  }
  67%       { transform: scale(1.42); opacity: 0.45; }
}

/* ---- Countdown ---- */
.tipp-countdown-wrap {
  display: flex;
  align-items: baseline;
  gap: 4px;
  flex-shrink: 0;
}

.tipp-countdown {
  font-size: clamp(3.2rem, 15vw, 5.5rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.025em;
  color: rgba(220, 238, 255, 0.92);
  font-variant-numeric: tabular-nums;
  transition: color 0.5s ease;
}

.tipp-countdown-unit {
  font-size: clamp(1rem, 4vw, 1.5rem);
  color: rgba(180, 215, 255, 0.45);
  font-weight: 400;
}

/* Step accent colours for countdown */
.tipp-shell--cold    .tipp-countdown { color: rgba(180, 222, 255, 0.92); }
.tipp-shell--move    .tipp-countdown { color: rgba(255, 212, 100, 0.92); }
.tipp-shell--breathe .tipp-countdown { color: rgba(100, 224, 205, 0.92); }

.tipp-shell--cold    .tipp-countdown-unit { color: rgba(150, 200, 255, 0.42); }
.tipp-shell--move    .tipp-countdown-unit { color: rgba(255, 200, 80, 0.42); }
.tipp-shell--breathe .tipp-countdown-unit { color: rgba(80, 200, 180, 0.42); }

/* ---- Breathing guide (step 3) ---- */
.tipp-breath-guide {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 100%;
  max-width: 220px;
  flex-shrink: 0;
}

.tipp-breath-phase {
  font-size: clamp(0.78rem, 3vw, 0.88rem);
  font-weight: 700;
  color: rgba(100, 224, 205, 0.85);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  transition: color 0.4s ease;
}

.tipp-breath-bar-track {
  width: 100%;
  height: 4px;
  background: rgba(80, 180, 165, 0.2);
  border-radius: 2px;
  overflow: hidden;
}

.tipp-breath-bar {
  height: 100%;
  border-radius: 2px;
  width: 0%;
  transition: width 0.45s linear;
}

.tipp-breath-bar--inhale { background: rgba(100, 224, 205, 0.72); }
.tipp-breath-bar--exhale { background: rgba(60, 185, 165, 0.52); }

/* ---- Instruction text ---- */
.tipp-instruction {
  font-size: clamp(0.82rem, 3.2vw, 0.95rem);
  color: rgba(200, 225, 255, 0.72);
  text-align: center;
  line-height: 1.55;
  margin: 0;
  max-width: 320px;
}

.tipp-shell--cold    .tipp-instruction { color: rgba(175, 218, 255, 0.75); }
.tipp-shell--move    .tipp-instruction { color: rgba(255, 218, 135, 0.75); }
.tipp-shell--breathe .tipp-instruction { color: rgba(130, 222, 208, 0.75); }

/* ---- Complete screen ---- */
.tipp-shell--complete {
  justify-content: space-between;
}

.tipp-complete-center {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(14px, 2.5vh, 22px);
  padding: 0 clamp(24px, 7vw, 48px);
  text-align: center;
}

.tipp-complete-glow {
  width: clamp(88px, 24vw, 130px);
  height: clamp(88px, 24vw, 130px);
  flex-shrink: 0;
}

.tipp-complete-svg { width: 100%; height: 100%; }

.tipp-done-ring {
  transform-origin: center center;
  transform-box: fill-box;
  animation: tipp-done-pulse 2.2s ease-in-out infinite;
}
@keyframes tipp-done-pulse {
  0%, 100% { transform: scale(1);    opacity: 0.28; }
  50%       { transform: scale(1.1); opacity: 0.5;  }
}

.tipp-complete-title {
  font-size: clamp(1.5rem, 6vw, 2.2rem);
  font-weight: 700;
  color: rgba(160, 240, 220, 0.95);
  margin: 0;
}

.tipp-complete-center .tipp-complete-desc {
  font-size: clamp(0.875rem, 3.5vw, 1rem);
  color: rgba(130, 215, 195, 0.72);
  margin: 0;
  line-height: 1.5;
}

.tipp-btn-secondary {
  width: 100%;
  max-width: 300px;
  padding: clamp(11px, 2vh, 13px) 20px;
  border-radius: 14px;
  border: 1px solid rgba(160, 240, 220, 0.18);
  background: transparent;
  color: rgba(160, 240, 220, 0.52);
  font-size: clamp(0.875rem, 3.5vw, 0.95rem);
  font-family: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: color 0.2s, border-color 0.2s;
}
.tipp-btn-secondary:hover {
  color: rgba(160, 240, 220, 0.88);
  border-color: rgba(160, 240, 220, 0.38);
}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  .tipp-figure-svg--move,
  .tipp-cold-ring,
  .tipp-snowflake--1,
  .tipp-snowflake--2,
  .tipp-snowflake--3,
  .tipp-breathe-ring,
  .tipp-breathe-ring-outer,
  .tipp-done-ring { animation: none !important; transition: none !important; }
}

/* ---- Small screens ---- */
@media (max-width: 360px) {
  .tipp-preview-card { padding: 10px 8px; }
  .tipp-preview-figure { width: 40px; height: 48px; }
  .tipp-preview-sep { font-size: 0.9rem; }
}


/* ============================================================
   EX5 BODYSCAN — Körperscan + Loslassen
   Immersive 6-zone PMR overlay
   ============================================================ */

/* -- Overlay base -- */
#guided-overlay.guided-overlay--bodyscan {
  background: #08071a;
}

/* CRITICAL: full-screen takeover (same fix as --tipp, --ex1, --ground, --butterfly) */
#guided-overlay.guided-overlay--bodyscan.open .guided-content {
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  max-width: none;
  max-height: none;        /* clears base 90vh limit */
  min-height: 100vh;
  min-height: 100dvh;
  border-radius: 0;
  border: none;
  background: transparent !important;
  box-shadow: none;
  transform: none !important;   /* clears slide-in animation */
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  overflow: hidden;
}

/* Hide stock guided-content chrome */
#guided-overlay.guided-overlay--bodyscan .guided-content::before,
#guided-overlay.guided-overlay--bodyscan .guided-header,
#guided-overlay.guided-overlay--bodyscan .guided-controls { display: none !important; }

/* Full-height flex column for custom content */
#guided-overlay.guided-overlay--bodyscan .guided-main {
  min-height: 100vh;
  min-height: 100dvh;
  width: 100%;                  /* CRITICAL */
  display: flex;
  flex-direction: column;
  align-items: stretch;         /* CRITICAL */
  padding: 0;
  box-sizing: border-box;
  background: linear-gradient(160deg, #0d0a28 0%, #0a0820 60%, #110830 100%);
}

/* ---- Shared quit button ---- */
.bscan-quit-btn {
  background: none;
  border: none;
  color: rgba(200, 185, 255, 0.55);
  font-size: 1.25rem;
  cursor: pointer;
  padding: 6px 10px;
  line-height: 1;
  border-radius: 50%;
  transition: color 0.2s, background 0.2s;
}
.bscan-quit-btn:hover { color: rgba(220, 200, 255, 0.85); background: rgba(255,255,255,0.07); }

/* ============================================================
   INTRO SCREEN
   ============================================================ */
.bscan-intro {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
  width: 100%;
  box-sizing: border-box;
}

.bscan-intro-header {
  display: flex;
  justify-content: flex-end;
  padding: clamp(12px, 3vw, 20px) clamp(12px, 3vw, 20px) 0;
  flex-shrink: 0;
}

.bscan-intro-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(16px, 3vh, 28px);
  padding: clamp(12px, 3vw, 24px) clamp(20px, 5vw, 48px);
  box-sizing: border-box;
}

/* Intro SVG figure */
.bscan-intro-figure {
  width: clamp(80px, 22vw, 130px);
  flex-shrink: 0;
}
.bscan-intro-figure .bscan-body-svg {
  width: 100%;
  height: auto;
}
/* On intro all zones dim (unlit) */
.bscan-intro-figure .bscan-zone {
  color: rgba(175, 150, 255, 0.45);
}

.bscan-intro-text { text-align: center; }

.bscan-intro-title {
  font-size: clamp(1.15rem, 4.5vw, 1.6rem);
  font-weight: 700;
  color: rgba(230, 215, 255, 0.95);
  margin: 0 0 8px;
  letter-spacing: -0.01em;
}

.bscan-intro-desc {
  font-size: clamp(0.88rem, 3vw, 1.05rem);
  color: rgba(190, 170, 255, 0.72);
  margin: 0;
  line-height: 1.55;
}

/* Zone pill row */
.bscan-zone-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 8px;
  justify-content: center;
  margin-top: 4px;
}
.bscan-zone-pill {
  background: rgba(175, 150, 255, 0.12);
  border: 1px solid rgba(175, 150, 255, 0.28);
  border-radius: 50px;
  color: rgba(210, 190, 255, 0.82);
  font-size: 0.78rem;
  padding: 4px 12px;
  letter-spacing: 0.02em;
}

/* Start button */
.bscan-start-btn {
  width: 100%;
  max-width: 300px;
  padding: clamp(13px, 3vh, 17px) 24px;
  border-radius: 50px;
  border: none;
  background: rgba(160, 130, 255, 0.22);
  color: rgba(230, 215, 255, 0.96);
  font-size: clamp(1rem, 3.5vw, 1.15rem);
  font-weight: 600;
  cursor: pointer;
  letter-spacing: 0.03em;
  transition: background 0.2s, transform 0.15s;
  flex-shrink: 0;
}
.bscan-start-btn:hover  { background: rgba(160, 130, 255, 0.35); transform: translateY(-1px); }
.bscan-start-btn:active { transform: none; }

/* ============================================================
   ACTIVE ZONE SCREEN
   ============================================================ */
.bscan-active {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
  width: 100%;
  box-sizing: border-box;
  align-items: center;
}

/* Top bar with progress dots + quit */
.bscan-top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: clamp(12px, 3vw, 18px) clamp(12px, 3vw, 20px) 0;
  box-sizing: border-box;
  flex-shrink: 0;
}

.bscan-dots {
  display: flex;
  gap: 7px;
  align-items: center;
}
.bscan-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(175, 150, 255, 0.22);
  transition: background 0.35s, transform 0.25s;
}
.bscan-dot--active {
  background: rgba(200, 175, 255, 0.85);
  transform: scale(1.35);
}
.bscan-dot--done {
  background: rgba(150, 210, 200, 0.6);
}

/* Body SVG in active screen */
.bscan-figure-wrap {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(8px, 2vh, 16px) 0;
}
.bscan-figure-wrap .bscan-body-svg {
  width: clamp(90px, 28vw, 160px);
  height: auto;
}

/* All zones dim by default */
.bscan-zone {
  color: rgba(175, 150, 235, 0.28);
  transition: color 0.45s ease, filter 0.45s ease;
}

/* Active zone — base (tense) */
.bscan-zone--active.bscan-tense {
  color: rgba(240, 90, 195, 0.92);
  filter: drop-shadow(0 0 7px rgba(240, 90, 195, 0.65));
  animation: bscan-tense-pulse 0.6s ease-in-out infinite alternate;
}

/* Active zone — relax */
.bscan-zone--active.bscan-relax {
  color: rgba(160, 130, 255, 0.85);
  filter: drop-shadow(0 0 8px rgba(160, 130, 255, 0.55));
  animation: bscan-relax-glow 2s ease-in-out infinite alternate;
}

@keyframes bscan-tense-pulse {
  from { filter: drop-shadow(0 0 5px rgba(240, 90, 195, 0.55)); }
  to   { filter: drop-shadow(0 0 12px rgba(240, 90, 195, 0.9)); }
}
@keyframes bscan-relax-glow {
  from { filter: drop-shadow(0 0 5px rgba(160, 130, 255, 0.4)); }
  to   { filter: drop-shadow(0 0 12px rgba(160, 130, 255, 0.75)); }
}

/* Zone label */
.bscan-zone-label {
  font-size: clamp(1.5rem, 6vw, 2.2rem);
  font-weight: 700;
  color: rgba(230, 215, 255, 0.95);
  letter-spacing: -0.01em;
  text-align: center;
  flex-shrink: 0;
  margin-bottom: clamp(8px, 2vh, 14px);
  transition: color 0.4s;
}

/* Phase section */
.bscan-phase-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 0 clamp(24px, 6vw, 48px);
  width: 100%;
  box-sizing: border-box;
  flex-shrink: 0;
  margin-bottom: clamp(12px, 3vh, 20px);
}

.bscan-phase-label {
  font-size: clamp(0.9rem, 3.5vw, 1.15rem);
  font-weight: 600;
  color: rgba(200, 175, 255, 0.78);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: color 0.45s;
}

.bscan-countdown {
  font-size: clamp(2.2rem, 10vw, 3.8rem);
  font-weight: 800;
  color: rgba(230, 215, 255, 0.97);
  line-height: 1;
  letter-spacing: -0.02em;
  transition: color 0.4s;
  font-variant-numeric: tabular-nums;
}

/* Progress bar */
.bscan-progress-track {
  width: 100%;
  height: 5px;
  border-radius: 3px;
  background: rgba(175, 150, 255, 0.15);
  overflow: hidden;
}
.bscan-progress-bar {
  height: 100%;
  border-radius: 3px;
  background: rgba(160, 130, 255, 0.7);
  transition: width 0.9s linear, background 0.45s;
}

/* Skip button */
.bscan-skip-btn {
  background: none;
  border: 1px solid rgba(200, 175, 255, 0.22);
  border-radius: 50px;
  color: rgba(190, 170, 255, 0.6);
  font-size: 0.88rem;
  padding: 9px 26px;
  cursor: pointer;
  margin-bottom: clamp(20px, 5vh, 36px);
  flex-shrink: 0;
  transition: color 0.2s, border-color 0.2s;
}
.bscan-skip-btn:hover { color: rgba(220, 200, 255, 0.85); border-color: rgba(220, 200, 255, 0.4); }

/* ============================================================
   COMPLETION SCREEN
   ============================================================ */
.bscan-complete {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  min-height: 100dvh;
  gap: clamp(16px, 4vh, 28px);
  padding: clamp(24px, 6vw, 48px) clamp(24px, 6vw, 48px);
  box-sizing: border-box;
  text-align: center;
}

.bscan-complete-ring {
  width: clamp(100px, 30vw, 160px);
  animation: bscan-done-pulse 3s ease-in-out infinite;
}
.bscan-done-svg { width: 100%; height: auto; }

.bscan-done-ring-outer {
  animation: bscan-ring-spin 8s linear infinite;
  transform-origin: 50px 50px;
}
.bscan-done-ring-inner {
  animation: bscan-ring-spin 5s linear infinite reverse;
  transform-origin: 50px 50px;
}

@keyframes bscan-done-pulse {
  0%,100% { transform: scale(1); }
  50%      { transform: scale(1.06); }
}
@keyframes bscan-ring-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

.bscan-done-title {
  font-size: clamp(1.6rem, 6vw, 2.4rem);
  font-weight: 800;
  color: rgba(230, 215, 255, 0.97);
  margin: 0;
  letter-spacing: -0.02em;
}
.bscan-done-desc {
  font-size: clamp(0.9rem, 3vw, 1.1rem);
  color: rgba(190, 170, 255, 0.72);
  margin: 0;
  line-height: 1.55;
  max-width: 280px;
}
.bscan-done-buttons {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  max-width: 280px;
}
.bscan-done-close {
  padding: 14px 24px;
  border-radius: 50px;
  border: none;
  background: rgba(160, 130, 255, 0.22);
  color: rgba(230, 215, 255, 0.96);
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s, transform 0.15s;
}
.bscan-done-close:hover { background: rgba(160, 130, 255, 0.35); transform: translateY(-1px); }
.bscan-done-repeat {
  padding: 12px 24px;
  border-radius: 50px;
  border: 1px solid rgba(200, 175, 255, 0.28);
  background: none;
  color: rgba(200, 175, 255, 0.7);
  font-size: 0.92rem;
  font-weight: 500;
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s;
}
.bscan-done-repeat:hover { color: rgba(220, 200, 255, 0.92); border-color: rgba(220, 200, 255, 0.45); }

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .bscan-zone--active.bscan-tense,
  .bscan-zone--active.bscan-relax  { animation: none !important; }
  .bscan-complete-ring,
  .bscan-done-ring-outer,
  .bscan-done-ring-inner            { animation: none !important; }
}

/* ---- Small screens ---- */
@media (max-width: 360px) {
  .bscan-intro-body    { gap: 14px; }
  .bscan-phase-section { padding: 0 16px; }
}


/* ============================================================
   EX6 HAND BREATHING — Atmen entlang der Handkontur
   ============================================================ */

#guided-overlay.guided-overlay--hand {
  background: #050d0b;
}

/* CRITICAL: full-screen takeover */
#guided-overlay.guided-overlay--hand.open .guided-content {
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  max-width: none;
  max-height: none;
  min-height: 100vh;
  min-height: 100dvh;
  border-radius: 0;
  border: none;
  background: transparent !important;
  box-shadow: none;
  transform: none !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  overflow: hidden;
}

#guided-overlay.guided-overlay--hand .guided-content::before,
#guided-overlay.guided-overlay--hand .guided-header,
#guided-overlay.guided-overlay--hand .guided-controls { display: none !important; }

#guided-overlay.guided-overlay--hand .guided-main {
  min-height: 100vh;
  min-height: 100dvh;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 0;
  box-sizing: border-box;
}

/* ---- Shell ---- */
.hand-shell {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
  background: linear-gradient(170deg, #050e0c 0%, #081a16 50%, #0b2018 100%);
  box-sizing: border-box;
}

/* ---- Top bar ---- */
.hand-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: clamp(14px,3.5vw,20px) clamp(14px,4vw,22px) 0;
  flex-shrink: 0;
  width: 100%;
  box-sizing: border-box;
}
.hand-bar--intro { justify-content: space-between; }

.hand-quit {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(140,220,185,0.2);
  color: rgba(160,235,200,0.75);
  font-size: 1rem;
  width: 36px; height: 36px;
  border-radius: 50%;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: color 0.2s, background 0.2s, border-color 0.2s;
}
.hand-quit:hover { color: rgba(200,250,225,0.95); background: rgba(255,255,255,0.1); border-color: rgba(180,245,210,0.4); }

/* Progress dots */
.hand-progress-dots { display: flex; gap: 7px; align-items: center; }
.hand-dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: rgba(100,220,180,0.18);
  transition: background 0.35s, transform 0.25s;
}
.hand-dot--active { background: rgba(120,245,200,0.88); transform: scale(1.4); }
.hand-dot--done   { background: rgba(80,200,155,0.52); }

/* ============================================================
   INTRO SCREEN
   ============================================================ */
.hand-intro-title {
  font-size: clamp(1rem,3.8vw,1.35rem);
  font-weight: 700;
  color: rgba(200,248,228,0.92);
  margin: 0;
  letter-spacing: -0.01em;
  flex: 1;
  padding-right: 10px;
}

.hand-intro-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(18px,4vh,32px);
  padding: clamp(12px,3vw,20px) clamp(24px,6vw,48px) clamp(16px,3vh,28px);
  box-sizing: border-box;
}

.hand-intro-figure {
  width: clamp(140px, 46vw, 210px);
  flex-shrink: 0;
}
.hand-intro-figure .hand-body-svg { width: 100%; height: auto; }

/* Arrow inside the trace dot (↑ inhale / ↓ exhale) — styles are mainly
   set as SVG attributes for viewBox-aware scaling; this class is a hook
   for overrides if needed.  The .hand-arrow selector is kept as a no-op
   alias so any stale markup silently degrades. */
.hand-trace-arrow,
.hand-arrow {
  pointer-events: none;
  user-select: none;
}

/* Two-step legend below the hand */
.hand-intro-steps {
  display: flex;
  align-items: center;
  gap: 16px;
  background: rgba(100,220,175,0.07);
  border: 1px solid rgba(100,220,175,0.18);
  border-radius: 16px;
  padding: 14px 20px;
  width: 100%;
  max-width: 300px;
  box-sizing: border-box;
}
.hand-intro-step {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
}
.hand-intro-step-arrow {
  font-size: 1.7rem;
  line-height: 1;
  font-weight: 900;
  flex-shrink: 0;
}
.hand-intro-step-arrow--up   { color: rgba(120,248,200,0.92); }
.hand-intro-step-arrow--down { color: rgba(160,210,255,0.82); }
.hand-intro-step-text {
  font-size: clamp(0.85rem,3vw,1rem);
  font-weight: 600;
  color: rgba(200,248,228,0.85);
  line-height: 1.2;
}
.hand-intro-step-divider {
  width: 1px; height: 32px;
  background: rgba(120,220,180,0.22);
  flex-shrink: 0;
}

.hand-start-btn {
  width: 100%;
  max-width: 300px;
  padding: clamp(14px,3.5vh,18px) 24px;
  border-radius: 50px;
  border: none;
  background: rgba(80,215,170,0.22);
  color: rgba(215,252,235,0.97);
  font-size: clamp(1rem,3.5vw,1.15rem);
  font-weight: 700;
  cursor: pointer;
  letter-spacing: 0.03em;
  flex-shrink: 0;
  transition: background 0.2s, transform 0.15s;
}
.hand-start-btn:hover  { background: rgba(80,215,170,0.38); transform: translateY(-1px); }
.hand-start-btn:active { transform: none; }

/* ============================================================
   ACTIVE SCREEN
   ============================================================ */
.hand-shell--active { align-items: center; }

/* Phase label + countdown live ABOVE the hand */
.hand-phase-top {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: clamp(10px,2.5vh,18px) 0 0;
  flex-shrink: 0;
}

.hand-phase-label {
  font-size: clamp(1.3rem,5.5vw,2rem);
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(130,248,200,0.95);
  transition: color 0.5s ease;
}
/* Exhale = cooler blue-white */
.hand-phase--exhale .hand-phase-label {
  color: rgba(175,215,255,0.88);
}

.hand-countdown {
  font-size: clamp(3.2rem,14vw,5.5rem);
  font-weight: 900;
  color: rgba(220,255,240,0.97);
  line-height: 1;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
  transition: color 0.5s;
}
.hand-phase--exhale .hand-countdown { color: rgba(200,225,255,0.9); }

/* Hand SVG */
.hand-figure-wrap {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(4px,1vh,10px) 0;
}
.hand-figure-wrap .hand-body-svg {
  width: clamp(140px, 44vw, 210px);
  height: auto;
  overflow: visible;
}

/* Finger states */
.hand-finger {
  transition: stroke 0.45s, fill 0.45s, filter 0.45s;
}
.hand-finger--active {
  stroke: rgba(130,248,205,0.95) !important;
  fill:   rgba(100,235,190,0.28) !important; /* slightly higher — no double-fill anymore */
  filter: drop-shadow(0 0 10px rgba(100,240,195,0.75))
          drop-shadow(0 0 4px rgba(130,255,210,0.5));
}
.hand-finger--done {
  stroke: rgba(80,190,150,0.48)  !important;
  fill:   rgba(60,170,130,0.10)  !important; /* matches palm base fill */
}

/* Palm palm-crease paths & thenar/hypothenar eminences follow the hand fill */
.hand-palm {
  /* No extra rule needed; styles are inline in the SVG */
}

/* Trace dot — inhale phase (mint glow) */
.hand-trace-dot {
  fill: rgba(110,248,205,0.97);
  filter: drop-shadow(0 0 9px rgba(110,248,205,0.9))
          drop-shadow(0 0 4px rgba(180,255,230,0.6));
  animation: hand-dot-glow 1.6s ease-in-out infinite alternate;
}
@keyframes hand-dot-glow {
  from { filter: drop-shadow(0 0 5px rgba(110,248,205,0.7))  drop-shadow(0 0 2px rgba(180,255,230,0.4)); opacity: 0.87; }
  to   { filter: drop-shadow(0 0 18px rgba(110,248,205,1))   drop-shadow(0 0 8px rgba(180,255,230,0.7)); opacity: 1;    }
}

/* Exhale phase — dot shifts to soft blue */
.hand-phase--exhale .hand-trace-dot {
  fill: rgba(150,215,255,0.95);
  filter: drop-shadow(0 0 9px rgba(150,210,255,0.88))
          drop-shadow(0 0 4px rgba(200,230,255,0.55));
}

/* Skip */
.hand-skip-btn {
  background: none;
  border: 1px solid rgba(120,220,180,0.2);
  border-radius: 50px;
  color: rgba(140,218,185,0.55);
  font-size: 0.86rem;
  padding: 9px 28px;
  cursor: pointer;
  margin-bottom: clamp(22px,5vh,38px);
  flex-shrink: 0;
  transition: color 0.2s, border-color 0.2s;
}
.hand-skip-btn:hover { color: rgba(185,248,220,0.88); border-color: rgba(185,248,220,0.35); }

/* ============================================================
   COMPLETION SCREEN
   ============================================================ */
.hand-shell--complete {
  align-items: center;
  justify-content: center;
  gap: clamp(18px,4.5vh,30px);
  padding: clamp(24px,6vw,48px);
  text-align: center;
}
.hand-complete-ring {
  width: clamp(100px,30vw,155px);
  animation: hand-done-breathe 3.2s ease-in-out infinite;
}
.hand-done-svg { width: 100%; height: auto; }
.hand-done-ring-outer { transform-origin: 50px 50px; animation: hand-ring-spin 9s  linear infinite; }
.hand-done-ring-inner { transform-origin: 50px 50px; animation: hand-ring-spin 6s  linear infinite reverse; }
@keyframes hand-done-breathe { 0%,100%{transform:scale(1)} 50%{transform:scale(1.07)} }
@keyframes hand-ring-spin    { from{transform:rotate(0deg)} to{transform:rotate(360deg)} }

.hand-done-title {
  font-size: clamp(1.7rem,6.5vw,2.5rem);
  font-weight: 800;
  color: rgba(210,255,232,0.97);
  margin: 0;
  letter-spacing: -0.02em;
}
.hand-done-desc {
  font-size: clamp(0.9rem,3vw,1.1rem);
  color: rgba(140,228,185,0.7);
  margin: 0;
  line-height: 1.55;
  max-width: 260px;
}
.hand-done-buttons {
  display: flex; flex-direction: column; gap: 10px;
  width: 100%; max-width: 270px;
}
.hand-done-close {
  padding: 14px 24px; border-radius: 50px; border: none;
  background: rgba(80,215,170,0.22);
  color: rgba(210,255,232,0.97);
  font-size: 1rem; font-weight: 700; cursor: pointer;
  transition: background 0.2s, transform 0.15s;
}
.hand-done-close:hover { background: rgba(80,215,170,0.36); transform: translateY(-1px); }
.hand-done-repeat {
  padding: 12px 24px; border-radius: 50px;
  border: 1px solid rgba(120,220,180,0.26); background: none;
  color: rgba(140,228,185,0.65); font-size: 0.92rem; font-weight: 500; cursor: pointer;
  transition: color 0.2s, border-color 0.2s;
}
.hand-done-repeat:hover { color: rgba(195,252,220,0.92); border-color: rgba(195,252,220,0.4); }

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .hand-trace-dot, .hand-demo-dot { animation: none !important; }
  .hand-complete-ring, .hand-done-ring-outer, .hand-done-ring-inner { animation: none !important; }
}

/* ---- Small screens ---- */
@media (max-width: 380px) {
  .hand-intro-body  { gap: 14px; padding-inline: 16px; }
  .hand-intro-figure { width: 120px; }
  .hand-intro-steps { padding: 12px 14px; }
  .hand-phase-top   { padding-top: 6px; }
}

/* ════════════════════════════════════════════════════════════════
   EX7 STOP — Immersive full-screen STOP technique
   Palette: deep indigo bg, violet/purple accent (distinct from
   ex6's dark-green + mint palette)
   ════════════════════════════════════════════════════════════════ */

#guided-overlay.guided-overlay--stop {
  background: #06050f;
}

#guided-overlay.guided-overlay--stop.open .guided-content {
  width: 100vw; height: 100vh; height: 100dvh;
  max-width: none; max-height: none;
  min-height: 100vh; min-height: 100dvh;
  border-radius: 0; border: none;
  background: transparent !important;
  box-shadow: none; transform: none !important;
  backdrop-filter: none; -webkit-backdrop-filter: none;
  overflow: hidden;
}

#guided-overlay.guided-overlay--stop .guided-content::before,
#guided-overlay.guided-overlay--stop .guided-header,
#guided-overlay.guided-overlay--stop .guided-controls { display: none !important; }

#guided-overlay.guided-overlay--stop .guided-main {
  min-height: 100vh; min-height: 100dvh;
  width: 100%;
  display: flex; flex-direction: column; align-items: stretch;
  padding: 0; box-sizing: border-box;
}

/* ---- Shell (shared) ---- */
.stop-shell {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 100vh; min-height: 100dvh;
  background: linear-gradient(160deg, #06050f 0%, #0d0a1e 55%, #100c22 100%);
  box-sizing: border-box;
  position: relative;
  overflow: hidden;
}

/* ---- Top bar ---- */
.stop-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: clamp(14px,3.5vw,20px) clamp(14px,4vw,22px) 0;
  flex-shrink: 0;
  width: 100%;
  box-sizing: border-box;
}

.stop-bar-title {
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.28em;
  color: rgba(255,255,255,0.72);
  text-transform: uppercase;
}

.stop-quit {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(180,140,255,0.20);
  color: rgba(180,140,255,0.65);
  font-size: 1rem;
  width: 36px; height: 36px;
  border-radius: 50%;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: color 0.2s, background 0.2s, border-color 0.2s;
}
.stop-quit:hover {
  color: rgba(215,190,255,0.95);
  background: rgba(255,255,255,0.09);
  border-color: rgba(180,140,255,0.40);
}

/* ============================================================
   INTRO SCREEN
   ============================================================ */
.stop-shell--intro {
  align-items: center;
}

/* Ambient glow behind the cards */
.stop-shell--intro::before {
  content: "";
  position: absolute;
  top: 15%;
  left: 50%;
  transform: translateX(-50%);
  width: 260px;
  height: 260px;
  background: radial-gradient(ellipse at center, rgba(130,80,255,0.18) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

.stop-letters-grid {
  display: flex;
  justify-content: center;
  align-items: stretch;
  gap: clamp(8px,3vw,18px);
  padding: clamp(32px,8vh,64px) clamp(16px,4vw,28px) 0;
  flex-shrink: 0;
  width: 100%;
  box-sizing: border-box;
  max-width: 440px;
  position: relative;
  z-index: 1;
}

.stop-letter-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(180,140,255,0.28);
  border-radius: 20px;
  padding: clamp(14px,3.5vw,22px) clamp(8px,2vw,14px);
  flex: 1;
  transition: background 0.2s, border-color 0.2s;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.stop-letter-card-letter {
  font-size: clamp(2.2rem,9vw,3.4rem);
  font-weight: 900;
  color: #ffffff;
  line-height: 1;
  letter-spacing: -0.02em;
  text-shadow: 0 0 24px rgba(180,130,255,0.40);
}

.stop-letter-card-word {
  font-size: clamp(0.56rem,2vw,0.72rem);
  font-weight: 700;
  color: rgba(255,255,255,0.82);
  letter-spacing: 0.05em;
  text-align: center;
  text-transform: uppercase;
}

.stop-intro-desc {
  text-align: center;
  color: rgba(255,255,255,0.95) !important;
  font-size: clamp(1rem,3.8vw,1.18rem);
  font-weight: 500;
  padding: clamp(28px,6vh,48px) clamp(24px,6vw,48px) 0;
  line-height: 1.6;
  margin: 0;
  position: relative;
  z-index: 1;
}

.stop-intro-time {
  text-align: center;
  color: rgba(255,255,255,0.65) !important;
  font-size: 0.86rem;
  letter-spacing: 0.10em;
  padding-top: 10px;
  margin: 0;
  position: relative;
  z-index: 1;
}

/* Divider between description and button */
.stop-intro-divider {
  width: 40px;
  height: 2px;
  background: rgba(180,140,255,0.30);
  border-radius: 2px;
  margin: clamp(16px,4vh,28px) auto 0;
  position: relative;
  z-index: 1;
}

.stop-start-btn {
  margin: clamp(18px,4vh,28px) auto clamp(36px,9vh,68px) auto;
  padding: 16px 52px;
  background: rgba(130,80,255,0.30);
  border: 1.5px solid rgba(180,140,255,0.55);
  border-radius: 50px;
  color: #f5edff;
  font-size: 1.08rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  cursor: pointer;
  position: relative;
  z-index: 1;
  transition: background 0.2s, border-color 0.2s, transform 0.15s,
              box-shadow 0.2s;
  box-shadow: 0 4px 24px rgba(120,70,255,0.22);
}
.stop-start-btn:hover {
  background: rgba(130,80,255,0.46);
  border-color: rgba(200,170,255,0.75);
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(120,70,255,0.35);
}
.stop-start-btn:active { transform: none; box-shadow: none; }

/* Progress dots */
.stop-progress { display: flex; gap: 8px; align-items: center; }
.stop-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: rgba(180,140,255,0.18);
  transition: background 0.35s, transform 0.25s;
}
.stop-dot--active { background: rgba(180,140,255,0.88); transform: scale(1.45); }
.stop-dot--done   { background: rgba(140,100,220,0.52); }

/* ============================================================
   ACTIVE STEP SCREEN
   ============================================================ */
.stop-shell--step {
  align-items: center;
}

/* Giant watermark letter behind each step */
.stop-bg-letter {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -46%);
  font-size: clamp(220px,72vw,480px);
  font-weight: 900;
  color: rgba(180,140,255,0.035);
  line-height: 1;
  pointer-events: none;
  user-select: none;
  letter-spacing: -0.04em;
}

/* Step content */
.stop-step-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(14px,3.5vh,24px);
  padding: clamp(12px,3vw,20px) clamp(24px,6vw,48px) clamp(16px,4vh,32px);
  box-sizing: border-box;
  width: 100%;
  position: relative;
  z-index: 1;
}

/* SVG illustration */
.stop-svg-wrap {
  width: clamp(128px,44vw,192px);
  height: clamp(128px,44vw,192px);
  flex-shrink: 0;
}
.stop-svg-wrap svg { width: 100%; height: 100%; overflow: visible; }

/* Letter prefix (e.g. "T — ДИХАННЯ") */
.stop-step-letter {
  font-size: clamp(0.72rem,2.4vw,0.92rem);
  font-weight: 800;
  letter-spacing: 0.30em;
  color: rgba(255,255,255,0.78) !important;
  text-transform: uppercase;
  margin: 0;
}

/* Main word */
.stop-step-word {
  font-size: clamp(1.65rem,7vw,2.5rem);
  font-weight: 900;
  color: #ffffff !important;
  letter-spacing: -0.01em;
  text-align: center;
  line-height: 1.1;
  margin: 0;
  text-shadow: 0 2px 24px rgba(150,110,255,0.35);
}

/* Description */
.stop-step-desc {
  font-size: clamp(0.9rem,3.4vw,1.08rem);
  color: rgba(255,255,255,0.88) !important;
  text-align: center;
  max-width: 26ch;
  line-height: 1.65;
  font-weight: 400;
  margin: 0;
}

/* Breathing label (T step) */
.stop-breath-label {
  font-size: clamp(1.15rem,4.5vw,1.55rem);
  font-weight: 700;
  letter-spacing: 0.04em;
  color: rgba(255,255,255,0.97) !important;
  text-align: center;
  min-height: 1.8em;
  margin: 0;
  transition: color 0.5s;
  text-shadow: 0 2px 20px rgba(160,120,255,0.30);
}

/* Observe prompt (O step) */
.stop-observe-prompt {
  font-size: clamp(0.98rem,4vw,1.28rem);
  font-weight: 600;
  color: rgba(255,255,255,0.93) !important;
  text-align: center;
  min-height: 1.8em;
  margin: 0;
  transition: opacity 0.45s;
  text-shadow: 0 2px 18px rgba(160,120,255,0.28);
}

/* P step confirm */
.stop-confirm-btn {
  padding: 14px 44px;
  background: rgba(140,90,255,0.22);
  border: 1.5px solid rgba(200,160,255,0.50);
  border-radius: 50px;
  color: rgba(255,255,255,0.97);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, transform 0.15s, opacity 0.6s;
}
.stop-confirm-btn:hover {
  background: rgba(140,90,255,0.36);
  border-color: rgba(200,170,255,0.65);
  transform: translateY(-1px);
}

/* ============================================================
   SVG ANIMATIONS
   ============================================================ */

/* S — concentric rings pulse then freeze */
@keyframes stop-ring-pulse {
  0%   { opacity: 0.12; transform: scale(1); }
  50%  { opacity: 0.75; transform: scale(1.10); }
  100% { opacity: 0.12; transform: scale(1); }
}
.stop-ring {
  transform-box: fill-box;
  transform-origin: center;
  animation: stop-ring-pulse 3.5s ease-in-out infinite;
}
.stop-ring-1 { animation-duration: 2.8s; animation-delay: 1.0s; }
.stop-ring-2 { animation-duration: 3.4s; animation-delay: 0.5s; }
.stop-ring-3 { animation-duration: 4.0s; animation-delay: 0s;   }

/* Freeze: added by JS after 2.5s */
.stop-frozen .stop-ring {
  animation-play-state: paused;
  opacity: 0.42 !important;
}

/* O — scan line sweeps vertically through the body */
@keyframes stop-scan {
  0%   { transform: translateY(0);   opacity: 0.85; }
  75%  { transform: translateY(88px); opacity: 0.55; }
  88%  { transform: translateY(88px); opacity: 0;    }
  100% { transform: translateY(0);   opacity: 0;    }
}
.stop-scan-line, .stop-scan-glow {
  animation: stop-scan 5s cubic-bezier(0.4,0,0.6,1) infinite;
  transform-origin: center top;
}
.stop-scan-glow { animation-delay: 0s; }

/* P — path draws itself */
@keyframes stop-path-draw {
  from { stroke-dashoffset: 220; opacity: 0.4; }
  to   { stroke-dashoffset: 0;   opacity: 1;   }
}
.stop-path-draw {
  stroke-dasharray: 220;
  stroke-dashoffset: 220;
  animation: stop-path-draw 1.0s cubic-bezier(0.4,0,0.2,1) forwards;
}
@keyframes stop-arrow-in {
  from { opacity: 0; transform: translateX(-6px); }
  to   { opacity: 1; transform: translateX(0); }
}
.stop-arrow-appear {
  opacity: 0;
  animation: stop-arrow-in 0.45s ease-out 0.85s forwards;
}

/* ============================================================
   COMPLETE SCREEN
   ============================================================ */
.stop-shell--complete {
  align-items: center;
  justify-content: center;
  gap: clamp(14px,3.5vh,26px);
  padding: clamp(20px,5vw,40px);
}

.stop-done-ring {
  width: clamp(88px,28vw,132px);
  flex-shrink: 0;
}

@keyframes stop-done-ring-spin {
  from { stroke-dashoffset: 251; }
  to   { stroke-dashoffset: 0;   }
}
.stop-done-ring-outer {
  stroke-dasharray: 251;
  stroke-dashoffset: 251;
  animation: stop-done-ring-spin 1s ease-out forwards;
}
.stop-done-ring-inner {
  stroke-dasharray: 170;
  stroke-dashoffset: 170;
  animation: stop-done-ring-spin 0.9s ease-out 0.15s forwards;
}

.stop-done-title {
  font-size: clamp(1.5rem,6vw,2.2rem);
  font-weight: 900;
  color: rgba(218,200,255,0.97);
  text-align: center;
  letter-spacing: -0.01em;
  margin: 0;
}
.stop-done-desc {
  font-size: clamp(0.92rem,3.4vw,1.08rem);
  color: rgba(175,155,230,0.70);
  text-align: center;
  max-width: 28ch;
  line-height: 1.65;
  margin: 0;
}
.stop-done-buttons {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 4px;
}

.stop-done-repeat, .stop-done-close {
  padding: 13px 28px;
  border-radius: 50px;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  letter-spacing: 0.04em;
  transition: background 0.2s, border-color 0.2s, transform 0.15s;
}
.stop-done-repeat {
  background: rgba(140,90,255,0.14);
  border: 1.5px solid rgba(180,140,255,0.32);
  color: rgba(200,178,255,0.88);
}
.stop-done-repeat:hover { background: rgba(140,90,255,0.26); }
.stop-done-close {
  background: rgba(140,90,255,0.26);
  border: 1.5px solid rgba(180,140,255,0.52);
  color: rgba(225,208,255,0.97);
}
.stop-done-close:hover { background: rgba(140,90,255,0.42); transform: translateY(-1px); }

/* Reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .stop-ring, .stop-scan-line, .stop-scan-glow,
  .stop-path-draw, .stop-arrow-appear,
  .stop-done-ring-outer, .stop-done-ring-inner { animation: none !important; }
  .stop-path-draw { stroke-dashoffset: 0 !important; opacity: 1 !important; }
  .stop-arrow-appear { opacity: 1 !important; }
  .stop-done-ring-outer, .stop-done-ring-inner { stroke-dashoffset: 0 !important; }
}

/* Small screens */
@media (max-width: 380px) {
  .stop-letters-grid { gap: 6px; padding-inline: 12px; }
  .stop-letter-card  { padding: 10px 6px; }
  .stop-step-body    { gap: 12px; padding-inline: 18px; }
}