/* ВЫХОД V0.8 - визуальная система. Тёмная, спокойная, некричащая эстетика.
   Вдохновлена структурой популярных health-приложений (градиентная карточка сверху,
   плитки-разделы), но с собственной палитрой и без агрессивной геймификации. */

:root {
  --bg: #0a0d12;
  --bg-soft: #0f131b;
  --card: rgba(255, 255, 255, 0.045);
  --card-border: rgba(255, 255, 255, 0.09);
  --card-hover: rgba(255, 255, 255, 0.07);
  --text: #f2f5f7;
  --text-muted: #9aa7b5;
  --text-faint: #6c7684;
  --accent: #5fd8c4;
  --accent-strong: #3fc9ae;
  --accent-soft: rgba(95, 216, 196, 0.14);
  --violet: #9086f0;
  --violet-soft: rgba(144, 134, 240, 0.16);
  --amber: #e8b768;
  --amber-soft: rgba(232, 183, 104, 0.14);
  --danger: #ea8b8b;
  --danger-soft: rgba(234, 139, 139, 0.14);
  --success: #6fd6a0;
  --success-soft: rgba(111, 214, 160, 0.14);
  --radius-lg: 26px;
  --radius-md: 18px;
  --radius-sm: 12px;
  --shadow-card: 0 12px 32px rgba(0, 0, 0, 0.35);
  --max-width: 480px;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }

html {
  overflow-x: hidden;
}

body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  /* overflow-x здесь не ставим: иначе ломается «липкая» верхняя панель. */
}

body.large-text { font-size: 118%; }
body.reduced-motion *, body.reduced-motion *::before, body.reduced-motion *::after {
  animation-duration: 0.001ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.001ms !important;
  scroll-behavior: auto !important;
}

button, input, textarea, select { font-family: inherit; color: inherit; }

a { color: var(--accent); }

#app {
  min-height: 100vh;
  width: 100%;
  display: flex;
  justify-content: center;
  background:
    radial-gradient(1200px 600px at 15% -10%, rgba(95, 216, 196, 0.08), transparent 60%),
    radial-gradient(1000px 700px at 110% 10%, rgba(144, 134, 240, 0.07), transparent 55%),
    var(--bg);
}

.shell {
  width: 100%;
  max-width: var(--max-width);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  position: relative;
  padding-bottom: 92px;
}

@media (min-width: 900px) {
  .shell { max-width: 560px; padding-top: 18px; }
  #app { align-items: flex-start; }
}

/* ---------- Верхняя панель ---------- */

/* V0.15: панель с кнопкой «назад» прилипает к верху - не нужно листать обратно наверх. */
.topbar {
  position: sticky;
  top: 0;
  z-index: 25;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 14px 18px 12px;
  background: linear-gradient(180deg, var(--bg) 62%, rgba(10, 13, 18, 0.86) 100%);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
}
.topbar.scrolled { border-bottom-color: var(--card-border); }

.logo {
  font-weight: 700;
  letter-spacing: 5px;
  font-size: 15px;
  color: var(--text);
  opacity: 0.92;
}

.icon-btn {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: var(--card);
  border: 1px solid var(--card-border);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 18px;
  color: var(--text);
}
.icon-btn:active { background: var(--card-hover); }

.top-nav-link {
  font-size: 13px;
  color: var(--text-muted);
  padding: 8px 10px;
  cursor: pointer;
}
.top-nav-link.exit { position: sticky; top: 0; z-index: 5; }

/* ---------- Герой-карточка со свайпом ---------- */

.hero {
  margin: 4px 16px 18px;
  border-radius: var(--radius-lg);
  padding: 22px 20px 18px;
  background: linear-gradient(160deg, #16233f 0%, #23193f 48%, #123a3c 100%);
  box-shadow: var(--shadow-card);
  position: relative;
  overflow: hidden;
  min-height: 176px;
}
.hero::after {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(220px 140px at 85% -10%, rgba(255,255,255,0.10), transparent 60%);
  pointer-events: none;
}
/* Зазор между слайдами больше правого отступа карточки: иначе край второго слайда
   выглядывает справа, потому что overflow обрезает по внешней границе, а не по контенту. */
.hero-track { display: flex; gap: 40px; transition: transform 0.35s ease; }
.hero-slide { min-width: 100%; flex: 0 0 100%; }
.hero-eyebrow {
  font-size: 12px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.62);
  margin-bottom: 8px;
}
.hero-headline {
  font-size: 30px;
  font-weight: 700;
  line-height: 1.15;
  margin: 0 0 4px;
}
.hero-sub { font-size: 14px; color: rgba(255,255,255,0.75); margin: 0 0 14px; }
.hero-metric-row { display: flex; gap: 22px; margin-top: 10px; flex-wrap: wrap; }
.hero-metric-value { font-size: 20px; font-weight: 700; }
.hero-metric-label { font-size: 11px; color: rgba(255,255,255,0.6); margin-top: 2px; }

.hero-dots { display: flex; gap: 6px; justify-content: center; margin-top: 14px; position: relative; z-index: 2; }
.hero-dot { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,0.28); cursor: pointer; }
.hero-dot.active { background: #fff; width: 16px; border-radius: 4px; }

.impulse-visual {
  width: 74px; height: 74px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, rgba(144,134,240,0.55), rgba(95,216,196,0.18) 60%, transparent 75%);
  display: flex; align-items: center; justify-content: center;
  position: relative;
  margin-bottom: 10px;
}
.impulse-visual::before {
  content: "";
  position: absolute; inset: 10px;
  border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,0.35);
}
.impulse-visual.pulse { animation: impulse-pulse 2.6s ease-in-out infinite; }
@keyframes impulse-pulse { 0%,100% { transform: scale(1); opacity: 0.9; } 50% { transform: scale(1.08); opacity: 1; } }

/* ---------- V0.9.1: живые счётчики и блок старта ---------- */

.hero-headline.dim { opacity: 0.45; }
.hero-clock-second {
  font-size: 13px; color: rgba(255,255,255,0.72); margin: 2px 0 12px;
  font-variant-numeric: tabular-nums;
}
.hero-clock-strong { font-weight: 700; color: #fff; }
/* Моноширинные цифры: секунды не должны дёргать вёрстку при каждом тике. */
.hero-headline, .hero-clock-second, .incident-stat-value { font-variant-numeric: tabular-nums; }
.hero-headline { font-feature-settings: "tnum" 1; }

.start-block {
  background: linear-gradient(150deg, rgba(95,216,196,0.16), rgba(144,134,240,0.12));
  border: 1px solid rgba(95,216,196,0.35);
  border-radius: var(--radius-md);
  padding: 18px 16px;
  text-align: center;
}
.start-block-title { font-size: 16px; font-weight: 700; margin-bottom: 6px; }
.start-block-text { font-size: 13px; color: var(--text-muted); line-height: 1.5; margin-bottom: 14px; }
.start-btn { font-size: 15px; padding: 15px 18px; }
.start-block-link {
  margin-top: 10px; font-size: 12.5px; color: var(--text-muted);
  text-decoration: underline; cursor: pointer;
}

.clock-tools {
  display: flex; gap: 14px; flex-wrap: wrap;
  font-size: 12px; color: var(--text-faint);
}
.clock-tools span { cursor: pointer; text-decoration: underline; }

/* ---------- V0.9.1: «Старый импульс» как персонаж ---------- */

.impulse-figure {
  position: relative;
  cursor: pointer;
  flex-shrink: 0;
  animation: imp-drift var(--imp-pulse, 3s) ease-in-out infinite;
  transition: transform 0.18s ease;
}
.impulse-figure svg { width: 100%; height: 100%; display: block; overflow: visible; }
.impulse-figure.corner {
  position: absolute; right: 10px; bottom: 6px; z-index: 1; pointer-events: auto;
}
.imp-body { fill: rgba(144,134,240,0.55); stroke: rgba(255,255,255,0.35); stroke-width: 1.5; }
.imp-sheen { fill: rgba(255,255,255,0.18); }
.imp-shadow { fill: rgba(0,0,0,0.28); }
.imp-eye-white { fill: rgba(255,255,255,0.92); }
.imp-pupil { fill: #1b2030; }
.imp-eye-closed { stroke: rgba(255,255,255,0.85); stroke-width: 2.6; fill: none; stroke-linecap: round; }
.imp-mouth { stroke: rgba(255,255,255,0.72); stroke-width: 2.4; fill: none; stroke-linecap: round; }

/* Беспокойный: быстро дрожит, цвет теплее. Спокойный: почти неподвижен. */
.impulse-figure.restless { animation-name: imp-jitter; }
.impulse-figure.restless .imp-body { fill: rgba(232,183,104,0.5); }
.impulse-figure.calm .imp-body { fill: rgba(95,216,196,0.42); }
.impulse-figure.stage-quiet .imp-body { fill: rgba(111,214,160,0.36); }

@keyframes imp-drift {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(calc(var(--imp-drift, 3px) * -0.5), -3px) scale(1.03); }
}
@keyframes imp-jitter {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  25% { transform: translate(var(--imp-drift, 4px), -2px) rotate(2deg); }
  50% { transform: translate(calc(var(--imp-drift, 4px) * -1), -3px) rotate(-2deg); }
  75% { transform: translate(calc(var(--imp-drift, 4px) * 0.6), -1px) rotate(1.5deg); }
}
/* Реакция на тык: отшатывается и сжимается - без образов боли. */
.impulse-figure.poked { animation: imp-poked 0.85s ease-out; }
@keyframes imp-poked {
  0% { transform: translate(0,0) scale(1); }
  18% { transform: translate(-10px, -6px) scale(0.86); }
  40% { transform: translate(6px, 0) scale(1.05); }
  70% { transform: translate(-3px, -2px) scale(0.97); }
  100% { transform: translate(0,0) scale(1); }
}
.reduced-motion .impulse-figure { animation: none !important; }

/* ---------- V0.9.1: шаги техники в мини-уроках ---------- */

.lesson-step { display: flex; gap: 10px; align-items: flex-start; margin-top: 10px; font-size: 13.5px; line-height: 1.5; }
.lesson-step-num {
  flex-shrink: 0; width: 20px; height: 20px; border-radius: 50%;
  background: var(--accent-soft); color: var(--accent);
  font-size: 11px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}

/* ---------- V0.9: постоянный виджет «Старый импульс» на главном экране ---------- */

.impulse-widget {
  display: flex; align-items: center; gap: 14px;
  background: var(--card); border: 1px solid var(--card-border);
  border-radius: var(--radius-md); padding: 14px 16px; cursor: pointer;
}
.impulse-widget:active { background: var(--card-hover); }
.impulse-orb-wrap { width: 60px; height: 60px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.impulse-orb {
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, rgba(144,134,240,0.6), rgba(95,216,196,0.2) 60%, transparent 76%);
  border: 1.5px solid rgba(255,255,255,0.25);
  animation-name: impulse-breathe;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}
@keyframes impulse-breathe { 0%,100% { transform: scale(1); } 50% { transform: scale(1.1); } }
.reduced-motion .impulse-orb { animation: none; }
.impulse-widget-title { font-size: 13.5px; font-weight: 600; }
.impulse-widget-sub { font-size: 11.5px; color: var(--text-muted); margin-top: 2px; }
.impulse-widget-arrow { margin-left: auto; color: var(--text-faint); font-size: 16px; }

/* ---------- V0.9: карточка честного инцидента после сигареты ---------- */

.incident-card .card-kicker { color: var(--amber); }
.incident-stats { display: flex; gap: 18px; margin-top: 10px; flex-wrap: wrap; }
.incident-stat-value { font-size: 18px; font-weight: 700; }
.incident-stat-label { font-size: 11px; color: var(--text-muted); margin-top: 2px; }

/* ---------- V0.9: чипы вех первых 72 часов ---------- */

.milestone-chip-row { display: flex; gap: 8px; overflow-x: auto; padding: 2px 0 6px; }
.milestone-chip {
  flex-shrink: 0; padding: 8px 12px; border-radius: var(--radius-sm);
  background: var(--card); border: 1px solid var(--card-border);
  font-size: 11.5px; color: var(--text-faint); text-align: center; min-width: 68px;
}
.milestone-chip.reached { background: var(--success-soft); border-color: rgba(111,214,160,0.4); color: var(--success); font-weight: 600; }

.hero-badge {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(255,255,255,0.12);
  border-radius: 999px; padding: 4px 10px; font-size: 11px; margin-top: 8px;
}

/* ---------- Плитки-разделы ---------- */

.tile-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  padding: 0 16px 18px;
}
.tile-grid.single { grid-template-columns: 1fr; }
.tile {
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-md);
  padding: 15px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.1s ease;
  grid-column: span 1;
  min-width: 0;
  max-width: 100%;
}
.tile.wide { grid-column: span 2; }
.tile:active { transform: scale(0.98); background: var(--card-hover); }
.tile-icon {
  width: 40px; height: 40px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 19px; flex-shrink: 0;
}
.tile > div:last-child { min-width: 0; flex: 1 1 auto; }
.tile-title { font-size: 14px; font-weight: 600; margin: 0; overflow-wrap: break-word; hyphens: auto; }
.tile-sub { font-size: 11.5px; color: var(--text-muted); margin: 2px 0 0; overflow-wrap: break-word; }

