/* ═══════════════════════════════════════════════════════════════════════════
   Женский календарь радости — дизайн v3
   Целевая аудитория: женщины 45+
   Стиль: тёплый, элегантный, «уютное кафе с книгой»
   Шрифты: крупные, читабельные; без мелких деталей
   Цвета: розово-терракотовая гамма, кремовый фон, золотые акценты
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Переменные ─────────────────────────────────────────────────────────── */
:root {
  --cream:       #fdf6ee;
  --cream2:      #faf0e4;
  --parchment:   #f5e8d5;
  --rose:        #c9627a;
  --rose-dark:   #a04060;
  --rose-light:  #f0b8c4;
  --rose-pale:   #fce8ed;
  --terra:       #b05040;
  --gold:        #c8922a;
  --gold-light:  #f0d080;
  --gold-pale:   #fdf3d8;
  --sage:        #7a9e7e;
  --sage-light:  #c8e0c8;
  --sage-pale:   #edf5ed;
  --plum:        #7a4870;
  --plum-light:  #d4a8cc;
  --plum-pale:   #f5eaf3;
  --text:        #2c1a22;
  --text2:       #5a3a48;
  --muted:       #8a6878;
  --line:        rgba(180, 120, 140, 0.18);
  --white:       #ffffff;
  --shadow-sm:   0 2px 12px rgba(100, 40, 60, 0.10);
  --shadow-md:   0 6px 24px rgba(100, 40, 60, 0.14);
  --shadow-lg:   0 12px 40px rgba(100, 40, 60, 0.18);
  --r-sm:        16px;
  --r-md:        24px;
  --r-lg:        32px;
  --r-xl:        40px;
  --font-serif:  'Playfair Display', 'Georgia', serif;
  --font-body:   'Nunito', 'Segoe UI', Arial, sans-serif;
}

/* ОК — тёплый янтарный акцент */
:root[data-platform="ok"] {
  --rose:      #c07830;
  --rose-dark: #8a5020;
  --rose-pale: #fef0e0;
  --gold:      #b06820;
}

/* ── Сброс и база ───────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html, body {
  margin: 0;
  min-height: 100%;
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--text);
  background: var(--cream);
}

/* Фон страницы — мягкий цветочный паттерн через CSS */
body {
  background:
    radial-gradient(ellipse 60% 40% at 10% 5%,  rgba(240,184,196,0.28) 0%, transparent 60%),
    radial-gradient(ellipse 50% 35% at 92% 8%,  rgba(200,146,42,0.18)  0%, transparent 55%),
    radial-gradient(ellipse 45% 40% at 5%  92%, rgba(122,158,126,0.20) 0%, transparent 55%),
    radial-gradient(ellipse 55% 35% at 95% 88%, rgba(122,72,112,0.14)  0%, transparent 55%),
    linear-gradient(160deg, #fdf6ee 0%, #faf0e4 50%, #f5f0ea 100%);
}

button, a { font: inherit; }
h1, h2, h3, p { margin-top: 0; }

/* ── Оболочка приложения ────────────────────────────────────────────────── */
.app-shell {
  max-width: 680px;
  min-height: 100vh;
  margin: 0 auto;
  padding: max(20px, env(safe-area-inset-top)) 16px calc(96px + env(safe-area-inset-bottom));
}

/* ── Шапка ──────────────────────────────────────────────────────────────── */
.topbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0 24px;
}

.eyebrow {
  display: inline-block;
  margin: 0 0 8px;
  padding: 5px 14px;
  border-radius: 999px;
  background: var(--rose-pale);
  color: var(--rose-dark);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

:root[data-platform="ok"] .eyebrow {
  background: #fef0e0;
  color: #8a5020;
}

h1 {
  margin-bottom: 4px;
  font-family: var(--font-serif);
  font-size: 28px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--rose-dark);
}

.top-subtitle {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
  max-width: 480px;
}

/* ── Карточки / панели ──────────────────────────────────────────────────── */
.card {
  margin-bottom: 16px;
  padding: 24px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-md);
}

