/* screens-play.css — слой экрана поверх brand.css (DESIGN-3.md). Только var(), только transform/opacity в движении.
   Экраны: Play-хаб, Совпадения, Квиз, Ближе, Ужин, Пари, Списки, Деньги, Живой разговор, Капсула, Пульс. */

/* ---------- общее: лиды карточек, орб с иконкой, кольца ---------- */
.play-page .lead, .deck-card .lead, .bet-head .lead {
  width: 44px; height: 44px; border-radius: 14px; flex: none; font-size: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--us-soft); color: var(--text);
}
.empty .orb .ic { color: #fff; }
.section-title .ic { vertical-align: -3px; margin-right: 2px; }
.seg button .ic, .chip .ic { vertical-align: -3px; }
.btn .ic { vertical-align: -4px; }
.ring-val small { font-family: var(--font-body); font-size: 11px; font-weight: 600; color: var(--muted); margin-left: 1px; }
.match-empty.empty { color: var(--muted); }
.match-empty.empty .cav { font-family: "Caveat", cursive; font-size: 24px; color: var(--text); }
/* Числа набраны Cormorant, а у него цифры по умолчанию старостильные: «$0» читалось как «$o»,
   «2026» прыгало по высоте. Здесь — все числа экранов игры, набранные этим шрифтом. */
.ph-num, .money-month, .money-total .mt-big, .money-row .m-sum, .money-amt, .pulse-score, .cap-until,
.qs-ring .ring-val, .dare-ring .ring-val, .money-ring .ring-val { font-variant-numeric: lining-nums tabular-nums; }
.fab { border: 0; padding: 0; }   /* FAB теперь <button>: без рамки и полей браузера */

/* ---------- Play-хаб ---------- */
.play-hero { padding: 18px 18px 16px; }
.ph-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.ph-title { font-size: 11.5px; letter-spacing: .09em; text-transform: uppercase; font-weight: 700; color: rgba(255,255,255,.78); }
.ph-title .ic { vertical-align: -4px; margin-right: 2px; }
.ph-week, .ph-empty { font-size: 12px; }
.ph-empty { margin-top: 8px; }
.ph-score { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; }
.ph-side { flex: 1; min-width: 0; text-align: center; }
.ph-side.him .ph-name { color: var(--him); } .ph-side.her .ph-name { color: var(--her); }
.ph-num { font-size: 44px; line-height: 1; font-weight: 600; }
.ph-name { font-family: "Caveat", cursive; font-size: 22px; line-height: 1.1; margin-top: 4px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ph-vs { flex: none; color: rgba(255,255,255,.7); width: 44px; height: 44px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.16); }
.ph-games { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.ph-chip { font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 999px; color: rgba(255,255,255,.9);
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.14); }
.ph-series { margin-top: 10px; font-size: 13px; font-weight: 600; color: var(--gold); display: flex; align-items: center; gap: 6px; }
.play-sec { margin-bottom: -6px; }
.game-card { padding: 12px 14px; }
.game-card .game-name { font-weight: 700; font-size: 16px; }
.game-arrow { display: inline-flex; color: var(--muted); }

/* ---------- Совпадения / Ужин: колода, кнопки, попап ---------- */
.match-back { align-self: flex-start; }
.match-counter { font-size: 13px; }
/* линейная иконка колоды в строке-счётчике — по центру строки текста, а не по базовой линии */
.match-counter .ic { vertical-align: -3px; color: var(--violet); }
.deck-card { border-radius: var(--r-lg); box-shadow: var(--shadow), var(--shadow-inset); }
.deck-card .lead { font-size: 26px; }
.deck-card.locked .lead { background: var(--surface-2); color: var(--muted); }
.deck-name { font-weight: 700; }
.deck-matches { display: inline-flex; align-items: center; gap: 3px; }
.match-card { border-radius: var(--r-xl); box-shadow: var(--shadow-lift), var(--shadow-inset); padding: 32px 24px; }
.match-card .mc-text { font-family: var(--font-display); font-weight: 600; font-size: 30px; line-height: 1.18; letter-spacing: -.01em; text-wrap: balance; }
.match-card .mc-tr { margin-top: 14px; font-size: 14.5px; }
.match-card .dinner-emoji { font-size: 56px; line-height: 1; margin-bottom: 14px; }
.match-btns { gap: 28px; margin-top: 4px; }
.match-btn { display: inline-flex; align-items: center; justify-content: center; color: var(--text);
  transition: transform var(--t-fast) var(--ease-out), box-shadow var(--t-base); }
.match-btn.no { background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow), var(--shadow-inset); color: var(--muted); }
.match-btn.yes { background: var(--her-fill); color: #fff; border: none; box-shadow: var(--glow-her), var(--shadow-inset); }
.match-btn.yes .ic { fill: currentColor; }
.match-btn:active { transform: scale(.88); }
.match-btn.yes:active { box-shadow: 0 4px 12px color-mix(in oklab, var(--her) 30%, transparent); }
.match-pop { padding: 24px; background: color-mix(in oklab, var(--bg) 60%, transparent); }
.match-pop .mp-card { width: min(100%, 340px); padding: 32px 24px 26px; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 8px; animation: heartPop 700ms var(--ease-spring); }
.match-pop .mp-heart { display: inline-flex; font-size: 56px; line-height: 1; margin-bottom: 4px; }
.match-pop .mp-heart .ic { fill: currentColor; opacity: .95; }
.match-pop .mp-title { font-family: "Caveat", cursive; font-size: 38px; line-height: 1; background: none; color: #fff; -webkit-text-fill-color: #fff; }
.match-pop .mp-text { font-family: var(--font-display); font-weight: 600; font-size: 22px; color: rgba(255,255,255,.92); }
.match-pop .mp-ghost { background: rgba(255,255,255,.14); color: #fff; }
.match-item { border-radius: var(--r-md); box-shadow: var(--shadow); }
.match-item .mi-ico { display: inline-flex; }

/* ---------- Квиз: варианты с радио-кольцом, результат — два кольца ---------- */
.quiz-q { border-radius: var(--r-lg); box-shadow: var(--shadow), var(--shadow-inset); padding: 16px 16px 14px; }
.quiz-qt { font-family: var(--font-display); font-weight: 600; font-size: 20px; line-height: 1.25; letter-spacing: -.01em; }
.quiz-n { font-family: var(--font-body); }
.quiz-opt { display: flex; align-items: center; gap: 10px; border-radius: var(--r-md); border: 1.5px solid transparent;
  background: var(--surface-2); padding: 10px 12px; min-height: 48px;
  transition: background var(--t-base), border-color var(--t-base), transform var(--t-fast) var(--ease-out); }
.quiz-opt span { flex: 1; min-width: 0; overflow-wrap: anywhere; }
/* app.css задаёт колонки 1fr 1fr, а у 1fr минимум — самое длинное слово: «прикосновением»
   раздвигало свою колонку (142 / 174 px). minmax(0,1fr) держит колонки равными; вариант из
   одного длинного слова переносится по слогам (язык — lang у .quiz-opts), у фраз слоги не
   рвём — «больше спо-койных дней» хуже переноса по словам; overflow-wrap — последний запас. */
.quiz-opt span.qo-one { -webkit-hyphens: auto; hyphens: auto; }
.quiz-opts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.qo-ring { flex: none; width: 20px; height: 20px; border-radius: 50%; position: relative;
  border: 2px solid color-mix(in oklab, var(--muted) 45%, transparent); transition: border-color var(--t-base); }
.qo-ring::after { content: ''; position: absolute; inset: 3px; border-radius: 50%; background: var(--us);
  transform: scale(0); transition: transform var(--t-fast) var(--ease-spring); }
.quiz-opt.sel { background: var(--us-soft); border-color: color-mix(in oklab, var(--violet) 55%, transparent); font-weight: 600; }
.quiz-opt.sel .qo-ring { border-color: var(--violet); }
.quiz-opt.sel .qo-ring::after { transform: scale(1); }
.quiz-score { text-align: center; padding: 20px 16px 16px; }
.qs-rings { display: flex; justify-content: center; gap: 32px; }
.qs-ring { display: flex; flex-direction: column; align-items: center; }
.qs-ring .ring-val { font-size: 22px; }
.qs-who { margin-top: 8px; font-size: 12.5px; font-weight: 600; color: var(--muted); max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qs-sub { margin-top: 12px; }
.quiz-res .ok, .quiz-res .no { display: inline-flex; vertical-align: -3px; margin-right: 2px; }
.quiz-res .ok { color: var(--ok); } .quiz-res .no { color: var(--danger); }
/* отвеченный вопрос свёрнут в строку-итог; тап раскрывает его обратно */
.quiz-list { display: flex; flex-direction: column; gap: 12px; }
.quiz-list .quiz-q { margin: 0; }
.quiz-q-done { display: block; width: 100%; text-align: left; color: var(--text); padding: 12px 16px; }
.quiz-q-done .quiz-qt { display: block; font-size: 17px; margin-bottom: 4px; }
.quiz-sum { display: block; font-size: 13.5px; line-height: 1.4; color: var(--muted); }
.quiz-sum b { color: var(--text); font-weight: 600; }
.quiz-sum .ok { color: var(--ok); display: inline-flex; vertical-align: -3px; margin-right: 2px; }
/* пока не всё отвечено — обычная контурная кнопка с понятным текстом «Осталось ответить: N»,
   а не полупрозрачная аврора, которую на тёмной теме было не прочесть */
.quiz-send[disabled] { opacity: 1; background: transparent; color: var(--muted); border: 1px solid var(--border); box-shadow: none; text-shadow: none; }
.quiz-hist { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); padding: 4px 14px; box-shadow: var(--shadow); }

/* ---------- Ближе: карточка вопроса display-шрифтом, вкладки-пилюля ---------- */
.closer-stats { gap: 8px; }
.cs-item { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); box-shadow: var(--shadow); padding: 10px 6px; }
.cs-item b { font-family: var(--font-display); font-size: 24px; font-weight: 600; line-height: 1.05; display: flex; align-items: center; justify-content: center; gap: 4px;
  font-variant-numeric: lining-nums tabular-nums; }   /* у Cormorant цифры по умолчанию старостильные: «11» читалось как «II», «0» — как «o» */
.closer-tabs { background: var(--surface-2); border-radius: 999px; padding: 4px; gap: 3px; }
.closer-tabs button { border-radius: 999px; font-size: 12.5px; padding: 8px 6px; display: inline-flex; align-items: center; justify-content: center; gap: 4px; white-space: nowrap; }
.closer-tabs button.on { background: var(--surface); color: var(--text); box-shadow: var(--shadow); }
.cl-qcard { padding: 20px 18px 18px; border-radius: var(--r-xl); }
.cl-src { display: flex; align-items: center; gap: 4px; letter-spacing: .06em; text-transform: uppercase; font-size: 11px; }
.cl-qtext.display { font-size: 26px; line-height: 1.2; font-weight: 600; letter-spacing: -.01em; text-wrap: balance; }
.cl-hist .cl-qtext, .cl-manage .cl-qtext { font-weight: 600; }
.cl-opt { border-radius: var(--r-md); border: 1.5px solid transparent; min-height: 48px; transition: background var(--t-base), border-color var(--t-base), transform var(--t-fast) var(--ease-out); }
.cl-opt.on { border-color: color-mix(in oklab, var(--violet) 55%, transparent); background: var(--us-soft); }
.cl-opt.cl-own { color: var(--violet-text); display: flex; align-items: center; gap: 6px; }
.cl-ans { border-radius: var(--r-md); }
.cl-ans.mine { background: var(--us-soft); } .cl-ans.partner { background: var(--him-soft); }
.cl-ans.waiting { display: flex; align-items: center; gap: 6px; }
.cl-match.chip { min-height: 30px; font-size: 12.5px; }
.cl-match.ok { color: var(--ok-text); background: color-mix(in oklab, var(--ok) 14%, transparent); }
.cl-match.diff { color: var(--gold-text); background: var(--gold-soft); }
.cl-tag { display: inline-flex; align-items: center; gap: 3px; }
.cl-tag.mine { color: var(--violet-text); background: var(--violet-soft); }
.cl-mbtns { gap: 2px; align-items: center; }
.cl-mbtns .icon-btn { width: 44px; height: 44px; min-width: 44px; min-height: 44px; padding: 0; background: transparent; color: var(--muted); }
.cl-mbtns .icon-btn:active { background: var(--surface-2); }
.fab { display: flex; }
.fab .ic { color: #fff; }

/* ---------- Пари: статус-чипы и кольцо аскезы ---------- */
.bet-card { border-radius: var(--r-lg); }
.bet-head { display: flex; gap: 12px; align-items: flex-start; }
.bet-head .bet-title { flex: 1; min-width: 0; align-self: center; }
.bet-title { font-family: var(--font-display); font-weight: 600; font-size: 21px; line-height: 1.2; letter-spacing: -.01em; }
.bet-due { font-family: var(--font-body); font-size: 12px; font-weight: 500; letter-spacing: 0; }
.bet-stake { margin-top: 10px; display: flex; align-items: center; gap: 6px; color: var(--text); font-weight: 500; }
.bet-status { margin-top: 10px; min-height: 0; }
.bet-card .bet-status:empty { display: none; }
.st-chip { min-height: 28px; font-size: 12.5px; padding: 4px 11px; display: inline-flex; align-items: center; }
.st-chip.st-ok { color: var(--ok-text); background: color-mix(in oklab, var(--ok) 14%, transparent); }
.st-chip.st-gold { color: var(--gold-text); background: var(--gold-soft); }
.st-chip.st-danger { color: var(--danger-text); background: color-mix(in oklab, var(--danger) 12%, transparent); }
.bet-card.st-declared .bet-status { color: inherit; font-weight: inherit; }
.bet-actions { gap: 8px 6px; }
.bet-actions .btn-sm { display: inline-flex; align-items: center; gap: 5px; }
.dare-row { gap: 10px; margin-top: 10px; }
.dare-who { color: var(--muted); } .dare-who.him { color: var(--him-text); } .dare-who.her { color: var(--her-text); }
/* «Challenges · 1» переносилось на вторую строку и раздувало вкладку до 59px: не переносить —
   длинная вкладка сама забирает ширину у соседних (замер: 127 + 108 + 108 из 343) */
.bets-seg button { white-space: nowrap; }
.dare-ring .ring circle { stroke-width: 5; }
.dare-ring .ring-val { font-size: 13px; }
.dare-dots i.on { background: var(--us); }
.dare-dots i.today { border-color: var(--her); }

/* ---------- Списки: карточка-лист, чекбокс с градиентной заливкой ---------- */
.lists-seg { border-radius: 999px; }
.lists-seg button { border-radius: 999px; }
/* font-size 16px: старое правило app.css «font: inherit» давало 15px, и iOS Safari приближал экран при фокусе */
.lists-add .input { flex: 1; min-width: 0; min-height: 46px; border: 1.5px solid transparent; font-size: 16px; }
.lists-add .round-btn.send { width: 46px; height: 46px; border-radius: 50%; color: #fff; font-size: 0; }
.li-list { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 4px 14px; box-shadow: var(--shadow), var(--shadow-inset); }
.li-list .empty { padding: 32px 12px; }
.li-row { min-height: 48px; border-bottom: 1px solid var(--hairline); transition: opacity var(--t-base); }
.li-check span { width: 26px; height: 26px; border: 2px solid color-mix(in oklab, var(--muted) 45%, transparent); background: transparent;
  transition: transform var(--t-fast) var(--ease-spring), background var(--t-base), border-color var(--t-base); }
.li-check span .ic { color: #fff; opacity: 0; transform: scale(.4); transition: transform var(--t-fast) var(--ease-spring), opacity var(--t-fast); }
.li-check:active span { transform: scale(.85); }
.li-row.done .li-check span { background: var(--us); border-color: transparent; transform: scale(1.04); box-shadow: 0 4px 10px color-mix(in oklab, var(--violet) 30%, transparent); }
.li-row.done .li-check span .ic { opacity: 1; transform: none; }
.li-row.done { opacity: .55; }
.li-text { font-size: 15.5px; }
.li-del { display: inline-flex; align-items: center; justify-content: center; color: var(--muted); }
.lists-clear { margin: 10px 0 8px; }

/* ---------- Деньги: герой-сумма, кольцо «кто кому», валюта-сегмент ---------- */
.money-nav { margin: 0; }
.money-nav-btn.icon-btn { background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow); }
.money-month.display { font-size: 22px; font-weight: 600; }
.money-hero { text-align: center; padding: 22px 16px 16px; border-radius: var(--r-xl); }
.money-total .mt-big { font-size: 46px; font-weight: 600; line-height: 1; letter-spacing: -.01em; }
.money-total .mt-second { margin-top: 6px; }
.money-total .mt-cap { letter-spacing: .06em; text-transform: uppercase; font-size: 11px; font-weight: 600; margin-top: 8px; }
.money-balance { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 14px 0 0; min-height: 0; text-align: left; }
.money-balance:empty { display: none; }
.money-balance-txt { display: inline-flex; align-items: center; gap: 4px; flex-wrap: wrap; justify-content: center; }
.money-ring .ring circle { stroke-width: 5; }
.money-ring .ring-val { font-size: 13px; }
.money-list { display: flex; flex-direction: column; }
.money-day { margin: 12px 2px 6px; }
.money-row { border-radius: var(--r-md); box-shadow: var(--shadow), var(--shadow-inset); }
.money-row .m-sum { font-family: var(--font-display); font-weight: 600; font-size: 18px; }
.money-amt.display { font-size: 34px; font-weight: 600; min-height: 56px; }
.money-curs.seg { margin: 10px 0; }
.money-curs.seg button { min-height: 40px; }

/* ---------- Живой разговор: сцена-карточка, кнопка записи с пульсом ---------- */
.live-stage { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-xl); box-shadow: var(--shadow), var(--shadow-inset); padding: 20px 16px; }
.live-tr { font-family: var(--font-display); font-weight: 600; font-size: clamp(30px, 8vw, 40px); line-height: 1.15; letter-spacing: -.01em; }
.live-tr-none { font-size: 22px; color: var(--muted); }
.live-lang { align-self: center; width: auto; margin-bottom: 4px; }
.live-lang button { min-height: 36px; padding: 6px 16px; }
.live-flip { align-self: center; display: inline-flex; align-items: center; gap: 6px; }
.live-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; background: var(--us);
  box-shadow: var(--glow-us), var(--shadow-inset); transition: transform var(--t-fast) var(--ease-spring), background var(--t-base), box-shadow var(--t-base); }
.live-btn.rec { transform: scale(1.1); background: var(--her-fill); box-shadow: var(--glow-her), var(--shadow-inset); }
.live-btn.rec::after { content: ''; position: absolute; inset: -8px; border-radius: 50%; border: 2px solid var(--her); opacity: 0; animation: pulseRing 1.4s ease-out infinite; }
/* font-size 16px: старое правило app.css «font: inherit» давало 15px, и iOS Safari приближал экран при фокусе */
.live-type .input { flex: 1; min-width: 0; min-height: 44px; border: 1.5px solid transparent; font-size: 16px; }
.live-type .round-btn.send { color: #fff; border-radius: 50%; width: 44px; height: 44px; }

/* ---------- Капсула: конверт с золотым сургучом ---------- */
.cap-card { border-radius: var(--r-lg); box-shadow: var(--shadow), var(--shadow-inset); }
.cap-card.sealed { background: linear-gradient(150deg, var(--gold-soft), var(--surface) 62%); }
.cap-card.fresh { animation: none; border-color: color-mix(in oklab, var(--gold) 55%, var(--border));
  box-shadow: 0 0 0 3px var(--gold-soft), 0 10px 28px color-mix(in oklab, var(--gold) 28%, transparent), var(--shadow-inset); }
.cap-wax { width: 44px; height: 44px; color: #fff;
  background: linear-gradient(145deg, color-mix(in oklab, var(--gold) 70%, #fff), var(--gold) 70%);
  border: 2px solid color-mix(in oklab, var(--gold) 35%, var(--surface));
  box-shadow: 0 6px 16px color-mix(in oklab, var(--gold) 45%, transparent), inset 0 1px 0 rgba(255,255,255,.5); }
.cap-wax.open { background: var(--him-soft); color: var(--him); border-color: transparent; box-shadow: none; }
.cap-head b { font-family: var(--font-display); font-size: 19px; font-weight: 600; line-height: 1.2; }
.cap-until { font-family: var(--font-display); font-size: 20px; font-weight: 600; }
.cap-bar > i { background: linear-gradient(90deg, var(--gold), var(--her)); }
.cap-mem { border-radius: var(--r-lg); box-shadow: var(--shadow), var(--shadow-inset); }
.cap-mem-ico { display: inline-flex; margin-top: 2px; }
.mini-del { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 32px; margin: 0 -12px 0 0; color: var(--muted); }   /* зона 44 — через ::after в app.css; отрицательные поля налезали на подпись ниже */
.cap-head { align-items: center; }

/* ---------- Пульс: SVG-кольцо бренда вместо conic-диска ---------- */
.pulse-hero { background: linear-gradient(170deg, var(--her-soft), var(--surface) 60%); padding: 24px 16px 18px; border-radius: var(--r-xl); }
.pulse-ring { background: none; animation: none; }
.pulse-ring::after { display: none; }
.pulse-ring-svg { position: absolute; inset: 0; }
.pulse-ring-svg .ring circle { stroke-width: 3.5; }
.pulse-heart { display: inline-flex; }
.pulse-heart .ic { fill: currentColor; }
.pulse-score.display { font-size: 50px; font-weight: 600; }
/* Подпись балла живёт внутри кольца: внутренний край дуги — 67 px от центра (r 21 и штрих 3.5
   в viewBox 48 при 168 px). В одну строку «ЕСТЬ ПРОВИСАНИЯ» шла на 134 px и углами залезала
   на дугу. Теперь подпись не шире 96 px и переносится ровными строками (balance), разрядка
   чуть меньше, а стопка «сердце · число · подпись» плотнее (у цифр нет нижних выносных,
   запас строки под ними был пустым) и поднята на 10 px — так нижние углы самой длинной
   подписи («ПРОВИСАНИЯ», «ATTENTION») остаются в 5 px от дуги, а у однострочных сердце сверху
   и подпись снизу отстоят от центра одинаково. Замер — в отчёте группы play. */
.pulse-ring .pulse-ring-in { margin-top: -10px; }
.pulse-ring .pulse-score.display { line-height: .9; }
.pulse-ring .pulse-band { font-size: 11px; letter-spacing: .06em; line-height: 1.15; max-width: 96px; margin-inline: auto; text-wrap: balance; }
.pulse-trend { display: inline-flex; align-items: center; gap: 3px; }
.pulse-tip { border-radius: var(--r-lg); border-color: color-mix(in oklab, var(--gold) 40%, var(--border)); }
.pt-ico { background: var(--gold-soft); border-radius: 10px; }
.pulse-list { border-radius: var(--r-lg); box-shadow: var(--shadow); }
.pm-ico { display: inline-flex; color: var(--muted); margin-top: 1px; }
.pulse-row.weak .pm-ico { color: var(--gold); }
.pulse-row.weak { background: color-mix(in oklab, var(--gold) 7%, var(--surface)); }

@media (prefers-reduced-motion: reduce) {
  .live-btn.rec::after, .pulse-heart, .match-pop .mp-card, .match-pop .mp-heart { animation: none !important; }
}