.icon-teal { background: var(--accent-soft); color: var(--accent); }
.icon-violet { background: var(--violet-soft); color: var(--violet); }
.icon-amber { background: var(--amber-soft); color: var(--amber); }
.icon-danger { background: var(--danger-soft); color: var(--danger); }
.icon-success { background: var(--success-soft); color: var(--success); }

/* ---------- Общие карточки/секции ---------- */

.section { padding: 0 16px 18px; }
.section-title { font-size: 13px; text-transform: uppercase; letter-spacing: 1px; color: var(--text-muted); margin: 0 0 10px; }
.card {
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-md);
  padding: 16px;
  margin-bottom: 12px;
}
.card.accent { border-color: rgba(95,216,196,0.35); }
.card.warm { border-color: rgba(232,183,104,0.35); }
.card-title { font-size: 16px; font-weight: 700; margin: 0 0 6px; }
.card-text { font-size: 14px; line-height: 1.5; color: var(--text-muted); margin: 0; }
.card-kicker { font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.8px; color: var(--accent); margin: 0 0 6px; }

.pill { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 999px; font-size: 12px; background: var(--card); border: 1px solid var(--card-border); color: var(--text-muted); }
.pill.success { background: var(--success-soft); color: var(--success); border-color: transparent; }
.pill.amber { background: var(--amber-soft); color: var(--amber); border-color: transparent; }
.pill.danger { background: var(--danger-soft); color: var(--danger); border-color: transparent; }

/* ---------- Кнопки ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 100%;
  padding: 14px 18px;
  border-radius: var(--radius-sm);
  border: none;
  font-size: 15px; font-weight: 600;
  cursor: pointer;
  margin-bottom: 10px;
  background: var(--accent);
  color: #06231d;
}
.btn:active { background: var(--accent-strong); }
.btn.secondary { background: var(--card); color: var(--text); border: 1px solid var(--card-border); }
.btn.ghost { background: transparent; color: var(--text-muted); }
.btn.danger { background: var(--danger); color: #2a0d0d; }
.btn.small { width: auto; padding: 9px 14px; font-size: 13px; margin-bottom: 0; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-row { display: flex; gap: 10px; }
.btn-row .btn { margin-bottom: 0; }

/* ---------- Формы/выбор ---------- */