.card-rose    { background: linear-gradient(145deg, #fff8f8 0%, #fce8ed 100%); }
.card-gold    { background: linear-gradient(145deg, #fffdf5 0%, #fdf3d8 100%); }
.card-sage    { background: linear-gradient(145deg, #f8fdf8 0%, #edf5ed 100%); }
.card-plum    { background: linear-gradient(145deg, #fdf8fc 0%, #f5eaf3 100%); }
.card-cream   { background: linear-gradient(145deg, #ffffff 0%, #faf0e4 100%); }

/* ── Герой-панель ───────────────────────────────────────────────────────── */
.hero-panel {
  position: relative;
  overflow: hidden;
  margin-bottom: 16px;
  padding: 28px 24px 24px;
  border-radius: var(--r-xl);
  border: 1px solid rgba(255,255,255,0.9);
  background:
    radial-gradient(ellipse 70% 60% at 95% 0%,   rgba(200,146,42,0.22) 0%, transparent 60%),
    radial-gradient(ellipse 55% 50% at 0%  100%,  rgba(122,158,126,0.18) 0%, transparent 55%),
    linear-gradient(145deg, #fff5f0 0%, #fce8ed 45%, #fdf3d8 100%);
  box-shadow: var(--shadow-lg);
}

/* Декоративный элемент — акварельный круг */
.hero-panel::before {
  content: '';
  position: absolute;
  right: -40px;
  top: -40px;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: conic-gradient(from 45deg,
    rgba(201,98,122,0.22),
    rgba(200,146,42,0.18),
    rgba(122,158,126,0.16),
    rgba(122,72,112,0.14),
    rgba(201,98,122,0.22));
  filter: blur(2px);
  pointer-events: none;
}

.hero-panel::after {
  content: '';
  position: absolute;
  left: -20px;
  bottom: -30px;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(240,184,196,0.3) 0%, transparent 70%);
  pointer-events: none;
}

.hero-copy { position: relative; z-index: 1; max-width: 520px; }

.date-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 14px;
  padding: 8px 16px;
  border-radius: 999px;
  background: rgba(255,255,255,0.88);
  border: 1px solid rgba(201,98,122,0.2);
  color: var(--rose-dark);
  font-size: 14px;
  font-weight: 700;
  box-shadow: var(--shadow-sm);
}

.date-pill::before {
  content: '🌸';
  font-size: 16px;
}

.mood-label {
  display: inline-block;
  margin-bottom: 10px;
  padding: 6px 14px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--gold-pale), var(--rose-pale));
  color: var(--terra);
  font-size: 15px;
  font-weight: 800;
}

.hero-panel h2 {
  font-family: var(--font-serif);
  font-size: 32px;
  font-weight: 700;
  color: var(--rose-dark);
  line-height: 1.2;
  margin-bottom: 10px;
}

.hero-panel p {
  font-size: 16px;
  line-height: 1.6;
  color: var(--text2);
  margin-bottom: 20px;
}

/* ── Кнопки действий в герое ────────────────────────────────────────────── */
.hero-actions {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.cta-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 80px;
  padding: 14px 10px;
  border: none;
  border-radius: var(--r-md);
  cursor: pointer;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.2;
  text-align: center;
  transition: transform 0.15s, box-shadow 0.15s;
}

.cta-tile:active { transform: translateY(1px); }

.cta-tile-quiz {
  background: linear-gradient(145deg, var(--rose), var(--rose-dark));
  color: var(--white);
  box-shadow: 0 8px 20px rgba(160,64,96,0.30);
}

.cta-tile-game {
  background: linear-gradient(145deg, var(--gold), #a07020);
  color: var(--white);
  box-shadow: 0 8px 20px rgba(160,120,32,0.28);
}

.cta-tile-bouquet {
  background: linear-gradient(145deg, var(--sage), #4a7a50);
  color: var(--white);
  box-shadow: 0 8px 20px rgba(80,130,80,0.26);
}

.cta-tile-icon {
  font-size: 26px;
  line-height: 1;
}

/* ── Статистика ─────────────────────────────────────────────────────────── */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 16px;
}

.stat-card {
  padding: 18px 12px;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  text-align: center;
  box-shadow: var(--shadow-sm);
}

.stat-card:nth-child(1) { background: linear-gradient(145deg, #fff5f0, #fce8ed); }
.stat-card:nth-child(2) { background: linear-gradient(145deg, #fffdf5, #fdf3d8); }
.stat-card:nth-child(3) { background: linear-gradient(145deg, #f8fdf8, #edf5ed); }

.stat-icon-wrap {
  font-size: 28px;
  line-height: 1;
  margin-bottom: 6px;
}

.stat-value {
  display: block;
  font-family: var(--font-serif);
  font-size: 28px;
  font-weight: 700;
  color: var(--rose-dark);
  line-height: 1;
  margin-bottom: 4px;
}

.stat-card p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
}

/* ── Подарок дня ────────────────────────────────────────────────────────── */
.daily-prize {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
  padding: 22px 24px;
  border-radius: var(--r-lg);
  border: 1px solid rgba(200,146,42,0.25);
  background: linear-gradient(135deg, #fffdf5 0%, #fdf3d8 50%, #fce8ed 100%);
  box-shadow: var(--shadow-md);
}

.daily-prize::before {
  content: '✦';
  position: absolute;
  right: 20px;
  top: 10px;
  font-size: 80px;
  color: rgba(200,146,42,0.12);
  pointer-events: none;
  line-height: 1;
}

.daily-prize > div { position: relative; z-index: 1; }

.daily-prize h2 {
  font-family: var(--font-serif);
  font-size: 22px;
  color: var(--terra);
  margin-bottom: 6px;
}

.daily-prize p {
  margin: 0;
  color: var(--text2);
  font-size: 15px;
  line-height: 1.5;
}

/* ── Раздел ежедневных радостей ─────────────────────────────────────────── */
.retention-board {
  margin-bottom: 16px;
  padding: 24px;
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background: linear-gradient(145deg, #ffffff 0%, #faf5f8 100%);
  box-shadow: var(--shadow-md);
}

.section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
}

.section-head h2 {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 22px;
  color: var(--rose-dark);
}

.title-pill {
  padding: 5px 14px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--rose), var(--plum));
  color: var(--white);
  font-size: 13px;
  font-weight: 700;
}

/* Выбор настроения */
.mood-picker {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-bottom: 18px;
}

.mood-picker button {
  min-height: 64px;
  padding: 14px 16px;
  border: 2px solid transparent;
  border-radius: var(--r-md);
  background: var(--white);
  color: var(--text2);
  cursor: pointer;
  font-size: 15px;
  font-weight: 700;
  text-align: left;
  box-shadow: var(--shadow-sm);
  transition: all 0.2s;
  display: flex;
  align-items: center;
  gap: 10px;
}

.mood-picker button::before {
  font-size: 24px;
  flex: 0 0 auto;
}

.mood-picker button[data-mood="calm"]::before   { content: '🌿'; }
.mood-picker button[data-mood="tired"]::before  { content: '🫖'; }
.mood-picker button[data-mood="joy"]::before    { content: '🌸'; }
.mood-picker button[data-mood="energy"]::before { content: '☀️'; }

.mood-picker button:hover {
  border-color: var(--rose-light);
  box-shadow: var(--shadow-md);
}

.mood-picker button.active {
  border-color: var(--rose);
  background: linear-gradient(135deg, var(--rose-pale), #fdf0f5);
  color: var(--rose-dark);
  box-shadow: 0 4px 16px rgba(201,98,122,0.20);
}

/* Ежедневные задания */
.daily-tasks {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 18px;
}

.daily-tasks button {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 52px;
  padding: 12px 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--white);
  color: var(--text);
  cursor: pointer;
  font-size: 15px;
  font-weight: 600;
  text-align: left;
  box-shadow: var(--shadow-sm);
  transition: all 0.2s;
}

.daily-tasks button span {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  border-radius: 50%;
  background: var(--rose-pale);
  color: var(--rose);
  font-size: 16px;
  font-weight: 900;
}

.daily-tasks button.done {
  background: linear-gradient(135deg, #f0faf0, #e8f5e8);
  border-color: rgba(122,158,126,0.3);
  color: var(--sage);
}

.daily-tasks button.done span {
  background: var(--sage-pale);
  color: var(--sage);
}

/* Награды */
.reward-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.reward-card {
  padding: 16px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--white);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.reward-card:nth-child(1) { background: linear-gradient(145deg, #fffdf5, #fdf3d8); }
.reward-card:nth-child(2) { background: linear-gradient(145deg, #f8fdf8, #edf5ed); }
.reward-card:nth-child(3) { background: linear-gradient(145deg, #fdf8fc, #f5eaf3); }

.reward-card-icon {
  font-size: 30px;
  line-height: 1;
  margin-bottom: 2px;
}

.reward-card strong {
  display: block;
  font-size: 14px;
  font-weight: 800;
  color: var(--text);
  line-height: 1.2;
}

.reward-card p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
  flex: 1;
}

.chest-card.ready { animation: readyPulse 2s ease-in-out infinite; }

/* ── Дорожка радости ────────────────────────────────────────────────────── */
.joy-path {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-bottom: 16px;
}

.joy-path article {
  padding: 14px 8px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--white);
  text-align: center;
  box-shadow: var(--shadow-sm);
}

.joy-path article:nth-child(1) { background: linear-gradient(145deg, #fff5f0, #fce8ed); }
.joy-path article:nth-child(2) { background: linear-gradient(145deg, #fffdf5, #fdf3d8); }
.joy-path article:nth-child(3) { background: linear-gradient(145deg, #f8fdf8, #edf5ed); }
.joy-path article:nth-child(4) { background: linear-gradient(145deg, #fdf8fc, #f5eaf3); }

.joy-path span {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--rose);
  color: var(--white);
  font-weight: 900;
  font-size: 15px;
  margin-bottom: 6px;
}

.joy-path p {
  margin: 0;
  color: var(--text2);
  font-size: 13px;
  font-weight: 700;
}

/* ── Сад идей ───────────────────────────────────────────────────────────── */
.garden-board {
  margin-bottom: 16px;
  padding: 24px;
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background: linear-gradient(145deg, #f8fdf8 0%, #faf5f8 100%);
  box-shadow: var(--shadow-md);
}

.garden-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.garden-card {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 130px;
  padding: 16px 14px;
  border: 1px solid rgba(255,255,255,0.9);
  border-radius: var(--r-md);
  cursor: pointer;
  font: inherit;
  text-align: left;
  box-shadow: var(--shadow-sm);
  transition: transform 0.15s, box-shadow 0.15s;
}

.garden-card:hover  { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.garden-card:active { transform: translateY(0); }
.garden-card.active { box-shadow: 0 0 0 2px var(--primary), var(--shadow-md); transform: translateY(-1px); }

.garden-card:nth-child(1) { background: linear-gradient(145deg, #fffdf5, #fdf3d8); }
.garden-card:nth-child(2) { background: linear-gradient(145deg, #fff5f0, #fce8ed); }
.garden-card:nth-child(3) { background: linear-gradient(145deg, #f8fdf8, #edf5ed); }

.garden-icon {
  font-size: 32px;
  line-height: 1;
  margin-bottom: 8px;
}

.garden-card strong {
  display: block;
  font-size: 14px;
  font-weight: 800;
  color: var(--text);
  line-height: 1.3;
  margin-bottom: 4px;
}

.garden-card p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}

/* ── Открытый контент ───────────────────────────────────────────────────── */
.content-strip {
  margin-bottom: 16px;
  padding: 24px;
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background: linear-gradient(145deg, #ffffff 0%, #fdf6ee 100%);
  box-shadow: var(--shadow-md);
}

.content-card {
  padding: 18px;
  border-radius: var(--r-md);
  background: var(--rose-pale);
  border: 1px solid rgba(201,98,122,0.15);
}

.content-card strong {
  display: block;
  font-size: 16px;
  font-weight: 800;
  color: var(--rose-dark);
  margin-bottom: 8px;
}

.content-card p {
  margin: 0;
  color: var(--text2);
  font-size: 15px;
  line-height: 1.6;
}

/* ── Бейджи ─────────────────────────────────────────────────────────────── */
.badges {
  margin-bottom: 16px;
  padding: 24px;
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background: linear-gradient(145deg, #fffdf5 0%, #fdf3d8 50%, #fce8ed 100%);
  box-shadow: var(--shadow-md);
}

.badge-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

.badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100px;
  padding: 14px 8px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--white);
  text-align: center;
  box-shadow: var(--shadow-sm);
  transition: transform 0.15s;
}

.badge.unlocked {
  background: linear-gradient(145deg, var(--rose-pale), #fdf0f5);
  border-color: rgba(201,98,122,0.25);
  box-shadow: 0 6px 20px rgba(201,98,122,0.18);
}

.badge.unlocked:nth-child(2) { background: linear-gradient(145deg, var(--gold-pale), #fef8e0); border-color: rgba(200,146,42,0.25); }
.badge.unlocked:nth-child(3) { background: linear-gradient(145deg, var(--sage-pale), #e8f5e8); border-color: rgba(122,158,126,0.25); }
.badge.unlocked:nth-child(4) { background: linear-gradient(145deg, var(--plum-pale), #f0e8f0); border-color: rgba(122,72,112,0.25); }

.badge-icon { font-size: 32px; line-height: 1; margin-bottom: 6px; }
.badge.locked .badge-icon { filter: grayscale(1); opacity: 0.4; }

.badge p {
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  color: var(--text2);
  line-height: 1.3;
}

.badge.locked p { color: var(--muted); }

/* ── Коллекции ──────────────────────────────────────────────────────────── */
.collections-board {
  margin-bottom: 16px;
  padding: 24px;
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background: var(--white);
  box-shadow: var(--shadow-md);
}

.collection-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.collection-list article {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--cream);
}

.collection-list article:nth-child(1) { background: linear-gradient(135deg, #fffdf5, #fdf3d8); }
.collection-list article:nth-child(2) { background: linear-gradient(135deg, #fff5f0, #fce8ed); }
.collection-list article:nth-child(3) { background: linear-gradient(135deg, #f8fdf8, #edf5ed); }
.collection-list article:nth-child(4) { background: linear-gradient(135deg, #fdf8fc, #f5eaf3); }
.collection-list article:nth-child(5) { background: linear-gradient(135deg, #fffdf5, #fdf3d8); }

.collection-list strong {
  display: block;
  font-size: 15px;
  font-weight: 800;
  color: var(--text);
  margin-bottom: 2px;
}

.collection-list p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
}

.collection-list > article > div { flex: 1; }

.collection-list span {
  flex: 0 0 80px;
  height: 8px;
  border-radius: 999px;
  background: rgba(0,0,0,0.08);
  overflow: hidden;
}

.collection-list span i {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--rose), var(--gold));
  min-width: 4px;
}

/* ── Прогресс ───────────────────────────────────────────────────────────── */
.progress-board {
  margin-bottom: 16px;
  padding: 24px;
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background: var(--white);
  box-shadow: var(--shadow-md);
}

.progress-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.progress-list article {
  padding: 18px 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  text-align: center;
  box-shadow: var(--shadow-sm);
}

.progress-list article:nth-child(1) { background: linear-gradient(145deg, #fff5f0, #fce8ed); }
.progress-list article:nth-child(2) { background: linear-gradient(145deg, #fffdf5, #fdf3d8); }
.progress-list article:nth-child(3) { background: linear-gradient(145deg, #f8fdf8, #edf5ed); }

.progress-list strong {
  display: block;
  font-family: var(--font-serif);
  font-size: 32px;
  font-weight: 700;
  color: var(--rose-dark);
  line-height: 1;
  margin-bottom: 6px;
}

.progress-list p { margin: 0; color: var(--muted); font-size: 13px; font-weight: 600; }

.progress-note {
  margin-top: 16px;
  padding: 14px 16px;
  border-radius: var(--r-md);
  background: var(--rose-pale);
  color: var(--text2);
  font-size: 14px;
  line-height: 1.5;
}

/* ── Календарь месяца ───────────────────────────────────────────────────── */
.month-board {
  margin-bottom: 16px;
  padding: 24px;
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background: var(--white);
  box-shadow: var(--shadow-md);
}

.month-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  margin-bottom: 8px;
  text-align: center;
}

.month-weekdays span { color: var(--muted); font-size: 13px; font-weight: 700; }

.month-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}

.month-day {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  border-radius: 50%;
  font-size: 14px;
  font-weight: 600;
  color: var(--muted);
}

.month-day.active { background: var(--rose); color: var(--white); font-weight: 700; }
.month-day.today  { border: 2px solid var(--rose); color: var(--rose-dark); font-weight: 800; }
.month-day.today.active { border-color: transparent; }
.month-name { font-size: 14px; font-weight: 700; color: var(--muted); }

/* ── История ────────────────────────────────────────────────────────────── */
.history-board {
  margin-bottom: 16px;
  padding: 24px;
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background: var(--white);
  box-shadow: var(--shadow-md);
}

.history-list article {
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--cream);
  margin-bottom: 8px;
}

.history-list strong { display: block; font-size: 13px; color: var(--rose); margin-bottom: 2px; }
.history-list p { margin: 0; font-size: 14px; color: var(--text2); }
.empty-note { color: var(--muted); font-size: 14px; }

/* ── Предпочтения ───────────────────────────────────────────────────────── */
.prefs-board {
  margin-bottom: 16px;
  padding: 24px;
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background: var(--white);
  box-shadow: var(--shadow-md);
}

.prefs-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.prefs-grid label {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--cream);
  color: var(--text);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s;
}

.prefs-grid label:hover { background: var(--rose-pale); }
.prefs-grid input { width: 18px; height: 18px; accent-color: var(--rose); }

/* ── Социальные кнопки ──────────────────────────────────────────────────── */
.social-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 20px 0 8px;
}

.social-button {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 68px;
  padding: 14px 18px;
  border: none;
  border-radius: var(--r-lg);
  cursor: pointer;
  font: inherit;
  font-size: 15px;
  font-weight: 800;
  color: var(--white);
  text-align: left;
  box-shadow: var(--shadow-md);
  transition: transform 0.15s, box-shadow 0.15s;
}

.social-button:hover  { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.social-button:active { transform: translateY(0); }

.invite-button {
  background: linear-gradient(135deg, var(--sage), #4a7a50);
}

.share-button {
  background: linear-gradient(135deg, var(--rose), var(--plum));
}

.social-icon {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  border-radius: var(--r-sm);
  background: rgba(255,255,255,0.25);
  font-size: 22px;
}

/* ── Блок сообщества (завуалированный) ──────────────────────────────────── */
.community-block {
  margin-bottom: 16px;
  padding: 20px 24px;
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background: linear-gradient(145deg, #fffdf5 0%, #fdf3d8 100%);
  box-shadow: var(--shadow-sm);
}

.community-block p {
  margin: 0 0 12px;
  color: var(--text2);
  font-size: 15px;
  line-height: 1.5;
}

.community-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--rose), var(--rose-dark));
  color: var(--white);
  font-size: 14px;
  font-weight: 800;
  text-decoration: none;
  box-shadow: 0 4px 14px rgba(160,64,96,0.25);
  transition: transform 0.15s;
}

.community-link:hover { transform: translateY(-1px); }

/* ── Таббар ─────────────────────────────────────────────────────────────── */
.tabbar {
  position: fixed;
  left: 50%;
  bottom: 0;
  z-index: 10;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  width: min(680px, 100%);
  gap: 8px;
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
  background: rgba(253,246,238,0.96);
  border: 1px solid rgba(255,255,255,0.9);
  border-bottom: none;
  border-radius: 28px 28px 0 0;
  transform: translateX(-50%);
  box-shadow: 0 -8px 32px rgba(100,40,60,0.14);
  backdrop-filter: blur(12px);
}

.tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 52px;
  padding: 6px 8px;
  border: none;
  border-radius: var(--r-md);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
  transition: all 0.2s;
}

.tab-icon-wrap {
  font-size: 22px;
  line-height: 1;
}

.tab.active {
  background: linear-gradient(145deg, var(--rose-pale), #fdf0f5);
  color: var(--rose-dark);
  box-shadow: var(--shadow-sm);
}

/* ── Кнопки ─────────────────────────────────────────────────────────────── */
.primary-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 12px 24px;
  border: none;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--rose), var(--rose-dark));
  color: var(--white);
  cursor: pointer;
  font-size: 15px;
  font-weight: 800;
  box-shadow: 0 6px 18px rgba(160,64,96,0.28);
  transition: transform 0.15s, box-shadow 0.15s;
}

.primary-button:hover  { transform: translateY(-1px); box-shadow: 0 8px 22px rgba(160,64,96,0.32); }
.primary-button:active { transform: translateY(0); }

.secondary-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 10px 20px;
  border: 2px solid var(--rose-light);
  border-radius: 999px;
  background: var(--white);
  color: var(--rose-dark);
  cursor: pointer;
  font-size: 14px;
  font-weight: 700;
  transition: all 0.2s;
}

.secondary-button:hover { background: var(--rose-pale); }

.text-button {
  min-height: 36px;
  padding: 0 8px;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: var(--rose);
  cursor: pointer;
  font-size: 14px;
  font-weight: 700;
}

.icon-button {
  display: inline-grid;
  place-items: center;
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  border: none;
  border-radius: 50%;
  background: var(--white);
  color: var(--rose-dark);
  cursor: pointer;
  font-size: 20px;
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.2s;
}

.icon-button:hover { box-shadow: var(--shadow-md); }

/* ── Модалки ────────────────────────────────────────────────────────────── */
.modal {
  width: min(92vw, 480px);
  border: none;
  border-radius: var(--r-xl);
  padding: 24px;
  background: var(--white);
  box-shadow: 0 24px 64px rgba(0,0,0,0.22);
}

.modal[open] {
  max-height: min(88vh, 720px);
  overflow: auto;
}

body.modal-open { overflow: hidden; }

.modal::backdrop { background: rgba(44,26,34,0.48); }

body.modal-open::after {
  position: fixed;
  inset: 0;
  z-index: 19;
  background: rgba(44,26,34,0.48);
  content: '';
}

body.modal-open .modal[open] {
  position: fixed;
  inset: 50% auto auto 50%;
  z-index: 20;
  transform: translate(-50%, -50%);
}

.modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
}

.modal-head h2 {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 22px;
  color: var(--rose-dark);
}

.game-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
  padding: 10px 16px;
  border-radius: var(--r-md);
  background: var(--rose-pale);
  font-weight: 700;
  color: var(--rose-dark);
}

.answer-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.answer-list button {
  min-height: 52px;
  padding: 12px 16px;
  border: 2px solid var(--line);
  border-radius: var(--r-md);
  background: var(--white);
  color: var(--text);
  cursor: pointer;
  font-size: 15px;
  font-weight: 600;
  text-align: left;
  transition: all 0.2s;
}

.answer-list button:hover {
  border-color: var(--rose-light);
  background: var(--rose-pale);
  color: var(--rose-dark);
}

/* Игра «Найди пару» */
.memory-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

.memory-card {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  border: 2px solid var(--line);
  border-radius: var(--r-md);
  background: linear-gradient(145deg, var(--rose-pale), #fdf0f5);
  cursor: pointer;
  font-size: 28px;
  transition: transform 0.15s;
}

.memory-card:hover { transform: scale(1.04); }
.memory-card.open, .memory-card.done {
  background: linear-gradient(145deg, var(--gold-pale), #fef8e0);
  border-color: rgba(200,146,42,0.3);
}

/* Букет */
.bouquet-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

.bouquet-card {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  border: 2px solid var(--line);
  border-radius: var(--r-md);
  background: linear-gradient(145deg, #f8fdf8, #edf5ed);
  cursor: pointer;
  font-size: 32px;
  transition: transform 0.15s;
}

.bouquet-card:hover { transform: scale(1.06); }

/* Открытка */
.postcard-preview {
  display: grid;
  gap: 10px;
  min-height: 180px;
  margin-bottom: 16px;
  padding: 24px;
  border-radius: var(--r-lg);
  background: linear-gradient(135deg, var(--rose), var(--plum));
  color: var(--white);
  box-shadow: var(--shadow-lg);
}

.postcard-preview strong { font-family: var(--font-serif); font-size: 22px; }
.postcard-preview span   { font-family: var(--font-serif); font-size: 36px; font-weight: 700; }
.postcard-preview p      { margin: 0; opacity: 0.9; font-size: 15px; }

.modal-action { width: 100%; }

/* ── Тост ───────────────────────────────────────────────────────────────── */
.toast {
  position: fixed;
  left: 50%;
  bottom: calc(88px + env(safe-area-inset-bottom));
  z-index: 30;
  max-width: min(440px, calc(100vw - 32px));
  padding: 14px 20px;
  border-radius: 999px;
  background: var(--text);
  color: var(--white);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 14px);
  transition: opacity 0.22s, transform 0.22s;
  box-shadow: 0 8px 24px rgba(0,0,0,0.28);
}

.toast.visible { opacity: 1; transform: translate(-50%, 0); }

/* ── Футер / правовые ссылки ────────────────────────────────────────────── */
.legal {
  margin-top: 20px;
  text-align: center;
  color: var(--muted);
  font-size: 13px;
}

.legal a { color: var(--rose); text-decoration: none; }
.legal a:hover { text-decoration: underline; }

/* ── Вспомогательные классы ─────────────────────────────────────────────── */
.is-hidden { display: none !important; }

.badge-stack-preview {
  display: flex;
  gap: 3px;
  justify-content: center;
  align-items: center;
  margin-bottom: 4px;
}

.badge-stack-preview i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--rose), var(--plum));
}

.badge-stack-preview b { font-size: 11px; color: var(--muted); }

.streak-lights {
  display: flex;
  gap: 4px;
  justify-content: center;
  margin-bottom: 4px;
}

.streak-lights i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(200,146,42,0.3);
}

/* ── Анимации ───────────────────────────────────────────────────────────── */
@keyframes readyPulse {
  0%, 100% { box-shadow: var(--shadow-sm); }
  50%       { box-shadow: 0 8px 28px rgba(200,146,42,0.36); }
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

.card, .hero-panel, .stat-card, .reward-card, .garden-card, .badge {
  animation: fadeUp 0.3s ease both;
}

/* ── Адаптив ────────────────────────────────────────────────────────────── */
@media (max-width: 520px) {
  h1 { font-size: 22px; }
  .hero-panel h2 { font-size: 24px; }
  .hero-actions { grid-template-columns: 1fr; }
  .mood-picker  { grid-template-columns: 1fr; }
  .reward-row   { grid-template-columns: 1fr; }
  .garden-grid  { grid-template-columns: 1fr; }
  .badge-list   { grid-template-columns: repeat(2, 1fr); }
  .progress-list { grid-template-columns: 1fr; }
  .prefs-grid   { grid-template-columns: 1fr 1fr; }
  .social-actions { grid-template-columns: 1fr; }
  .joy-path     { grid-template-columns: repeat(2, 1fr); }
  .daily-prize  { flex-direction: column; }
  .daily-prize .primary-button { width: 100%; }
}

@media (max-width: 360px) {
  .stats-grid { grid-template-columns: 1fr; }
  .hero-actions { grid-template-columns: 1fr; }
}

/* ── Мини-колесо и сундук ───────────────────────────────────────────────── */
.mini-wheel {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: conic-gradient(var(--rose) 0 25%, var(--gold) 25% 50%, var(--sage) 50% 75%, var(--plum) 75%);
  box-shadow: var(--shadow-sm);
  margin-bottom: 4px;
}

.mini-wheel.spinning { animation: spin 0.82s ease-out; }

.mini-chest {
  width: 40px;
  height: 36px;
  border-radius: 10px 10px 8px 8px;
  background: linear-gradient(135deg, var(--gold-light), var(--gold));
  box-shadow: var(--shadow-sm);
  margin-bottom: 4px;
}

.mini-chest i {
  display: block;
  height: 13px;
  border-radius: 6px 6px 0 0;
  background: linear-gradient(135deg, var(--gold), var(--terra));
}

.mini-postcard {
  width: 40px;
  height: 30px;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--rose), var(--plum));
  box-shadow: var(--shadow-sm);
  margin-bottom: 4px;
}

/* ── Символы памяти (игра) ──────────────────────────────────────────────── */
.memory-symbol {
  font-size: 28px;
  line-height: 1;
  display: inline-block;
}
/* Emoji-иконки для карточек игры «Найди пару» и «Собери букет» */
.memory-back {
  font-size: 22px;
  opacity: 0.45;
  display: inline-block;
}
.memory-bloom::before  { content: '🌸'; }
.memory-tea::before    { content: '🍵'; }
.memory-leaf::before   { content: '🌿'; }
.memory-berry::before  { content: '🍓'; }
.memory-sun::before    { content: '☀️'; }
.memory-letter::before { content: '💌'; }

/* ── Иконки вкладок ─────────────────────────────────────────────────────── */
.tab-icon, .tab-icon-wrap { font-size: 22px; }

/* ── Рекомендация после мини-игры ───────────────────────────────────────── */
.promo-dialog {
  width: min(90vw, 344px);
  padding: 14px;
  overflow: hidden;
}

.promo-dialog[open] {
  max-height: min(86vh, 680px);
}

.promo-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.promo-label {
  margin: 0;
  color: var(--rose-dark);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.promo-card-link {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 0.72;
  overflow: hidden;
  border-radius: calc(var(--r-lg) - 2px);
  background: linear-gradient(145deg, var(--rose-pale), var(--gold-pale));
  box-shadow: inset 0 0 0 1px rgba(116, 67, 80, 0.10);
  color: var(--white);
  text-decoration: none;
}

.promo-card-link img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform 180ms cubic-bezier(0.23, 1, 0.32, 1);
}

.promo-image-shade {
  position: absolute;
  inset: auto 0 0;
  height: 30%;
  background: linear-gradient(transparent, rgba(42, 20, 28, 0.60));
  pointer-events: none;
}

.promo-image-caption {
  position: absolute;
  right: 12px;
  bottom: 12px;
  left: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.93);
  color: var(--rose-dark);
  font-size: 14px;
  font-weight: 800;
  box-shadow: 0 4px 16px rgba(42, 20, 28, 0.14);
}

.promo-card-link:hover img,
.promo-card-link:focus-visible img {
  transform: scale(1.025);
}

.promo-card-link:focus-visible {
  outline: 3px solid var(--rose);
  outline-offset: 3px;
}

.promo-dialog h2 {
  margin: 14px 4px 5px;
  color: var(--rose-dark);
  font-family: var(--font-serif);
  font-size: 22px;
  line-height: 1.14;
}

.promo-dialog p:not(.promo-label) {
  margin: 0 4px 4px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.45;
}

html[data-platform="ok"] .promo-image-caption {
  color: #b65a21;
}

@media (prefers-reduced-motion: no-preference) {
  .promo-dialog[open] {
    animation: promo-dialog-in 220ms cubic-bezier(0.23, 1, 0.32, 1) both;
  }

  @keyframes promo-dialog-in {
    from { opacity: 0; transform: translate(-50%, calc(-50% + 12px)) scale(0.97); }
    to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  }
}

@media (max-height: 650px) {
  .promo-dialog { width: min(76vw, 300px); }
  .promo-dialog h2 { font-size: 20px; margin-top: 10px; }
  .promo-dialog p:not(.promo-label) { display: none; }
}