/* Стили конкретных экранов: сплэш, онбординг, «Сегодня», метчи, профиль. */

/* --- Сплэш и системные (центр через margin:auto — скроллится при низком окне) --- */
.splash { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 18px; overflow-y: auto; min-height: 0; }
.splash > :first-child { margin-top: auto; }
.splash > :last-child { margin-bottom: auto; }
.splash .wordmark { font-size: 26px; }

/* --- Онбординг --- */
.ob-head { padding: calc(14px + env(safe-area-inset-top)) 18px 10px; display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.ob-head .ticks { flex: 1; justify-content: center; }
.ob-head .ticks i { flex: 1; max-width: 26px; }
.ob-body { flex: 1; overflow-y: auto; padding: 8px 20px 16px; display: flex; flex-direction: column; gap: 14px; min-height: 0; }
.ob-title { font-size: 24px; font-weight: 600; letter-spacing: -.01em; line-height: 1.2; }
.ob-sub { font-size: 13.5px; color: var(--mut); line-height: 1.5; margin-top: -6px; }
.ob-foot { padding: 10px 20px calc(16px + env(safe-area-inset-bottom)); flex-shrink: 0; display: flex; flex-direction: column; gap: 8px; }
.ob-foot .under { font-size: 11.5px; color: var(--dim); text-align: center; }
#app.tg-main-btn .ob-foot .btn.main-dup { display: none; } /* в Telegram кнопку рисует MainButton */

.iconbtn {
  min-width: 44px; min-height: 44px; display: flex; align-items: center; justify-content: center;
  color: var(--ink); flex-shrink: 0;
}
.txtbtn { font-size: 13.5px; color: var(--mut); min-height: 44px; display: inline-flex; align-items: center; padding: 0 6px; }

.chips-wrap { display: flex; flex-wrap: wrap; gap: 8px; }
.gender-row { display: flex; gap: 8px; }
.gender-row .chip { flex: 1; justify-content: center; min-height: 48px; font-size: 14px; }

/* Строка счётчика подборки: на узких экранах переносится, а не ломает раскладку */
.deck-counter {
  display: flex; justify-content: space-between; align-items: center;
  gap: 6px 12px; flex-wrap: wrap; padding: 12px 20px 10px; flex-shrink: 0;
}
.deck-counter .dc-text { font-size: 12.5px; color: var(--mut); flex: 1 1 auto; min-width: 0; }
.deck-counter .ticks { flex: 0 1 140px; justify-content: flex-end; }

/* --- Сегодня: карточка колоды --- */
.deck-wrap { flex: 1; padding: 0 18px; overflow: hidden; display: flex; min-height: 0; }
.deck-card { flex: 1; overflow: hidden; display: flex; flex-direction: column; min-height: 0; }
.deck-photo {
  flex: 1; min-height: 140px; background: linear-gradient(180deg, var(--ph1), var(--ph2));
  position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.deck-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.deck-photo .tapzone { position: absolute; top: 0; bottom: 0; width: 50%; z-index: 3; }
.deck-photo .tapzone.l { left: 0; } .deck-photo .tapzone.r { right: 0; }
.deck-info { padding: 14px 18px 16px; flex-shrink: 0; }
.deck-name { font-size: 20px; font-weight: 600; display: flex; align-items: center; gap: 7px; }
.deck-bio { font-size: 13px; color: var(--mut); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.deck-tags { display: flex; gap: 6px; margin-top: 10px; flex-wrap: wrap; overflow: hidden; max-height: 66px; }
.deck-tags .chip { font-size: 12px; padding: 5px 10px; }
.deck-topchips { position: absolute; top: 22px; left: 12px; right: 12px; display: flex; justify-content: space-between; z-index: 2; pointer-events: none; }

/* --- Развёрнутая анкета: галерея (тач-свайп + десктоп-управление) --- */
.gallery { position: relative; flex-shrink: 0; }
.full-photos { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 0; scrollbar-width: none; }
.full-photos::-webkit-scrollbar { display: none; }
.full-photos.dragging { scroll-snap-type: none; } /* на время drag мышью снимаем снап */
.full-photos:focus-visible { outline: 2px solid var(--teal); outline-offset: -2px; }
.full-photos > div {
  min-width: 100%; aspect-ratio: 3 / 4; scroll-snap-align: start; position: relative;
  background: linear-gradient(180deg, var(--ph1), var(--ph2)); overflow: hidden;
}
.full-photos img {
  width: 100%; height: 100%; object-fit: cover;
  pointer-events: none; user-select: none; -webkit-user-drag: none; /* drag тащит галерею, не картинку */
}
/* клик-зоны по третям фото (только площадь фото — кнопки ниже не задеваются) */
.gz { position: absolute; top: 0; bottom: 0; width: 33%; z-index: 2; cursor: pointer; }
.gz.l { left: 0; }
.gz.r { right: 0; }
.gz:focus-visible { outline: 2px solid var(--teal); outline-offset: -4px; border-radius: 0; }
/* кликабельные точки-индикаторы: визуал — тонкая линия, зона тапа — 44px по высоте */
.gdots { position: absolute; top: 0; left: 12px; right: 12px; display: flex; gap: 4px; z-index: 3; }
.gdots button { flex: 1; height: 44px; min-width: 24px; position: relative; cursor: pointer; }
.gdots button::after {
  content: ''; position: absolute; left: 0; right: 0; top: 8px; height: 3px;
  border-radius: 2px; background: rgba(255, 255, 255, .38);
}
.gdots button.on::after { background: rgba(255, 255, 255, .95); }
.gdots button:focus-visible { outline: 2px solid var(--teal); outline-offset: -2px; }
.fsec { padding: 14px 20px 0; }
.fsec h3 { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--mut); font-weight: 600; margin: 0 0 7px; }
.fsec p { margin: 0; font-size: 14.5px; line-height: 1.55; white-space: pre-wrap; }
.reasons { display: flex; flex-direction: column; gap: 7px; }
.reasons div { display: flex; gap: 9px; align-items: flex-start; font-size: 14px; line-height: 1.4; }
.reasons svg { flex-shrink: 0; margin-top: 2px; }

/* --- Метч-шит --- */
.match-avas { display: flex; justify-content: center; margin-bottom: 16px; }

/* --- Метчи (список) --- */
.newdot { width: 8px; height: 8px; border-radius: 50%; background: var(--rose); flex-shrink: 0; }

/* --- Профиль --- */
.p-self { margin: 10px 20px 0; padding: 14px 16px; display: flex; align-items: center; gap: 13px; }
.range-dual { display: flex; gap: 8px; align-items: center; }
.range-dual select { flex: 1; }

/* --- Психотип --- */
.psy-card { min-height: 92px; justify-content: center; text-align: center; align-items: center; }
.psy-card b { font-size: 16px; line-height: 1.35; }