.field { margin-bottom: 16px; }
.field-label { font-size: 13px; color: var(--text-muted); margin-bottom: 6px; display: block; }
.field-helper { font-size: 12px; color: var(--text-faint); margin: -2px 0 8px; }
.input {
  width: 100%;
  background: var(--bg-soft);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-sm);
  padding: 13px 14px;
  color: var(--text);
  /* Ровно 16px: при меньшем шрифте iOS сам увеличивает страницу на фокусе,
     и после этого вёрстка «выезжает» за экран, а закреплённая шапка уползает. */
  font-size: 16px;
}
textarea.input { min-height: 90px; resize: vertical; }
.choice-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.choice {
  padding: 10px 14px;
  border-radius: 999px;
  background: var(--card);
  border: 1px solid var(--card-border);
  font-size: 13.5px;
  cursor: pointer;
  color: var(--text-muted);
}
.choice.selected { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.choice.block { display: block; width: 100%; text-align: left; border-radius: var(--radius-sm); padding: 13px 14px; margin-bottom: 8px; }

.scale-row { display: flex; gap: 6px; }
.scale-dot {
  flex: 1; text-align: center; padding: 10px 0; border-radius: var(--radius-sm);
  background: var(--card); border: 1px solid var(--card-border); cursor: pointer; font-weight: 700; font-size: 14px;
}
.scale-dot.selected { background: var(--accent); color: #06231d; border-color: var(--accent); }

.progress-track { height: 7px; border-radius: 4px; background: rgba(255,255,255,0.08); overflow: hidden; margin: 8px 0; }
.progress-fill { height: 100%; background: linear-gradient(90deg, var(--accent), var(--violet)); border-radius: 4px; }

.step-nav { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px 4px; }
.step-nav-text { font-size: 13px; color: var(--text-muted); cursor: pointer; }
.step-count { font-size: 11px; letter-spacing: 1px; color: var(--text-faint); text-align: center; padding: 4px 16px 12px; }

/* ---------- Нижняя навигация ---------- */

.bottom-bar {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  display: flex; justify-content: center;
  pointer-events: none;
  z-index: 20;
}
.bottom-bar-inner {
  width: 100%; max-width: var(--max-width);
  display: flex; gap: 10px;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  background: linear-gradient(180deg, transparent, var(--bg) 30%);
  pointer-events: auto;
}
@media (min-width: 900px) { .bottom-bar-inner { max-width: 560px; } }
.bottom-btn {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 10px 0;
  border-radius: var(--radius-sm);
  background: var(--card);
  border: 1px solid var(--card-border);
  cursor: pointer;
  font-size: 11px;
  color: var(--text-muted);
}
.bottom-btn.sos { background: var(--danger); color: #2a0d0d; border-color: transparent; font-weight: 700; }
.bottom-btn .emoji { font-size: 17px; }
.bottom-btn.active { color: var(--accent); border-color: var(--accent); }

/* ---------- Чат Маяка (V0.17) ---------- */

/* Чат занимает весь экран и никуда не «ездит» - прокручивается только лента сообщений. */
.chat-wrap {
  position: fixed; top: 0; right: 0; bottom: 0; left: 0;
  width: 100%; max-width: var(--max-width); margin: 0 auto;
  overflow-x: hidden;
  display: flex; flex-direction: column;
  background:
    radial-gradient(120% 60% at 50% -8%, rgba(255, 209, 102, 0.07), transparent 58%),
    radial-gradient(90% 50% at 0% 100%, rgba(144, 134, 240, 0.08), transparent 60%),
    var(--bg);
  z-index: 30;
  overscroll-behavior: contain;
}
body.chat-open { overflow: hidden; }
.chat-wrap > .section, .chat-offer, .quick-replies, .chat-boundary, .chat-composer { flex: 0 0 auto; }

/* Шапка: маяк, имя, значок ИИ и строка состояния. */
.chat-header {
  display: flex; align-items: center; gap: 12px;
  padding: calc(12px + env(safe-area-inset-top)) 16px 12px;
  flex: 0 0 auto;
  border-bottom: 1px solid var(--card-border);
  background: linear-gradient(180deg, rgba(27, 36, 64, 0.55), rgba(10, 13, 18, 0));
}
.chat-avatar {
  width: 44px; height: 44px; border-radius: 50%; overflow: hidden; flex-shrink: 0;
  box-shadow: 0 0 0 1px rgba(255, 224, 138, 0.35), 0 6px 18px rgba(255, 209, 102, 0.14);
}
.chat-who { min-width: 0; flex: 1; overflow: hidden; }
.chat-status { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-name { font-weight: 800; font-size: 16.5px; letter-spacing: 0.2px; display: flex; align-items: center; gap: 7px; }
.chat-badge {
  font-size: 9.5px; font-weight: 800; letter-spacing: 1px;
  padding: 2px 6px; border-radius: 5px;
  background: rgba(255, 209, 102, 0.16); color: var(--amber);
  border: 1px solid rgba(255, 209, 102, 0.35);
}
.chat-status { font-size: 11.5px; color: var(--text-faint); margin-top: 1px; }

/* Маяк: вращающийся луч. */
.mayak-svg { display: block; }
.mayak-beam { transform-origin: 32px 22px; animation: mayakBeam 7s linear infinite; }
@keyframes mayakBeam { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .mayak-beam { animation: none; } }

/* Лента сообщений. */
.chat-messages {
  flex: 1 1 auto; min-height: 0; min-width: 0; overflow-y: auto; overflow-x: hidden;
  -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
  padding: 12px 14px 16px; display: flex; flex-direction: column; gap: 4px;
  /* Плавная прокрутка здесь вредна: при печати ответа scrollTop не успевает за
     заданным значением, чат «решает», что человек ушёл читать выше, и бросает
     догонять низ - хвост сообщения остаётся под краем экрана. */
  scroll-behavior: auto;
}
/* Разговор «лежит» на дне ленты, как в обычном мессенджере, а не висит вверху. */
.chat-messages > :first-child { margin-top: auto; }

/* Одно сообщение: аватар слева (только у первого в группе) и «тело». */
.msg { display: flex; align-items: flex-start; gap: 8px; max-width: 100%; min-width: 0; margin-top: 2px; animation: msgIn 0.22s ease-out both; }
.msg.group-start { margin-top: 12px; }
.msg.user { flex-direction: row-reverse; }
.msg-ava { width: 30px; height: 30px; flex-shrink: 0; border-radius: 50%; overflow: hidden; margin-top: 3px; }
.msg.user .msg-ava { display: none; }
.msg-body { min-width: 0; max-width: calc(100% - 46px); display: flex; flex-direction: column; }
.msg.user .msg-body { align-items: flex-end; margin-left: auto; }
@keyframes msgIn { from { opacity: 0; transform: scale(0.985); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .msg { animation: none; } }

.bubble {
  max-width: 100%; padding: 11px 14px; border-radius: 18px;
  font-size: 14.5px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere;
}
.bubble.assistant {
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.035));
  border: 1px solid var(--card-border);
  align-self: flex-start; border-bottom-left-radius: 18px;
}
.bubble.assistant.start { border-bottom-left-radius: 5px; }
.bubble.user {
  background: linear-gradient(145deg, rgba(95, 216, 196, 0.26), rgba(95, 216, 196, 0.13));
  border: 1px solid rgba(95, 216, 196, 0.28);
  color: var(--text); align-self: flex-end; border-bottom-right-radius: 18px;
}
.bubble.user.start { border-bottom-right-radius: 5px; }
.bubble.crisis { background: var(--danger-soft); border-color: rgba(234, 139, 139, 0.45); }
.bubble-time { font-size: 10.5px; color: var(--text-faint); padding: 3px 6px 0; }

/* Разделитель дня: «Сегодня», «Вчера», дата. */
.chat-day { align-self: center; margin: 16px 0 4px; display: flex; align-items: center; gap: 10px; width: 100%; }
.chat-day::before, .chat-day::after { content: ""; flex: 1; height: 1px; background: var(--card-border); }
.chat-day span {
  display: inline-block; padding: 4px 13px; border-radius: 999px;
  background: var(--card); border: 1px solid var(--card-border);
  font-size: 11.5px; font-weight: 700; color: var(--text-muted); white-space: nowrap;
}
.chat-earlier { align-self: stretch; padding: 2px 0 6px; }
.chat-earlier .btn { width: 100%; }

/* Приветствие в пустом чате. */
.chat-hello { text-align: center; padding: 26px 18px 10px; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.chat-hello .mayak-svg { border-radius: 50%; box-shadow: 0 0 0 1px rgba(255, 224, 138, 0.3), 0 14px 40px rgba(255, 209, 102, 0.16); }
.chat-hello-title { font-size: 19px; font-weight: 800; }
.chat-hello-text { font-size: 13.5px; line-height: 1.5; color: var(--text-muted); max-width: 290px; }

/* Плашки-действия под ответом Маяка. */
.chat-actions-row { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.chat-action {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 10px 12px; border-radius: 14px; cursor: pointer; text-align: left;
  background: rgba(144, 134, 240, 0.10); border: 1px solid rgba(144, 134, 240, 0.32);
  color: var(--text); font-size: 13.5px; font-weight: 600;
}
.chat-action:active { transform: scale(0.99); }
.chat-action-ico {
  width: 26px; height: 26px; flex-shrink: 0; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(144, 134, 240, 0.22); color: #c4bdff; font-size: 13px;
}
.chat-action-label { flex: 1; min-width: 0; }
.chat-action-go { color: var(--text-faint); }

/* Быстрые ответы. */
.quick-replies { display: flex; flex-wrap: wrap; gap: 8px; padding: 8px 14px 4px; min-width: 0; }
.chip {
  padding: 9px 14px; border-radius: 999px; cursor: pointer;
  background: var(--card); border: 1px solid var(--card-border);
  color: var(--text); font-size: 13.5px; font-weight: 600;
}
.chip:active { background: var(--card-hover); }

.chat-offer {
  display: flex; align-items: center; gap: 10px; margin: 10px 14px 0;
  padding: 12px 14px; border-radius: var(--radius-md);
  background: var(--violet-soft); border: 1px solid rgba(144, 134, 240, 0.4); font-size: 13.5px;
}
.chat-offer .btn { width: auto; flex-shrink: 0; padding: 9px 14px; }
.trial-note { margin-top: 10px; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--accent-soft); border: 1px solid rgba(95, 216, 196, 0.35); font-size: 13px; line-height: 1.45; }

/* Поле ввода. */
.chat-composer { display: flex; gap: 8px; padding: 8px 14px calc(10px + env(safe-area-inset-bottom)); align-items: flex-end; min-width: 0; }
.chat-composer .input { flex: 1; border-radius: 22px; }
.chat-send {
  width: 46px; height: 46px; border-radius: 50%; flex-shrink: 0; border: none; cursor: pointer;
  background: linear-gradient(145deg, var(--accent), var(--accent-strong));
  font-size: 18px; color: #06231d;
  box-shadow: 0 6px 18px rgba(95, 216, 196, 0.25);
}
.chat-composer .input:disabled, .chat-send:disabled { opacity: 0.55; cursor: default; box-shadow: none; }

/* «Маяк думает», печать ответа и скрытые до конца печати подсказки. */
.typing-indicator { display: inline-flex; align-items: center; gap: 8px; color: var(--text-muted); }
.typing-label { font-size: 13px; }
.typing-dots { display: inline-flex; gap: 4px; }
.typing-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--amber); opacity: 0.35; animation: typingPulse 1.2s infinite ease-in-out; }
.typing-dots i:nth-child(2) { animation-delay: 0.15s; }
.typing-dots i:nth-child(3) { animation-delay: 0.3s; }
@keyframes typingPulse { 0%, 80%, 100% { opacity: 0.25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
.typing-caret { display: inline-block; width: 2px; height: 1em; margin-left: 2px; vertical-align: -2px; background: var(--amber); animation: caretBlink 0.9s steps(1) infinite; }
@keyframes caretBlink { 50% { opacity: 0; } }
/* Пока Маяк печатает, подсказки и плашки не просто прячутся, а убираются совсем:
   раньше они занимали место невидимками, и под ответом зияла пустая дыра. */
.reveal-after-typing { display: none !important; }
.revealed { animation: msgIn 0.28s ease-out both; }
@media (prefers-reduced-motion: reduce) { .typing-dots i, .typing-caret { animation: none; opacity: 0.8; } }

.chat-boundary { font-size: 11px; color: var(--text-faint); text-align: center; padding: 4px 16px 6px; }

body.large-text .bubble { font-size: 16.5px; }
body.large-text .chip, body.large-text .chat-action { font-size: 15px; }

/* ---------- Всякое ---------- */

.toast {
  position: fixed; left: 50%; bottom: 100px; transform: translateX(-50%);
  background: #16201d; border: 1px solid var(--success); color: var(--success);
  padding: 12px 18px; border-radius: 14px; font-size: 13.5px; z-index: 50; max-width: 90%; text-align: center;
  box-shadow: var(--shadow-card);
}
.spinner { width: 26px; height: 26px; border-radius: 50%; border: 3px solid var(--card-border); border-top-color: var(--accent); animation: spin 0.8s linear infinite; margin: 40px auto; }
body.reduced-motion .spinner { animation: none; border-top-color: var(--card-border); }
@keyframes spin { to { transform: rotate(360deg); } }

.empty-state { text-align: center; padding: 40px 20px; color: var(--text-muted); font-size: 14px; }

.notice-box { background: rgba(255,255,255,0.03); border: 1px dashed var(--card-border); border-radius: var(--radius-sm); padding: 12px 14px; font-size: 12.5px; color: var(--text-faint); line-height: 1.5; }

.list-row { display: flex; justify-content: space-between; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--card-border); font-size: 13.5px; }
.list-row:last-child { border-bottom: none; }

.switch-row { display: flex; justify-content: space-between; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--card-border); }
.switch-row:last-child { border-bottom: none; }
.switch { width: 44px; height: 26px; border-radius: 999px; background: var(--card-border); position: relative; cursor: pointer; flex-shrink: 0; border: none; }
.switch.on { background: var(--accent); }
.switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: transform 0.15s ease; }
.switch.on::after { transform: translateX(18px); }

.protocol-step { display: flex; align-items: flex-start; gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--card-border); }
.protocol-step:last-child { border-bottom: none; }
.check-circle { width: 24px; height: 24px; border-radius: 50%; border: 1.5px solid var(--card-border); flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 13px; cursor: pointer; margin-top: 2px; }
.check-circle.done { background: var(--success); border-color: var(--success); color: #062018; }

.overlay {
  position: fixed; inset: 0; background: rgba(4,6,10,0.72);
  display: flex; align-items: flex-end; justify-content: center; z-index: 40;
}
@media (min-width: 900px) { .overlay { align-items: center; } }
.sheet { width: 100%; max-width: var(--max-width); background: var(--bg-soft); border-radius: 24px 24px 0 0; max-height: 88vh; overflow-y: auto; padding-bottom: 24px; }
@media (min-width: 900px) { .sheet { border-radius: 24px; max-height: 80vh; } }

::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-thumb { background: var(--card-border); border-radius: 3px; }

/* V0.9.10: код для входа с другого устройства */
.link-code { font-size: 44px; font-weight: 800; letter-spacing: 6px; text-align: center; color: var(--accent); padding: 18px 0 8px; font-variant-numeric: tabular-nums; }
.link-input { font-size: 26px; letter-spacing: 6px; text-align: center; font-variant-numeric: tabular-nums; }

/* ---------- V0.9.11: питомец ---------- */
.pet-svg { display: block; overflow: visible; }
.pet-svg .pet-core, .pet-svg .pet-crust { transform-origin: 100px 164px; animation: petBreath 3.6s ease-in-out infinite; }
.pet-svg.is-asleep .pet-core, .pet-svg.is-asleep .pet-crust { animation-duration: 5.5s; }
.pet-svg .pet-eyes { transform-origin: 100px 100px; animation: petBlink 5s infinite; }
.pet-svg.is-asleep .pet-eyes { animation: none; }
.pet-svg .pet-smoke { animation: petSmoke 3s ease-in-out infinite; transform-origin: 100px 50px; }
.pet-svg .pet-ember { animation: petEmber 1.6s ease-in-out infinite; }
.pet-svg .pet-light { animation: petEmber 2.8s ease-in-out infinite; transform-origin: 100px 38px; }
.pet-svg .pet-zzz text { animation: petZ 3s ease-in-out infinite; }
.pet-svg .pet-zzz text:nth-child(2) { animation-delay: .5s; } .pet-svg .pet-zzz text:nth-child(3) { animation-delay: 1s; }
.pet-svg .pet-spark { animation: petSpark 2.4s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.pet-svg .pet-cough { animation: petCough 1.4s ease-out infinite; }
.pet-svg.mood-hungry .pet-core, .pet-svg.mood-miserable .pet-core, .pet-svg.mood-miserable .pet-crust { animation-name: petSag; }
.pet-svg.react-pet { animation: petWiggle .6s ease-in-out 2; }
.pet-svg.react-feed, .pet-svg.react-water { animation: petChomp .35s ease-in-out 3; }
.pet-svg.react-refuse { animation: petShake .12s linear 6; }
.pet-svg.react-sleep, .pet-svg.react-wake { animation: petBounce .5s ease-out 1; }
@keyframes petBreath { 0%,100% { transform: scale(1,1); } 50% { transform: scale(1.02,.985); } }
@keyframes petSag { 0%,100% { transform: scale(1,1); } 50% { transform: scale(1.03,.96); } }
@keyframes petBlink { 0%,93%,100% { transform: scaleY(1); } 95% { transform: scaleY(.1); } }
@keyframes petSmoke { 0%,100% { transform: translateX(0) scaleY(1); opacity: .9; } 50% { transform: translateX(3px) scaleY(1.08); opacity: .6; } }
@keyframes petEmber { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .7; transform: scale(1.12); } }
@keyframes petZ { 0% { opacity: 0; transform: translateY(6px); } 40% { opacity: 1; } 100% { opacity: 0; transform: translateY(-10px); } }
@keyframes petSpark { 0%,100% { opacity: .2; transform: scale(.7); } 50% { opacity: 1; transform: scale(1.1); } }
@keyframes petCough { 0% { opacity: .9; transform: translate(0,0) scale(.6); } 100% { opacity: 0; transform: translate(12px,-10px) scale(1.3); } }
@keyframes petWiggle { 0%,100% { transform: rotate(0); } 25% { transform: rotate(-5deg) scale(1.03); } 75% { transform: rotate(5deg) scale(1.03); } }
@keyframes petChomp { 0%,100% { transform: scale(1,1); } 50% { transform: scale(1.05,.94); } }
@keyframes petShake { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
@keyframes petBounce { 0% { transform: translateY(0); } 40% { transform: translateY(-10px); } 100% { transform: translateY(0); } }

.pet-corner { position: absolute; right: 6px; bottom: 26px; cursor: pointer; z-index: 2; }
.pet-home-card { display: flex; gap: 12px; align-items: center; cursor: pointer; }
.pet-home-figure { flex-shrink: 0; }
.pet-home-text { flex: 1; min-width: 0; }
.pet-mini-progress { height: 6px; border-radius: 4px; background: rgba(255,255,255,.08); overflow: hidden; margin: 8px 0 4px; }
.pet-mini-progress span { display: block; height: 100%; background: linear-gradient(90deg, #b08543, #5fd8c4); border-radius: 4px; }

.pet-screen { min-height: 100vh; transition: background .6s; }
.pet-screen.night { background: radial-gradient(circle at 50% 20%, #1b2140, #07080f 70%); }
.pet-stage-wrap { display: flex; flex-direction: column; align-items: center; padding: 6px 16px 0; }
.pet-big { position: relative; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.pet-flying { position: absolute; left: 50%; top: 0; font-size: 34px; transform: translateX(-50%); animation: petFly 1.1s ease-in forwards; pointer-events: none; }
@keyframes petFly { 0% { opacity: 0; transform: translate(-50%,-20px) scale(1.2); } 30% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%,120px) scale(.4); } }
.pet-hearts { position: absolute; left: 58%; top: 20%; font-size: 26px; animation: petHeart 1.2s ease-out forwards; pointer-events: none; }
@keyframes petHeart { 0% { opacity: 0; transform: translateY(0) scale(.6); } 30% { opacity: 1; } 100% { opacity: 0; transform: translateY(-50px) scale(1.2); } }
.pet-bubble { margin-top: 4px; background: var(--card); border: 1px solid var(--card-border); border-radius: 16px; padding: 10px 14px; font-size: 14px; line-height: 1.4; text-align: center; max-width: 340px; min-height: 20px; }
.pet-needs { display: flex; flex-direction: column; gap: 8px; }
.pet-need { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.pet-need-icon { width: 22px; text-align: center; }
.pet-need-label { width: 70px; color: var(--text-muted); }
.pet-need-track { flex: 1; height: 8px; background: rgba(255,255,255,.07); border-radius: 5px; overflow: hidden; }
.pet-need-fill { display: block; height: 100%; border-radius: 5px; transition: width .6s ease; }
.pet-need-val { width: 28px; text-align: right; color: var(--text-faint); font-variant-numeric: tabular-nums; }
.pet-need.low .pet-need-label { color: var(--danger); }
.pet-actions { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.pet-act { background: var(--card); border: 1px solid var(--card-border); border-radius: 16px; color: var(--text); font-size: 12px; padding: 10px 4px; display: flex; flex-direction: column; align-items: center; gap: 4px; cursor: pointer; font-family: inherit; }
.pet-act span { font-size: 24px; }
.pet-act:active, .pet-food:active { transform: scale(.95); }
.pet-foods { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 10px; }
.pet-food { background: var(--accent-soft); border: 1px solid rgba(95,216,196,.25); border-radius: 14px; color: var(--text); padding: 10px 4px; font-size: 12px; display: flex; flex-direction: column; align-items: center; gap: 2px; cursor: pointer; font-family: inherit; }
.pet-food span { font-size: 26px; }
.pet-food.bad { background: var(--danger-soft); border-color: rgba(234,139,139,.3); }
.pet-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.pet-stats div { background: var(--card); border: 1px solid var(--card-border); border-radius: 14px; padding: 10px; text-align: center; }
.pet-stats b { display: block; font-size: 20px; }
.pet-stats span { font-size: 11px; color: var(--text-muted); }
.pet-how { background: var(--card); border: 1px solid var(--card-border); border-radius: 16px; padding: 12px 14px; }
.pet-how summary { cursor: pointer; font-weight: 600; }
.pet-how .card-text { margin-top: 8px; }
@media (prefers-reduced-motion: reduce) { .pet-svg *, .pet-svg { animation: none !important; } }
.reduced-motion .pet-svg *, .reduced-motion .pet-svg { animation: none !important; }

/* ---------- V0.9.12: питомец 2.0 ---------- */
.pet-svg .pet-chew { transform-box: fill-box; transform-origin: center; animation: petChew .32s ease-in-out infinite; }
@keyframes petChew { 0%,100% { transform: scaleY(1); } 50% { transform: scaleY(.35); } }
.pet-svg .pet-drop { animation: petDrop 1s ease-in infinite; }
@keyframes petDrop { 0% { transform: translateY(-14px); opacity: 0; } 30% { opacity: 1; } 100% { transform: translateY(8px); opacity: 0; } }
.pet-svg .pet-crumbs { animation: petDrop .8s ease-in infinite; }
.pet-svg.react-celebrate { animation: petJump .55s ease-in-out infinite; }
@keyframes petJump { 0%,100% { transform: translateY(0) scale(1,1); } 20% { transform: translateY(0) scale(1.06,.92); } 55% { transform: translateY(-18px) scale(.96,1.05); } }
.pet-svg .pet-aura { animation: petEmber 2.4s ease-in-out infinite; transform-origin: 100px 112px; }
.pet-svg .pet-confetti rect { animation: petConfetti 2.2s linear infinite; transform-box: fill-box; transform-origin: center; }
.pet-svg .pet-confetti rect:nth-child(2n) { animation-delay: .7s; } .pet-svg .pet-confetti rect:nth-child(3n) { animation-delay: 1.3s; }
@keyframes petConfetti { 0% { transform: translateY(-10px) rotate(0); opacity: 0; } 20% { opacity: 1; } 100% { transform: translateY(40px) rotate(220deg); opacity: 0; } }
.pet-svg .pet-float-hearts path { animation: petHeartUp 2.6s ease-in-out infinite; transform-box: fill-box; }
.pet-svg .pet-float-hearts path:nth-child(2) { animation-delay: .9s; } .pet-svg .pet-float-hearts path:nth-child(3) { animation-delay: 1.7s; }
@keyframes petHeartUp { 0% { transform: translateY(8px); opacity: 0; } 30% { opacity: 1; } 100% { transform: translateY(-22px); opacity: 0; } }
.pet-svg.is-walking .pet-legs path { animation: petStep .45s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: top center; }
.pet-svg.is-walking .pet-legs path:nth-child(2n) { animation-direction: alternate-reverse; }
@keyframes petStep { from { transform: rotate(-10deg); } to { transform: rotate(10deg); } }

.pet-yard { background: linear-gradient(180deg, rgba(95,216,196,.06), rgba(95,216,196,.02)); border: 1px solid var(--card-border); border-radius: var(--radius-md); padding: 12px 14px; cursor: pointer; overflow: hidden; }
.pet-yard-head { display: flex; justify-content: space-between; align-items: center; }
.pet-yard-needs { display: flex; gap: 4px; }
.yard-need { font-size: 16px; animation: petEmber 1.4s ease-in-out infinite; }
.pet-yard-ground { position: relative; height: 128px; margin-top: 4px; border-bottom: 2px dashed rgba(255,255,255,.06); }
.pet-walker { position: absolute; bottom: 0; left: 0; width: 78px; animation: yardWalk 16s ease-in-out infinite; }
.pet-yard-ground.sleeping .pet-walker, .pet-yard-ground.jumping .pet-walker { animation: none; left: calc(50% - 39px); }
/* V0.22.1: домик стоит на месте - он не ходит и не переворачивается. */
.pet-yard-ground.away .pet-walker { animation: none; width: 118px; left: calc(50% - 59px); }
.pet-yard-ground.away .pet-walker-body { animation: none; }
.pet-yard-ground.away .pet-walker-body svg { width: 100%; height: auto; display: block; }
.pet-walker-body { animation: yardFlip 16s steps(1) infinite; }
.pet-yard-ground.sleeping .pet-walker-body, .pet-yard-ground.jumping .pet-walker-body { animation: none; }
@keyframes yardWalk { 0% { left: 0; } 45% { left: calc(100% - 78px); } 50% { left: calc(100% - 78px); } 95% { left: 0; } 100% { left: 0; } }
@keyframes yardFlip { 0% { transform: scaleX(1); } 47.5% { transform: scaleX(-1); } 97.5% { transform: scaleX(1); } }
.pet-walker-say { position: absolute; bottom: 82px; left: 50%; transform: translateX(-50%); width: max-content; max-width: 210px; background: var(--card); border: 1px solid var(--card-border); border-radius: 12px; padding: 6px 10px; font-size: 12px; line-height: 1.35; color: var(--text); text-align: center; white-space: normal; }
.pet-walker-say::after { content: ""; position: absolute; left: 50%; bottom: -6px; transform: translateX(-50%); border: 6px solid transparent; border-top-color: var(--card-border); border-bottom: 0; }

.pet-actions.two { grid-template-columns: 1fr 1fr; }
.pet-act.want { border-color: rgba(232,183,104,.6); box-shadow: 0 0 0 1px rgba(232,183,104,.25), 0 0 16px rgba(232,183,104,.18); animation: petWant 1.8s ease-in-out infinite; }
@keyframes petWant { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-2px); } }
.pet-food.premium { background: rgba(144,134,240,.16); border-color: rgba(144,134,240,.4); }
.pet-food.locked { opacity: .65; }
.pet-food i { font-style: normal; font-size: 10px; color: var(--text-muted); }
.pet-sleep-row { display: flex; align-items: center; gap: 14px; margin: 8px 0; }
.pet-sleep-pct { font-size: 30px; font-weight: 800; color: #9086f0; font-variant-numeric: tabular-nums; }
.pet-sleep-track { height: 10px; border-radius: 6px; background: rgba(255,255,255,.08); overflow: hidden; }
.pet-sleep-track span { display: block; height: 100%; background: linear-gradient(90deg, #5b6fc9, #9086f0, #cfd8ff); border-radius: 6px; transition: width .6s; }
.pet-bubble { margin: 0 0 4px; position: relative; }
.shop-item { display: flex; gap: 12px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--card-border); }
.shop-item:last-child { border-bottom: 0; }
.shop-emoji { font-size: 30px; width: 40px; text-align: center; }
.shop-text { flex: 1; min-width: 0; }
.shop-btn { flex-shrink: 0; }

/* ---------- V0.10: ВЫХОД Плюс ---------- */
.plus-hero { margin: 4px 16px 6px; padding: 22px 20px; border-radius: var(--radius-lg); background: linear-gradient(150deg, #1b2f3f 0%, #2a2150 55%, #173f3a 100%); box-shadow: var(--shadow-card); }
.plus-hero-title { font-size: 28px; font-weight: 800; letter-spacing: .5px; }
.plus-hero-title span { color: var(--accent); }
.plus-hero-sub { margin-top: 6px; color: rgba(255,255,255,.78); font-size: 14px; line-height: 1.45; }
.plus-benefit { display: flex; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--card-border); }
.plus-benefit:last-child { border-bottom: 0; }
.plus-benefit-icon { width: 32px; height: 32px; border-radius: 10px; background: var(--accent-soft); display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 16px; }
.plus-benefit-title { font-weight: 700; font-size: 14px; }
.plus-prices { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.plus-price { position: relative; background: var(--card); border: 1px solid var(--card-border); border-radius: var(--radius-md); padding: 14px; display: flex; flex-direction: column; gap: 4px; }
.plus-price.best { border-color: rgba(95,216,196,.55); box-shadow: 0 0 0 1px rgba(95,216,196,.2), 0 8px 24px rgba(95,216,196,.08); }
.plus-price .btn { margin-top: 8px; }
.plus-price-title { font-size: 13px; color: var(--text-muted); }
.plus-price-value { font-size: 24px; font-weight: 800; }
.plus-badge { position: absolute; top: -9px; right: 10px; background: var(--accent); color: #06231d; font-size: 11px; font-weight: 800; border-radius: 8px; padding: 2px 7px; }
.plus-packs { margin-top: 10px; background: var(--amber-soft); border: 1px solid rgba(232,183,104,.3); border-radius: 12px; padding: 10px 12px; font-size: 13px; line-height: 1.45; }
.plus-gift-code { margin-top: 12px; text-align: center; font-size: 22px; font-weight: 800; letter-spacing: 2px; color: var(--accent); background: var(--accent-soft); border-radius: 12px; padding: 12px; cursor: pointer; }
.plus-gift-code span { display: block; font-size: 11px; letter-spacing: 0; font-weight: 400; color: var(--text-muted); margin-top: 4px; }
.plus-home { cursor: pointer; border-color: rgba(144,134,240,.35); }
.plus-home.promo { background: linear-gradient(135deg, rgba(144,134,240,.14), rgba(95,216,196,.08)); }
.plus-blur { filter: blur(4px); user-select: none; }
.plus-locked { filter: blur(3px); opacity: .6; pointer-events: none; user-select: none; }
.plus-limit { border-color: rgba(144,134,240,.4) !important; }
.plan-list { padding: 4px 12px; }
.plan-day { display: flex; align-items: center; gap: 10px; padding: 10px 2px; border-bottom: 1px solid var(--card-border); font-size: 14px; }
.plan-day:last-child { border-bottom: 0; }
.plan-day[data-action] { cursor: pointer; }
.plan-day-num { width: 26px; height: 26px; border-radius: 50%; background: var(--card); border: 1px solid var(--card-border); display: flex; align-items: center; justify-content: center; font-size: 12px; flex-shrink: 0; }
.plan-day.done .plan-day-num { background: var(--success-soft); border-color: rgba(111,214,160,.4); }
.plan-day.today .plan-day-num { border-color: var(--accent); color: var(--accent); }
.plan-day.future { opacity: .5; }
.plan-day-title { flex: 1; }
.plan-day-mark { color: var(--text-muted); }
.report-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.report-tile { background: var(--card); border: 1px solid var(--card-border); border-radius: 14px; padding: 12px; }
.report-tile b { display: block; font-size: 20px; }
.report-tile span { font-size: 12px; color: var(--text-muted); }
.partner-cat { display: flex; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--card-border); }
.partner-cat:last-child { border-bottom: 0; }
.partner-emoji { font-size: 26px; width: 36px; text-align: center; }
a.btn { display: block; text-align: center; text-decoration: none; }

/* ========================================================================
   V0.12 - мир питомца: погода, время суток, подарки, гардероб, находки.
   ====================================================================== */

/* Полоска погоды */
.w-strip { display: flex; align-items: center; gap: 8px; padding: 8px 14px; font-size: 14px; color: var(--text-soft, #c9d2da); flex-wrap: wrap; }
.w-strip.loading { color: var(--text-muted, #8e9aa7); }
.w-city { font-weight: 700; color: var(--text); cursor: pointer; }
.w-ico { font-size: 17px; }
.w-temp { font-weight: 800; font-size: 17px; color: var(--text); }
.w-label { color: var(--text-muted, #8e9aa7); }
.w-feels { color: var(--text-muted, #8e9aa7); font-size: 12.5px; }

/* Сцена: небо, светило, осадки, земля.
   Глубина делается тремя вещами: размером, резкостью и скоростью.
   Дальний слой (d1) мелкий, размытый и медленный, ближний (d3) крупный, чёткий и быстрый. */
.w-scene { --fall: 330px; position: absolute; inset: 0; overflow: hidden; border-radius: 22px; pointer-events: none; z-index: 0; perspective: 420px; }
.w-scene.sky-day { background: linear-gradient(180deg, #24456f 0%, #3d6a8f 48%, #47809b 74%, #2b4a56 100%); }
.w-scene.sky-dawn { background: linear-gradient(180deg, #33305c 0%, #7d566d 45%, #c08268 78%, #4a4058 100%); }
.w-scene.sky-dusk { background: linear-gradient(180deg, #24264a 0%, #63406a 45%, #a2566a 78%, #35304e 100%); }
.w-scene.sky-night { background: linear-gradient(180deg, #080d1c 0%, #131c33 55%, #1c2a45 82%, #101828 100%); }
.w-scene.kind-overcast, .w-scene.kind-fog { filter: saturate(0.75); }
.w-haze { position: absolute; left: 0; right: 0; bottom: 20%; height: 34%; background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.14) 70%, rgba(255,255,255,.22) 100%); }
.w-scene.sky-night .w-haze { background: linear-gradient(180deg, rgba(120,160,220,0) 0%, rgba(120,160,220,.12) 100%); }

/* Солнце: ядро, мягкое гало и медленно вращающиеся лучи */
.w-sun { position: absolute; top: 13%; right: 15%; width: 52px; height: 52px; animation: wSun 9s ease-in-out infinite; }
.w-sun .w-core { position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle at 36% 32%, #fffdf0 0%, #ffe89a 34%, #ffc75c 58%, rgba(255,184,69,.55) 74%, rgba(255,184,69,0) 100%); box-shadow: 0 0 34px rgba(255,205,105,.5); }
.w-sun .w-rays { position: absolute; inset: -20px; border-radius: 50%; filter: blur(5px); background: conic-gradient(from 0deg, rgba(255,226,150,.16) 0 5deg, rgba(255,226,150,0) 5deg 22.5deg); animation: wSpinSlow 60s linear infinite; opacity: .6; }
.w-sun.low { top: 34%; }
.w-sun.low .w-core { background: radial-gradient(circle at 36% 32%, #fff3dc 0%, #ffc794 34%, #ff9a5c 58%, rgba(255,138,75,.5) 74%, rgba(255,138,75,0) 100%); }
.w-sun.hidden { opacity: .22; filter: blur(7px); }

/* Луна: шар с кратерами и холодным гало */
.w-moon { position: absolute; top: 13%; right: 17%; width: 38px; height: 38px; border-radius: 50%; background: radial-gradient(circle at 34% 30%, #ffffff 0%, #e2e9fb 45%, #aab6d4 100%); box-shadow: 0 0 22px rgba(190,215,255,.4), inset -5px -4px 10px rgba(60,80,130,.45); }
.w-moon i { position: absolute; border-radius: 50%; background: rgba(120,140,180,.35); box-shadow: inset 1px 1px 2px rgba(60,80,130,.5); }
.w-moon i.c1 { width: 9px; height: 9px; top: 9px; left: 8px; }
.w-moon i.c2 { width: 6px; height: 6px; top: 21px; left: 17px; }
.w-moon i.c3 { width: 4px; height: 4px; top: 12px; left: 23px; }
.w-stars i { position: absolute; border-radius: 50%; background: #fff; opacity: .8; box-shadow: 0 0 4px rgba(255,255,255,.8); animation: wTwinkle 3.5s ease-in-out infinite; }

/* Облака: четыре шара со светом сверху */
.w-cloud { position: absolute; left: -45%; width: 96px; height: 30px; animation: wDrift linear infinite; }
.w-cloud i { position: absolute; bottom: 0; border-radius: 50%; background: radial-gradient(circle at 36% 26%, #ffffff 0%, #eaf0fb 40%, #b6c4db 100%); }
.w-cloud i:nth-child(1) { width: 44px; height: 44px; left: 0; }
.w-cloud i:nth-child(2) { width: 58px; height: 58px; left: 26px; bottom: 2px; }
.w-cloud i:nth-child(3) { width: 40px; height: 40px; left: 60px; }
.w-cloud i:nth-child(4) { width: 96px; height: 22px; left: 0; border-radius: 999px; }
.w-cloud.d1 { transform: scale(.55); opacity: .5; filter: blur(1.6px); }
.w-cloud.d2 { transform: scale(.8); opacity: .72; filter: blur(.6px); }
.w-cloud.d3 { transform: scale(1.1); opacity: .85; }
.w-scene.sky-night .w-cloud i { background: radial-gradient(circle at 36% 26%, #6a7899 0%, #4d5975 45%, #2f3950 100%); }
.w-scene.kind-thunder .w-cloud i, .w-scene.kind-overcast .w-cloud i { background: radial-gradient(circle at 36% 26%, #cfd6e4 0%, #9aa5bb 45%, #6d7891 100%); }

.w-fog { position: absolute; inset: 0; }
.w-fog i { position: absolute; left: -20%; right: -20%; height: 40%; background: radial-gradient(ellipse at center, rgba(215,225,235,.55) 0%, rgba(215,225,235,0) 70%); }
.w-fog i:nth-child(1) { bottom: 18%; animation: wFog 14s ease-in-out infinite; }
.w-fog i:nth-child(2) { bottom: 34%; opacity: .6; animation: wFog 21s ease-in-out infinite reverse; }

/* ---- падающие частицы: внешний слой падает, средний качается, внутренний кувыркается */
.w-rain, .w-snow, .w-leaves { position: absolute; inset: 0; }
.w-fall { position: absolute; top: -40px; line-height: 0; animation-name: wFallY; animation-timing-function: linear; animation-iteration-count: infinite; will-change: transform; }
.w-fall.slant { animation-name: wFallSlant; }
.w-fall.d1 { opacity: .42; filter: blur(1.1px); }
.w-fall.d2 { opacity: .78; filter: blur(.35px); }
.w-fall.d3 { opacity: 1; filter: drop-shadow(0 1px 2px rgba(0,0,0,.25)); }
.w-sway { display: block; animation-name: wSwayX; animation-timing-function: ease-in-out; animation-iteration-count: infinite; animation-direction: alternate; }
.w-spin { display: block; transform-style: preserve-3d; animation-name: wTumble; animation-timing-function: linear; animation-iteration-count: infinite; }
.w-snow .w-spin { animation-name: wTumbleSoft; }
.w-drop { display: block; width: 2px; border-radius: 0 0 3px 3px; background: linear-gradient(180deg, rgba(205,230,255,0) 0%, rgba(205,230,255,.45) 50%, rgba(240,248,255,.9) 100%); }
.w-fall.d1 .w-drop { width: 1.3px; }
.w-fall.d2 .w-drop { width: 1.9px; }
.w-fall.d3 .w-drop { width: 2.6px; }

.w-flash { position: absolute; inset: 0; background: radial-gradient(circle at 70% 18%, #fff 0%, rgba(255,255,255,.2) 45%, transparent 70%); opacity: 0; animation: wFlash 9s linear infinite; }

/* ---- земля */
.w-ground { position: absolute; left: 0; right: 0; bottom: 0; height: 26%; background: linear-gradient(180deg, #37703f 0%, #2a5232 45%, #1d3a24 100%); }
.w-ground::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 7px; background: linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,0)); }
.w-ground.snowy { background: linear-gradient(180deg, #f1f6fd 0%, #d3e0ef 45%, #adbed3 100%); }
.w-scene.sky-night .w-ground { filter: brightness(.62) saturate(.85); }
.w-scene.sky-dusk .w-ground, .w-scene.sky-dawn .w-ground { filter: brightness(.82); }
.w-grass { position: absolute; left: 0; width: 100%; height: 16px; transform-origin: 50% 100%; }
.w-grass.back { top: -13px; opacity: .85; animation: wGrass 6.5s ease-in-out infinite alternate; }
.w-grass.front { top: -9px; animation: wGrass 4.4s ease-in-out infinite alternate-reverse; }
.w-fallen { position: absolute; line-height: 0; opacity: .85; }
.w-mound { position: absolute; bottom: 30%; height: 18px; border-radius: 50% 50% 0 0 / 100% 100% 0 0; background: linear-gradient(180deg, #ffffff 0%, #e6eef8 55%, #cbd8e9 100%); filter: blur(.4px); }
.w-mound.m1 { left: 6%; width: 74px; }
.w-mound.m2 { right: 10%; width: 46px; bottom: 44%; height: 12px; opacity: .8; }
.w-glint { position: absolute; width: 3px; height: 3px; border-radius: 50%; background: #fff; box-shadow: 0 0 5px rgba(255,255,255,.9); animation: wTwinkle 2.6s ease-in-out infinite; }
.w-puddle { position: absolute; bottom: 12%; height: 8px; border-radius: 50%; background: radial-gradient(ellipse at 50% 40%, rgba(200,230,255,.75) 0%, rgba(140,190,235,.5) 70%, rgba(140,190,235,.2) 100%); }
.w-puddle.p1 { left: 12%; width: 58px; animation: wPuddle 3.5s ease-in-out infinite; }
.w-puddle.p2 { right: 16%; width: 36px; animation: wPuddle 4.5s ease-in-out infinite; }
.w-puddle i { position: absolute; left: 50%; top: 50%; width: 10px; height: 4px; margin: -2px 0 0 -5px; border: 1px solid rgba(225,242,255,.8); border-radius: 50%; animation: wRipple 2.4s ease-out infinite; }
.w-puddle i:nth-child(2) { animation-delay: 1.2s; }
.w-snowman, .w-sprout { position: absolute; bottom: 14%; right: 9%; font-size: 24px; }

/* ---- холодно / жарко */
.w-frost { position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(circle at 0% 0%, rgba(214,240,255,.65) 0%, rgba(214,240,255,0) 32%),
              radial-gradient(circle at 100% 0%, rgba(214,240,255,.6) 0%, rgba(214,240,255,0) 30%),
              radial-gradient(circle at 0% 100%, rgba(214,240,255,.42) 0%, rgba(214,240,255,0) 24%),
              radial-gradient(circle at 100% 100%, rgba(214,240,255,.42) 0%, rgba(214,240,255,0) 24%),
              linear-gradient(180deg, rgba(190,225,255,.14) 0%, rgba(190,225,255,0) 45%);
  animation: wFrost 7s ease-in-out infinite; }
.w-heat { position: absolute; left: 0; right: 0; bottom: 18%; height: 34%; background: linear-gradient(180deg, rgba(255,214,150,0) 0%, rgba(255,214,150,.18) 100%); filter: blur(2px); animation: wHeat 4.5s ease-in-out infinite; }

.w-garland { position: absolute; top: 4px; left: 0; right: 0; height: 18px; background: repeating-linear-gradient(90deg, #ff8fa3 0 8px, transparent 8px 22px, #5fd8c4 22px 30px, transparent 30px 44px, #ffd75e 44px 52px, transparent 52px 66px); opacity: .85; animation: wTwinkle 2.4s ease-in-out infinite; }

/* Дворик на главной - та же сцена, только мельче и короче путь падения */
.w-scene.compact { --fall: 150px; border-radius: 16px; }
.w-scene.compact .w-sun, .w-scene.compact .w-moon { width: 28px; height: 28px; top: 9%; }
.w-scene.compact .w-moon i { transform: scale(.7); }
.w-scene.compact .w-ground { height: 34%; }
.w-scene.compact .w-snowman, .w-scene.compact .w-sprout { font-size: 15px; }
.w-scene.compact .w-cloud { width: 64px; }
.w-scene.compact .w-cloud.d1 { transform: scale(.34); }
.w-scene.compact .w-cloud.d2 { transform: scale(.5); }
.w-scene.compact .w-cloud.d3 { transform: scale(.66); }
.w-scene.compact .w-grass { height: 12px; }
.w-scene.compact .w-grass.back { top: -10px; }
.w-scene.compact .w-grass.front { top: -7px; }
.w-scene.compact .w-mound.m1 { width: 48px; }

@keyframes wSun { 0%,100% { transform: scale(1); } 50% { transform: scale(1.05); } }
@keyframes wSpinSlow { to { transform: rotate(360deg); } }
@keyframes wTwinkle { 0%,100% { opacity: .3; } 50% { opacity: 1; } }
@keyframes wDrift { from { transform: translateX(0); } to { transform: translateX(340%); } }
@keyframes wFog { 0%,100% { transform: translateX(-6%) scaleY(1); } 50% { transform: translateX(6%) scaleY(1.15); } }
@keyframes wFallY { from { transform: translateY(-40px); } to { transform: translateY(var(--fall)); } }
@keyframes wFallSlant { from { transform: translate(22px,-40px); } to { transform: translate(-22px, var(--fall)); } }
@keyframes wSwayX { from { transform: translateX(calc(var(--amp) * -1)); } to { transform: translateX(var(--amp)); } }
@keyframes wTumble { from { transform: rotateY(0deg) rotateZ(0deg); } to { transform: rotateY(360deg) rotateZ(190deg); } }
@keyframes wTumbleSoft { 0% { transform: rotateY(-32deg) rotateZ(0deg); } 50% { transform: rotateY(32deg) rotateZ(180deg); } 100% { transform: rotateY(-32deg) rotateZ(360deg); } }
@keyframes wFlash { 0%, 92%, 100% { opacity: 0; } 93% { opacity: .6; } 94% { opacity: 0; } 95% { opacity: .35; } 96% { opacity: 0; } }
@keyframes wPuddle { 0%,100% { transform: scaleX(1); opacity: .55; } 50% { transform: scaleX(1.07); opacity: .8; } }
@keyframes wRipple { 0% { transform: scale(.3); opacity: .9; } 100% { transform: scale(3.4); opacity: 0; } }
@keyframes wGrass { from { transform: skewX(-3deg); } to { transform: skewX(4deg); } }
@keyframes wFrost { 0%,100% { opacity: .75; } 50% { opacity: 1; } }
@keyframes wHeat { 0%,100% { transform: translateX(-3px) scaleY(1); } 50% { transform: translateX(3px) scaleY(1.06); } }

/* Питомец внутри сцены */
.pet-stage-wrap { position: relative; }
.pet-stage-wrap .pet-bubble, .pet-stage-wrap .pet-big { position: relative; z-index: 1; }
.pet-yard-ground { position: relative; overflow: hidden; }
.pet-yard-ground .pet-walker { position: relative; z-index: 1; }

/* Живость: дыхание, моргание, микросценки */
.pet-svg.is-alive { animation: petBreathe 4.2s ease-in-out infinite; transform-origin: 50% 90%; }
.pet-svg.is-alive .pet-eyes { animation: petBlink 6.5s infinite; transform-origin: 50% 52%; }
.pet-svg.is-cold { animation: petShiver 0.35s linear infinite; }
.pet-svg.idle-hop { animation: petHop 1.1s ease-in-out; }
.pet-svg.idle-wiggle { animation: petWiggle 1.2s ease-in-out; }
.pet-svg.idle-look .pet-eyes { animation: petLook 2s ease-in-out; }
.pet-svg.idle-scratch { animation: petScratch 1.4s ease-in-out; }
.pet-svg.idle-yawn { animation: petYawn 1.6s ease-in-out; }
.pet-svg.is-asleep { animation: petSleepBreathe 5s ease-in-out infinite; }
.pet-wet path { animation: wFall 1.6s linear infinite; }
.pet-bulb { animation: wTwinkle 1.6s ease-in-out infinite; }
.pet-note { animation: petNote 3s ease-in-out infinite; }
@keyframes petBreathe { 0%,100% { transform: scale(1,1); } 50% { transform: scale(1.015,0.985); } }
@keyframes petSleepBreathe { 0%,100% { transform: scale(1,1); } 50% { transform: scale(1.03,0.97); } }
@keyframes petBlink { 0%, 94%, 100% { transform: scaleY(1); } 96% { transform: scaleY(0.08); } 98% { transform: scaleY(1); } }
@keyframes petShiver { 0%,100% { transform: translateX(-1px); } 50% { transform: translateX(1px); } }
@keyframes petHop { 0%,100% { transform: translateY(0); } 35% { transform: translateY(-14px); } 60% { transform: translateY(0) scaleY(0.95); } }
@keyframes petWiggle { 0%,100% { transform: rotate(0deg); } 25% { transform: rotate(-5deg); } 75% { transform: rotate(5deg); } }
@keyframes petLook { 0%,100% { transform: translateX(0); } 30% { transform: translateX(6px); } 70% { transform: translateX(-6px); } }
@keyframes petScratch { 0%,100% { transform: rotate(0); } 20% { transform: rotate(3deg) translateY(-2px); } 40% { transform: rotate(-2deg); } 60% { transform: rotate(3deg) translateY(-2px); } }
@keyframes petYawn { 0%,100% { transform: scale(1); } 40% { transform: scale(1.06,1.08); } }
@keyframes petNote { 0% { opacity: 0; transform: translateY(0); } 40% { opacity: 1; } 100% { opacity: 0; transform: translateY(-14px); } }

/* Подарки, находки, гардероб */
.gift-box { display: flex; gap: 14px; align-items: center; cursor: pointer; }
.gift-emoji { font-size: 34px; animation: giftShake 2.4s ease-in-out infinite; }
.gift-box.find .gift-emoji { animation: wTwinkle 1.8s ease-in-out infinite; }
@keyframes giftShake { 0%, 70%, 100% { transform: rotate(0); } 75% { transform: rotate(-12deg); } 80% { transform: rotate(12deg); } 85% { transform: rotate(-8deg); } 90% { transform: rotate(6deg); } }
.gift-wait { text-align: center; color: var(--text-muted, #8e9aa7); font-size: 13.5px; padding: 6px 0; }
.wardrobe { display: flex; flex-wrap: wrap; gap: 8px; }
.wear-item { display: inline-flex; align-items: center; gap: 7px; background: rgba(255,255,255,.05); border: 1px solid var(--border, rgba(255,255,255,.09)); color: inherit; border-radius: 999px; padding: 7px 13px; font-size: 13.5px; font-family: inherit; cursor: pointer; }
.wear-item span { font-size: 17px; }
.wear-item.on { border-color: var(--accent, #5fd8c4); color: var(--accent, #5fd8c4); background: rgba(95,216,196,.12); }
.wear-item.locked { opacity: .45; cursor: default; }
.wear-item.locked i { font-style: normal; font-size: 11.5px; opacity: .8; }
.find-shelf { display: flex; flex-wrap: wrap; gap: 10px; font-size: 24px; }
.find-item { filter: drop-shadow(0 2px 4px rgba(0,0,0,.35)); }
.yard-gift { font-size: 15px; margin-right: 4px; animation: giftShake 2.4s ease-in-out infinite; display: inline-block; }
.btn.wide { width: 100%; }

@media (prefers-reduced-motion: reduce) {
  .w-fall, .w-sway, .w-spin, .w-cloud, .w-flash, .w-grass, .w-sun .w-rays, .w-heat, .w-frost,
  .pet-svg.is-alive, .pet-svg.is-cold, .gift-emoji, .yard-gift { animation: none !important; }
  .w-rain, .w-snow, .w-leaves { opacity: .5; }
}
.reduced-motion .w-fall, .reduced-motion .w-sway, .reduced-motion .w-spin, .reduced-motion .w-cloud,
.reduced-motion .w-grass, .reduced-motion .w-sun .w-rays, .reduced-motion .w-heat, .reduced-motion .w-frost,
.reduced-motion .w-flash, .reduced-motion .pet-svg.is-alive, .reduced-motion .gift-emoji { animation: none !important; }
.reduced-motion .w-rain, .reduced-motion .w-snow, .reduced-motion .w-leaves { opacity: .5; }

/* V0.12.1: раскрывающийся день плана и подписи гардероба */
.plan-day { cursor: pointer; }
.plan-day.open { background: rgba(255,255,255,.05); border-radius: 12px; }
.plan-day-body { padding: 4px 12px 14px; }
.plan-day-body .card-text { margin-bottom: 10px; }
.wear-item i { font-style: normal; font-size: 11.5px; opacity: .75; }

/* V0.12.2: питомец в углу карточки времени не наезжает на текст */
.hero-slide { padding-right: 104px; }
.pet-corner { right: 4px; bottom: 20px; }
@media (max-width: 400px) {
  .hero-slide { padding-right: 86px; }
  .pet-corner svg { width: 80px; height: 80px; }
}
@media (max-width: 340px) {
  .hero-slide { padding-right: 70px; }
  .pet-corner svg { width: 66px; height: 66px; }
}

/* ========================================================================
   V0.13 - обучение с подсветкой, подсказки разделов, пробный режим.
   ====================================================================== */
.tour-layer { position: fixed; inset: 0; z-index: 90; pointer-events: auto; }
.tour-layer .tour-tip { pointer-events: auto; }
body.tour-open { overflow: hidden; }
.tour-hole {
  position: absolute; border-radius: 18px; border: 2px solid var(--accent, #5fd8c4);
  box-shadow: 0 0 0 9999px rgba(4, 7, 12, .86), 0 0 26px rgba(95,216,196,.45);
  transition: all .25s ease; pointer-events: none;
}
.tour-tip {
  position: fixed; left: 16px; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); background: #141a24;
  border: 1px solid rgba(255,255,255,.1); border-radius: 18px; padding: 16px 18px;
  box-shadow: 0 18px 40px rgba(0,0,0,.5);
}
.tour-tip.at-top { bottom: auto; top: calc(16px + env(safe-area-inset-top)); }
.tour-count { font-size: 11.5px; letter-spacing: .8px; text-transform: uppercase; color: var(--accent, #5fd8c4); margin-bottom: 6px; }
.tour-title { font-size: 18px; font-weight: 700; margin-bottom: 6px; }
.tour-text { font-size: 14.5px; color: #c4ced8; line-height: 1.5; }
.tour-buttons { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.tour-buttons .btn { width: 100%; }

.hint-card { background: rgba(144,134,240,.14); border: 1px solid rgba(144,134,240,.35); border-radius: 16px; padding: 14px 16px; }
.hint-title { font-weight: 700; margin-bottom: 4px; }
.hint-text { font-size: 14px; color: #c9d2da; line-height: 1.5; margin-bottom: 10px; }

.sandbox-box { background: rgba(95,216,196,.09); border: 1px dashed rgba(95,216,196,.4); border-radius: 16px; padding: 14px 16px; }
.sandbox-title { font-weight: 700; margin-bottom: 4px; }
.sandbox-text { font-size: 13.5px; color: #c9d2da; line-height: 1.5; margin-bottom: 10px; }

/* V0.14: часы рядом с погодой */
.w-clock { font-weight: 800; font-size: 17px; color: var(--text); letter-spacing: .5px; }
.w-strip { gap: 7px; }

/* V0.14: «Крупный текст» теперь действительно крупный */
body.large-text { font-size: 118%; }
body.large-text .card-title { font-size: 19px; }
body.large-text .card-text, body.large-text .list-row, body.large-text .choice,
body.large-text .bubble, body.large-text .btn, body.large-text .pet-need-label,
body.large-text .plan-day-title, body.large-text .wear-item, body.large-text .tour-text { font-size: 17px; }
body.large-text .field-helper, body.large-text .card-kicker, body.large-text .section-title,
body.large-text .w-label, body.large-text .field-label, body.large-text .pill { font-size: 15px; }
body.large-text .hero-headline { font-size: 34px; }
body.large-text .hero-sub, body.large-text .hero-metric-value { font-size: 16.5px; }
body.large-text .bottom-btn { font-size: 12.5px; }
body.large-text .input, body.large-text input, body.large-text textarea, body.large-text select { font-size: 17px; }

/* ---------- V0.15: «Здоровье» - шкала восстановления тела ---------- */

.health-btn { display: flex; flex-direction: column; gap: 2px; align-items: center; padding: 12px 14px; line-height: 1.3; }
.health-btn-main { font-weight: 800; font-size: 15px; }
.health-btn-sub { font-size: 11.5px; font-weight: 500; color: var(--text-muted); }

.hm-hero { display: flex; align-items: center; gap: 12px; margin-top: 6px; }
.hm-list { display: flex; flex-direction: column; gap: 10px; }
.hm-group { font-size: 11.5px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--text-faint); margin: 14px 0 2px; }
.hm-group:first-child { margin-top: 0; }

.hm-badge { position: relative; width: 56px; height: 56px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.hm-badge svg { position: absolute; inset: 0; }
.hm-icon { font-size: 22px; line-height: 1; }
.hm-pct { font-size: 12.5px; font-weight: 800; color: var(--text-muted); }

.hm-row {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 12px 14px; border-radius: var(--radius-md);
  background: var(--card); border: 1px solid var(--card-border);
}
.hm-row.reached { background: rgba(111, 214, 160, 0.07); border-color: rgba(111, 214, 160, 0.28); }
.hm-row.major { border-width: 1.5px; }
.hm-row.major.reached { border-color: rgba(111, 214, 160, 0.5); }
.hm-body { min-width: 0; }
.hm-title { font-weight: 800; font-size: 16px; }
.hm-check { color: var(--success); font-size: 14px; }
.hm-text { font-size: 13.5px; line-height: 1.45; color: var(--text-muted); margin-top: 3px; }
.hm-note { font-size: 11.5px; line-height: 1.4; color: var(--text-faint); margin-top: 5px; }
.hm-when { font-size: 11.5px; color: var(--text-faint); margin-top: 6px; }
.hm-row.reached .hm-when { color: var(--success); }

/* Метка «ты здесь» между пройденным и будущим. */
.hm-marker { display: flex; align-items: center; gap: 10px; margin: 4px 0; color: var(--accent); font-size: 12px; font-weight: 700; }
.hm-marker::before, .hm-marker::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--accent), transparent); opacity: 0.6; }

body.large-text .hm-title { font-size: 18px; }
body.large-text .hm-text { font-size: 15.5px; }

/* V0.16.2: закреплённый верх экрана питомца - погода, реплика и сам Бычок.
   Всё, что ниже, проезжает под ним. */
.pet-pinned {
  position: sticky;
  top: 60px;
  z-index: 14;
  background: var(--bg);
  padding-bottom: 8px;
  box-shadow: 0 14px 22px -16px rgba(0, 0, 0, 0.9);
}
.pet-screen.night .pet-pinned { background: #0b0e1c; }

/* V0.15: поле для ответа внутри шага плана. */
.plan-note { margin-top: 12px; }
.plan-note label { display: block; margin-bottom: 4px; }
.plan-note textarea { width: 100%; resize: vertical; line-height: 1.45; }

/* ---------- V0.16: ритуал «две минуты» ---------- */

.ritual-wrap { display: flex; flex-direction: column; }
.ritual-top { display: flex; align-items: baseline; justify-content: space-between; padding: 4px 18px 8px; }
.ritual-time { font-size: 30px; font-weight: 800; letter-spacing: 1px; }
.ritual-score { font-size: 17px; color: var(--amber); font-weight: 700; }
.ritual-track { height: 5px; margin: 0 18px 10px; border-radius: 99px; background: var(--card); overflow: hidden; }
.ritual-track span { display: block; height: 100%; width: 0; background: var(--accent); transition: width 0.25s linear; }

.ritual-stage {
  position: relative; height: 320px; margin: 0 16px;
  border-radius: var(--radius-lg); overflow: hidden;
  background: radial-gradient(120% 90% at 50% 20%, rgba(95,216,196,0.10), transparent 62%), var(--bg-soft);
  border: 1px solid var(--card-border);
  display: flex; align-items: center; justify-content: center;
}
.ritual-orb {
  width: 190px; height: 190px; border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, rgba(95,216,196,0.55), rgba(144,134,240,0.30) 62%, rgba(144,134,240,0.08));
  box-shadow: 0 0 60px rgba(95,216,196,0.22);
  transform: scale(0.68);
  transition: transform 6s ease-in-out;
}
.ritual-orb.inhale { transform: scale(1); transition-duration: 4s; }
.ritual-orb.exhale { transform: scale(0.68); transition-duration: 6s; }
.ritual-phase {
  position: absolute; left: 0; right: 0; bottom: 16px; text-align: center;
  font-size: 15px; font-weight: 700; color: var(--text-muted); letter-spacing: 0.5px;
}
.ritual-sparks { position: absolute; inset: 0; }
.ritual-spark {
  position: absolute; width: 52px; height: 52px; margin: -26px 0 0 -26px;
  border-radius: 50%; border: none; cursor: pointer;
  background: rgba(232,183,104,0.16); color: var(--amber);
  font-size: 22px; line-height: 1;
  animation: sparkIn 0.3s ease-out;
  box-shadow: 0 0 22px rgba(232,183,104,0.35);
}
.ritual-spark:active { transform: scale(0.86); }
@keyframes sparkIn { from { opacity: 0; transform: scale(0.4); } to { opacity: 1; transform: scale(1); } }
@media (prefers-reduced-motion: reduce) {
  .ritual-orb { transition-duration: 0.3s !important; }
  .ritual-spark { animation: none; }
}

.ritual-stats { display: flex; gap: 8px; }
.ritual-stats > div {
  flex: 1; text-align: center; padding: 12px 6px;
  border-radius: var(--radius-md); background: var(--card); border: 1px solid var(--card-border);
}
.ritual-stats b { display: block; font-size: 19px; }
.ritual-stats span { display: block; font-size: 11px; color: var(--text-faint); margin-top: 2px; line-height: 1.3; }

/* Вечерняя карточка «итоги дня» на главной. */
.evening-card { border-color: rgba(144,134,240,0.45) !important; background: linear-gradient(140deg, rgba(144,134,240,0.16), rgba(95,216,196,0.05)) !important; }

/* ---------- V0.16.1: обновление приложения изнутри ---------- */

body { overscroll-behavior-y: contain; }

/* Индикатор жеста «потянуть вниз». */
.ptr {
  position: fixed; top: 0; left: 50%; z-index: 60;
  transform: translate(-50%, -60px); opacity: 0;
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--bg-soft); border: 1px solid var(--card-border);
  box-shadow: var(--shadow-card);
  display: flex; align-items: center; justify-content: center;
  transition: transform 0.18s ease, opacity 0.18s ease;
  pointer-events: none;
}
.ptr-ring {
  width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid var(--card-border); border-top-color: var(--accent);
  transition: transform 0.18s ease;
}
.ptr.ready .ptr-ring { border-top-color: var(--accent); transform: rotate(180deg); }
.ptr.busy .ptr-ring { animation: ptrSpin 0.8s linear infinite; }
@keyframes ptrSpin { to { transform: rotate(360deg); } }

/* Полоска «вышла новая версия». */
.update-bar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 70;
  display: flex; align-items: center; justify-content: center; gap: 12px;
  padding: calc(8px + env(safe-area-inset-top)) 14px 8px;
  background: var(--accent); color: #06231d;
  font-size: 13.5px; font-weight: 700;
}
.update-btn {
  border: none; border-radius: 999px; padding: 7px 14px;
  background: #06231d; color: var(--accent);
  font-size: 13px; font-weight: 800; cursor: pointer;
}
body.has-update-bar .topbar { top: 42px; }
body.has-update-bar .shell { padding-top: 42px; }

/* ---------- V0.17.2: четыре главные кнопки и полоска «итоги дня» ---------- */

.quick-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.quick-btn {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  padding: 13px 14px; min-height: 86px; cursor: pointer; text-align: left;
  border-radius: var(--radius-md);
  background: var(--card); border: 1px solid var(--card-border); color: var(--text);
}
.quick-btn:active { transform: scale(0.985); }
.quick-ico { font-size: 19px; line-height: 1.1; margin-bottom: 2px; }
.quick-main { font-size: 15.5px; font-weight: 800; line-height: 1.2; }
.quick-sub { font-size: 11.5px; line-height: 1.3; color: var(--text-faint); }
.quick-btn.danger { background: var(--danger-soft); border-color: rgba(234,139,139,0.45); }
.quick-btn.danger .quick-main { color: #ffb4b4; }
.quick-btn.danger .quick-sub { color: rgba(255,180,180,0.75); }
.quick-btn.amber { background: var(--amber-soft); border-color: rgba(232,183,104,0.45); }
.quick-btn.amber .quick-main { color: #f2cd8c; }
.quick-btn.amber .quick-sub { color: rgba(242,205,140,0.75); }
.quick-btn.teal { background: var(--accent-soft); border-color: rgba(95,216,196,0.45); }
.quick-btn.teal .quick-main { color: #8fe7d6; }
.quick-btn.teal .quick-sub { color: rgba(143,231,214,0.75); }

.day-bar {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 11px 14px; border-radius: var(--radius-md); cursor: pointer; text-align: left;
  background: var(--card); border: 1px solid var(--card-border); color: var(--text);
}
.day-bar.due { background: var(--violet-soft); border-color: rgba(144,134,240,0.5); }
.day-bar.done { background: rgba(111,214,160,0.09); border-color: rgba(111,214,160,0.34); }
.day-bar-ico {
  width: 32px; height: 32px; flex-shrink: 0; border-radius: 10px;
  display: flex; align-items: center; justify-content: center; font-size: 15px;
  background: rgba(255,255,255,0.07);
}
.day-bar.due .day-bar-ico { background: rgba(144,134,240,0.28); color: #c4bdff; }
.day-bar.done .day-bar-ico { background: rgba(111,214,160,0.22); color: var(--success); }
.day-bar-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.day-bar-text b { font-size: 14.5px; font-weight: 800; }
.day-bar-go { color: var(--text-faint); }

@media (max-width: 340px) { .quick-btn { min-height: 78px; padding: 11px 12px; } .quick-main { font-size: 14.5px; } }
body.large-text .quick-main { font-size: 17px; }
body.large-text .quick-sub, body.large-text .day-bar-text .field-helper { font-size: 13px; }

/* ---------- V0.18: второй экран карточки времени - сегодняшний шаг ---------- */

.hero-step-line { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 11.5px; color: rgba(255,255,255,0.7); }
.hero-step-track { flex: 1; max-width: 120px; height: 5px; border-radius: 99px; background: rgba(255,255,255,0.15); overflow: hidden; }
.hero-step-track i { display: block; height: 100%; background: var(--accent); border-radius: 99px; }
.hero-cta {
  display: inline-block; margin-top: 12px; padding: 10px 16px; border-radius: 999px; border: none; cursor: pointer;
  background: var(--accent); color: #06231d; font-size: 13.5px; font-weight: 800;
}

/* Подсказка внизу карточки: точки слева, «куда листать» справа. */
.hero-nav { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 14px; position: relative; z-index: 3; }
.hero-nav .hero-dots { margin: 0; }
.hero-flip {
  border: none; cursor: pointer; border-radius: 999px;
  padding: 7px 13px; background: rgba(255, 255, 255, 0.12); color: #fff;
  font-size: 12px; font-weight: 700; white-space: nowrap;
  animation: heroNudge 2.6s ease-in-out infinite;
}
@keyframes heroNudge { 0%, 72%, 100% { transform: translateX(0); } 82% { transform: translateX(4px); } 92% { transform: translateX(0); } }
@media (prefers-reduced-motion: reduce) { .hero-flip { animation: none; } }


/* ---------- V0.19: выбор питомца, дела и привязанность ---------- */

.species-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.species-card {
  display: flex; flex-direction: column; align-items: center; gap: 3px; cursor: pointer;
  padding: 12px 10px 14px; border-radius: var(--radius-md); text-align: center;
  background: var(--card); border: 1.5px solid var(--card-border); color: var(--text);
}
.species-card.picked { border-color: var(--accent); background: var(--accent-soft); }
.species-art { display: block; height: 96px; }
.species-name { font-size: 14.5px; font-weight: 800; }
.species-trait { font-size: 11px; color: var(--accent); font-weight: 700; }
.species-about { font-size: 11.5px; line-height: 1.35; color: var(--text-faint); }

.pet-todo { padding: 12px 14px; border-radius: var(--radius-md); background: var(--amber-soft); border: 1px solid rgba(232,183,104,0.4); }
.pet-todo-title { font-size: 12px; font-weight: 800; color: var(--amber); letter-spacing: 0.5px; text-transform: uppercase; }
.pet-todo-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.pet-todo-chip { padding: 6px 12px; border-radius: 999px; background: rgba(232,183,104,0.16); border: 1px solid rgba(232,183,104,0.35); font-size: 13px; font-weight: 600; }
.pet-todo.done { display: flex; align-items: center; gap: 8px; background: rgba(111,214,160,0.09); border-color: rgba(111,214,160,0.32); font-size: 13.5px; color: var(--text-muted); }
.pet-todo.done span { color: var(--success); font-weight: 800; }

.yard-todo { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--amber); color: #2a1c05; font-size: 12px; font-weight: 800; margin-left: 4px; }
.yard-sick { font-size: 15px; margin-right: 2px; }
.pet-act.spent { opacity: 0.5; }
.pet-act.heal { background: rgba(111,214,160,0.14); border-color: rgba(111,214,160,0.45); }
.pet-act i { display: block; font-style: normal; font-size: 10.5px; color: var(--text-faint); margin-top: 2px; }

/* ---------- V0.20: живой объёмный питомец ---------- */

.rig-host { position: relative; width: 240px; height: 240px; margin: 0 auto; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.rig-host.small { width: 96px; height: 96px; }
.rig-svg { width: 100%; height: 100%; display: block; overflow: visible; }
.rig-svg * { transform-box: view-box; }
.rig-sick { filter: saturate(0.55) brightness(0.88); }

/* Тумблер звука питомца. */
.pet-sound-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.pet-corner.rig-host { position: absolute; right: 2px; bottom: 18px; width: 108px; height: 108px; z-index: 2; }

/* ------------------------------------------------------------------ */
/* Заглушка при пропаже интернета (V0.20.4).                          */
/* Лежит поверх всего, поэтому одна и та же на всех экранах - именно   */
/* этого требует модерация RuStore: человек не должен увидеть ошибку   */
/* браузера и понять, что внутри оболочки сайт.                        */
.netgate {
  position: fixed; inset: 0; z-index: 9999;
  display: none; align-items: center; justify-content: center;
  padding: 24px;
  background: radial-gradient(circle at 50% 30%, #16202e 0%, #0a0d12 70%);
}
.netgate.on { display: flex; }
body.netgate-open { overflow: hidden; }
.netgate-card { max-width: 380px; text-align: center; }
.netgate-icon { margin-bottom: 18px; }
.netgate-title { font-size: 21px; font-weight: 800; color: #f2f5f7; margin-bottom: 10px; }
.netgate-text { font-size: 15px; line-height: 1.5; color: #9aa7b5; margin-bottom: 16px; }
.netgate-calm {
  font-size: 14px; line-height: 1.5; color: #7f8ea0;
  background: rgba(95, 216, 196, .07); border: 1px solid rgba(95, 216, 196, .18);
  border-radius: 14px; padding: 12px 14px; margin-bottom: 22px;
}
.netgate-btn {
  background: #5fd8c4; color: #06231d; border: 0; border-radius: 14px;
  padding: 15px 30px; font-size: 16px; font-weight: 700; cursor: pointer;
}
.netgate-btn:active { transform: scale(.98); }

/* --- V0.21: карта тела и навыки питомца --------------------------------- */
.sys-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 10px; margin-top: 12px; }
.sys-item { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 6px 8px; border-radius: 10px; background: rgba(255,255,255,0.04); opacity: 0.55; }
.sys-item.lit { opacity: 1; background: rgba(255,209,102,0.12); }
.sys-dot { color: #6c7684; font-size: 13px; line-height: 1; }
.sys-item.lit .sys-dot { color: #ffd166; text-shadow: 0 0 8px rgba(255,209,102,0.8); }
.sys-name { font-size: 13px; font-weight: 600; }
.sys-state { font-size: 11px; opacity: 0.65; margin-left: auto; white-space: nowrap; }
.sys-item.lit .sys-state { color: #ffd166; opacity: 0.9; }
.sys-text { flex: 0 0 100%; font-size: 12px; opacity: 0.75; line-height: 1.35; margin-top: 2px; }
@media (max-width: 380px) { .sys-grid { grid-template-columns: 1fr; } }

.skill-list { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; }
.skill-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; background: rgba(255,255,255,0.04); opacity: 0.6; }
.skill-item.learned { opacity: 1; background: rgba(127,230,210,0.12); }
.skill-emoji { font-size: 18px; line-height: 1; }
.skill-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.skill-main b { font-size: 13px; }
.skill-main i { font-size: 11.5px; font-style: normal; opacity: 0.75; line-height: 1.3; }
.skill-state { margin-left: auto; font-size: 12px; font-weight: 700; opacity: 0.7; white-space: nowrap; }
.skill-item.learned .skill-state { color: #7fe6d2; opacity: 1; }

/* --- V0.22: прогулка, серия, пауза -------------------------------------- */
.walk-say { font-size: 15px; line-height: 1.5; margin-top: 8px; }
.walk-answers { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; }
.walk-answers .walk-answer { width: 100%; text-align: left; justify-content: flex-start; padding-left: 16px; }
.walk-house { width: 100%; max-width: 190px; margin: 6px auto 2px; }
.walk-house svg { width: 100%; display: block; }
.walk-trait { margin-top: 12px; padding: 10px 12px; border-radius: 12px; background: rgba(127,230,210,0.1); }
.walk-trait b { display: block; font-size: 13px; }
.walk-trait i { display: block; font-style: normal; font-size: 12px; opacity: 0.75; margin-top: 3px; line-height: 1.35; }
.yard-empty { display: flex; align-items: flex-end; justify-content: center; }
.yard-empty svg { width: 78%; max-width: 210px; height: auto; display: block; margin: 0 auto; }

.streak-row { display: flex; align-items: center; gap: 14px; margin: 10px 0 8px; }
.streak-num { font-size: 40px; font-weight: 700; line-height: 1; color: #ffd166; }
.streak-side b { display: block; font-size: 14px; }
.streak-side i { display: block; font-style: normal; font-size: 12px; opacity: 0.65; margin-top: 3px; }
.streak-repair { margin-top: 12px; padding: 10px 12px; border-radius: 12px; background: rgba(255,209,102,0.12); font-size: 13px; line-height: 1.4; }
.streak-repair .btn { margin-top: 8px; }
.streak-repair-progress { margin-top: 10px; display: flex; align-items: center; gap: 6px; font-size: 12px; opacity: 0.7; }
.streak-dot { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,0.18); }
.streak-dot.on { background: #ffd166; box-shadow: 0 0 6px rgba(255,209,102,0.7); }
.streak-repair-progress span { margin-left: 4px; }

.pause-banner { padding: 14px 16px; border-radius: 16px; background: rgba(144,134,240,0.16); border: 1px solid rgba(144,134,240,0.3); }
.pause-banner b { display: block; font-size: 15px; }
.pause-banner span { display: block; font-size: 12.5px; opacity: 0.8; line-height: 1.45; margin-top: 5px; }
.pause-banner .btn { margin-top: 10px; }

/* --- V0.22: игра «Три минуты» ------------------------------------------- */
body.g3-lock { overflow: hidden; }
.g3-overlay { position: fixed; inset: 0; z-index: 90; background: rgba(6,11,18,0.88); backdrop-filter: blur(6px);
  display: flex; align-items: flex-end; justify-content: center; }
.g3-sheet { width: 100%; max-width: 520px; background: #121c2a; border-radius: 22px 22px 0 0; padding: 16px 16px 24px;
  max-height: 94vh; overflow-y: auto; box-shadow: 0 -12px 40px rgba(0,0,0,0.5); }
@media (min-width: 560px) { .g3-overlay { align-items: center; } .g3-sheet { border-radius: 22px; } }
.g3-head { display: flex; align-items: center; gap: 12px; }
.g3-time { font-size: 30px; font-weight: 700; color: #ffd166; font-variant-numeric: tabular-nums; min-width: 78px; }
.g3-head-text b { display: block; font-size: 15px; }
.g3-head-text i { display: block; font-style: normal; font-size: 12px; opacity: 0.65; margin-top: 2px; }
.g3-close { margin-left: auto; width: 34px; height: 34px; border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(255,255,255,0.08); color: #dbe4f0; font-size: 15px; }
.g3-bar { height: 5px; border-radius: 3px; background: rgba(255,255,255,0.1); margin-top: 12px; overflow: hidden; }
.g3-bar span { display: block; height: 100%; background: linear-gradient(90deg,#ffb02e,#7fe6d2); transition: width 1s linear; }
.g3-note { font-size: 12.5px; opacity: 0.7; margin-top: 8px; min-height: 17px; }
.g3-body { margin-top: 14px; }
.g3-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.g3-card { aspect-ratio: 1; border: 0; border-radius: 14px; cursor: pointer; font-size: 26px; line-height: 1;
  background: rgba(255,255,255,0.07); color: transparent; transition: background 0.18s, transform 0.12s; }
.g3-card span { opacity: 0; transition: opacity 0.14s; }
.g3-card:active { transform: scale(0.95); }
.g3-card.open { background: rgba(127,230,210,0.18); }
.g3-card.open span { opacity: 1; }
.g3-card.done { background: rgba(255,209,102,0.16); }
.g3-card.done span { opacity: 0.55; }
.g3-done { text-align: center; padding: 8px 4px 0; }
.g3-done-title { font-size: 19px; font-weight: 700; }
.g3-done-text { font-size: 13.5px; opacity: 0.8; line-height: 1.5; margin-top: 8px; }
.g3-ask { font-size: 14px; margin-top: 18px; }
.g3-scale { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }

/* --- V0.23: гены, развилки, яйцо ---------------------------------------- */
.fork-soon { color: #ffd166 !important; }
.fork-line { padding: 10px 14px; border-radius: 12px; background: rgba(255,255,255,0.04); }
.fork-line b { display: block; font-size: 13px; }
.fork-line span { display: block; font-size: 11.5px; opacity: 0.66; line-height: 1.4; margin-top: 3px; }
.gene-list { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.gene-row { padding: 9px 11px; border-radius: 11px; background: rgba(255,255,255,0.05); }
.gene-row b { display: block; font-size: 13px; }
.gene-row i { display: block; font-style: normal; font-size: 11.5px; opacity: 0.72; line-height: 1.4; margin-top: 3px; }
.gene-row.pending { opacity: 0.45; }
.gene-row.pending i { opacity: 0.8; }
.gene-row.marks { margin-top: 8px; background: rgba(255,209,102,0.12); }
.rig-egg { overflow: visible; }

/* --- V0.25: шкалы потребностей --------------------------------------------
   Крупные, с состоянием словами. Критичное само бросается в глаза. */
.pet-needs { display: flex; flex-direction: column; gap: 8px; }
.need { display: flex; align-items: center; gap: 11px; padding: 11px 13px; border-radius: 15px;
  background: rgba(255,255,255,0.045); transition: background 0.25s; }
.need-icon { font-size: 20px; line-height: 1; width: 24px; text-align: center; }
.need-main { flex: 1; min-width: 0; }
.need-top { display: flex; align-items: baseline; gap: 7px; }
.need-top b { font-size: 13.5px; font-weight: 600; }
.need-top i { font-size: 11.5px; font-style: normal; opacity: 0.6; }
.need-track { display: block; height: 9px; border-radius: 5px; background: rgba(255,255,255,0.09); margin-top: 6px; overflow: hidden; }
.need-fill { display: block; height: 100%; border-radius: 5px; background: var(--need-color);
  transition: width 0.5s cubic-bezier(.22,1,.36,1); box-shadow: 0 0 10px -2px var(--need-color); }
.need-val { font-size: 13px; font-variant-numeric: tabular-nums; opacity: 0.45; min-width: 26px; text-align: right; }
.need.full { background: rgba(127,230,210,0.09); }
.need.low { background: rgba(255,176,46,0.11); }
.need.low .need-top i { opacity: 0.9; color: #ffc24a; }
.need.critical { background: rgba(234,139,139,0.14); }
.need.critical .need-top i { opacity: 1; color: #ff9d9d; }
.need.critical .need-icon { animation: needPulse 1.6s ease-in-out infinite; }
@keyframes needPulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.16); } }

/* --- V0.25: кнопки ухода --------------------------------------------------
   Крупные, с ощутимым нажатием. То, что нужно сейчас, помечено точкой. */
.care-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.care-grid.two { grid-template-columns: repeat(2, 1fr); }
.care { position: relative; display: flex; flex-direction: column; align-items: center; gap: 5px;
  padding: 14px 6px 12px; border: 0; border-radius: 18px; cursor: pointer;
  background: rgba(255,255,255,0.06); color: var(--text, #e3ebf5);
  transition: transform 0.12s cubic-bezier(.34,1.56,.64,1), background 0.2s; }
.care:active { transform: scale(0.93); background: rgba(255,255,255,0.12); }
.care-icon { font-size: 25px; line-height: 1; }
.care-label { font-size: 12.5px; font-weight: 600; text-align: center; line-height: 1.2; }
.care-note { font-size: 10.5px; opacity: 0.5; }
.care.want { background: rgba(255,209,102,0.14); box-shadow: inset 0 0 0 1px rgba(255,209,102,0.3); }
.care.urgent { background: rgba(234,139,139,0.16); box-shadow: inset 0 0 0 1px rgba(234,139,139,0.35); }
.care.spent { opacity: 0.45; }
.care-dot { position: absolute; top: 9px; right: 10px; width: 7px; height: 7px; border-radius: 50%;
  background: #ffd166; box-shadow: 0 0 8px rgba(255,209,102,0.9); animation: needPulse 1.8s ease-in-out infinite; }

/* --- V0.25: выбор еды. Порция нарисована, размер виден глазом. ------------ */
.food-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 10px; }
.food { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 10px 5px 11px;
  border: 0; border-radius: 18px; cursor: pointer; background: rgba(255,255,255,0.06); color: var(--text, #e3ebf5);
  transition: transform 0.12s cubic-bezier(.34,1.56,.64,1), background 0.2s; }
.food:active { transform: scale(0.92); background: rgba(255,255,255,0.13); }
.food b { font-size: 12px; font-weight: 600; }
.food i { font-size: 10px; font-style: normal; opacity: 0.55; text-align: center; line-height: 1.25; }
.food-art { display: block; width: 100%; height: 46px; font-size: 26px; line-height: 46px; }
.food-art svg { width: 100%; height: 100%; display: block; }
/* Размер кнопки повторяет размер порции - это подсказка ещё до чтения. */
.food.s1 .food-art { height: 34px; }
.food.s2 .food-art { height: 44px; }
.food.s3 .food-art { height: 54px; }
.food.premium { background: rgba(255,209,102,0.1); }
.food.locked { opacity: 0.5; }
.food.bad { background: rgba(234,139,139,0.1); }
.food.bad .food-art { filter: grayscale(0.4); }

/* V0.25: карточка вида на экране выбора - чертёж во всю ширину. */
.species-art { display: block; width: 100%; height: 108px; }
.species-art svg { width: 100%; height: 100%; display: block; }