/*
 * style.css — финальный v1-дизайн Mini App «Весёлые Знакомства» (задача 652).
 *
 * Реализует макеты владельца: брендовый градиент, frosted-glass карточки,
 * крупные emoji в мягких «пузырях», типографика Nunito (заголовки) / Inter (текст),
 * анимации slide-up / bounce / confetti. Светлая и тёмная тема Telegram через
 * [data-theme] (app.js пробрасывает colorScheme и themeParams).
 *
 * Логику не трогаем — это чистый слой стиля поверх существующих классов app.js.
 */

:root {
  /* Бренд-градиент (вариант A из v1: фиолетовый → розовый) */
  --grad-from: #7B2FBE;
  --grad-to:   #FF6B9D;
  --grad-cta:  linear-gradient(135deg, #7B2FBE 0%, #FF6B9D 100%);
  --accent:    #FF6B9D;
  --accent-2:  #7B2FBE;

  /* Светлая тема (--tg-* может перекрыться из Telegram.themeParams) */
  --tg-bg:    #f3eefc;
  --tg-text:  #1c1033;
  --card-bg:  rgba(255, 255, 255, 0.62);
  --card-hi:  rgba(255, 255, 255, 0.9);   /* верхний блик стекла */
  --card-brd: rgba(255, 255, 255, 0.75);
  --muted:    rgba(28, 16, 51, 0.55);
  --bubble:   rgba(123, 47, 190, 0.10);   /* подложка под emoji */

  --radius: 26px;
  --radius-sm: 16px;
  --shadow: 0 10px 30px rgba(80, 30, 120, 0.16);
  --shadow-cta: 0 10px 24px rgba(255, 107, 157, 0.40);
  --font:  'Inter', -apple-system, system-ui, sans-serif;
  --font-h:'Nunito', 'Inter', -apple-system, system-ui, sans-serif;
}

body[data-theme="dark"] {
  --tg-bg:    #14101e;
  --tg-text:  #f3eefb;
  --card-bg:  rgba(255, 255, 255, 0.07);
  --card-hi:  rgba(255, 255, 255, 0.16);
  --card-brd: rgba(255, 255, 255, 0.12);
  --muted:    rgba(243, 238, 251, 0.62);
  --bubble:   rgba(255, 255, 255, 0.08);
  --shadow:   0 10px 30px rgba(0, 0, 0, 0.5);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: var(--font);
  color: var(--tg-text);
  min-height: 100vh;
  /* Два мягких градиентных пятна сверху + базовый фон темы. */
  background:
    radial-gradient(90% 55% at 12% -8%,  var(--grad-from), transparent 60%),
    radial-gradient(85% 55% at 95% 2%,   var(--grad-to),   transparent 58%),
    var(--tg-bg);
  background-attachment: fixed;
}

#app { max-width: 440px; margin: 0 auto; padding: 22px 16px 104px; }

/* Экраны: показывается только .active, въезжает снизу. */
.screen { display: none; flex-direction: column; gap: 16px; animation: slideUp .3s ease; }
.screen.active { display: flex; }
@keyframes slideUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

/* ───────── Frosted-glass карточка ───────── */
.glass {
  position: relative;
  background: var(--card-bg);
  border: 1px solid var(--card-brd);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  box-shadow: var(--shadow);
}
/* Тонкий верхний блик — «стекло» получает объём. */
.glass::before {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  background: linear-gradient(180deg, var(--card-hi), transparent 42%);
  opacity: .5; pointer-events: none;
}
.card { border-radius: var(--radius); padding: 20px; }

/* ───────── Типографика ───────── */
h1 { font-family: var(--font-h); font-size: 26px; font-weight: 800; letter-spacing: -.01em; }
h2 { font-family: var(--font-h); font-size: 19px; font-weight: 800; }
.logo { font-family: var(--font-h); font-size: 23px; font-weight: 900; line-height: 1.05; }
.tagline, .muted, small, .hint, .rules, .screen-sub { color: var(--muted); }
.screen-sub { font-size: 15px; margin-top: -6px; }
.emoji { font-size: 50px; line-height: 1; }

/* ───────── Экран 1: лобби ───────── */
.lobby-head { display: flex; align-items: center; gap: 13px; }
.avatar {
  width: 56px; height: 56px; border-radius: 50%; object-fit: cover;
  border: 2px solid var(--card-hi); box-shadow: var(--shadow);
}
.greeting { font-size: 17px; }
.greeting b { font-family: var(--font-h); font-weight: 800; }

/* Игровые карточки: emoji в тинтованном «пузыре», лёгкий лифт на тап. */
.game-card { display: flex; align-items: center; gap: 16px; cursor: pointer; transition: transform .14s, box-shadow .14s; }
.game-card .emoji {
  flex: 0 0 auto;
  width: 64px; height: 64px; border-radius: 20px;
  display: grid; place-items: center; font-size: 38px;
  background: var(--bubble);
}
.game-card:active { transform: scale(0.975); }
.game-card h2 { margin-bottom: 2px; }
.game-card p { color: var(--muted); font-size: 14px; line-height: 1.3; }

/* Мини-статистика: две колонки с разделителем. */
.stats { display: flex; justify-content: space-around; text-align: center; position: relative; }
.stats > div { flex: 1; }
.stats > div + div { border-left: 1px solid var(--card-brd); }
.stats span { font-family: var(--font-h); font-size: 28px; font-weight: 900; display: block;
  background: var(--grad-cta); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.stats small { color: var(--muted); font-size: 13px; }

/* ───────── Экран 2: сетка тем ───────── */
.theme-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.theme-card { display: flex; flex-direction: column; align-items: center; gap: 10px;
  cursor: pointer; text-align: center; padding: 18px 12px; transition: transform .12s; }
.theme-card:active { transform: scale(0.95); }
.theme-card .emoji {
  width: 60px; height: 60px; border-radius: 18px; display: grid; place-items: center;
  font-size: 34px; background: var(--bubble);
}
.theme-card span:last-child { font-family: var(--font-h); font-weight: 800; font-size: 15px; }

/* Карточки тем «выезжают» снизу по очереди (stagger через --i из app.js). */
.theme-card.enter {
  opacity: 0;
  animation: cardSlideUp .42s cubic-bezier(.21, 1.02, .73, 1) forwards;
  animation-delay: calc(var(--i, 0) * 55ms);
}
@keyframes cardSlideUp {
  from { opacity: 0; transform: translateY(26px) scale(0.96); }
  to   { opacity: 1; transform: none; }
}

/* Bounce на тап по карточке/чипу (класс вешает app.js, снимает по animationend). */
.tap-bounce { animation: tapBounce .34s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes tapBounce {
  0%   { transform: scale(0.94); }
  45%  { transform: scale(1.06); }
  100% { transform: scale(1); }
}

/* ───────── Экран 3: ледокол ───────── */
.badge { align-self: flex-start; background: var(--grad-cta); color: #fff;
  padding: 6px 16px; border-radius: 999px; font-size: 13px; font-weight: 700;
  font-family: var(--font-h); box-shadow: var(--shadow-cta); }
.question {
  font-family: var(--font-h); font-size: 22px; font-weight: 800; line-height: 1.35;
  padding: 22px; border-radius: var(--radius);
  background: var(--card-bg); border: 1px solid var(--card-brd);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  box-shadow: var(--shadow);
}

/* ───────── Поля ввода ───────── */
.input {
  width: 100%; font-family: var(--font); font-size: 16px; color: var(--tg-text);
  background: var(--card-bg); border: 1px solid var(--card-brd);
  border-radius: var(--radius-sm); padding: 15px;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.input::placeholder { color: var(--muted); }
.input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(255, 107, 157, 0.22); }

/* ───────── Экран 4-5: выбор лжи / угадывание ───────── */
.lie-picker { display: flex; gap: 10px; }
.chip {
  flex: 1; padding: 14px; border-radius: var(--radius-sm); font-family: var(--font-h);
  font-weight: 800; font-size: 16px; cursor: pointer;
  background: var(--card-bg); border: 1px solid var(--card-brd); color: var(--tg-text);
  transition: transform .12s, border-color .12s;
}
.chip.selected, .guess-card.selected {
  border-color: var(--accent); color: var(--accent);
  box-shadow: 0 0 0 3px rgba(255, 107, 157, 0.22);
}
.guess-cards { display: flex; flex-direction: column; gap: 12px; }
.guess-card { cursor: pointer; font-size: 16px; line-height: 1.35; transition: transform .12s, border-color .12s; }
.guess-card:active { transform: scale(0.98); }

/* ───────── Кнопки ───────── */
/* Первичная (видимый дубль MainButton): градиент бренда. */
.btn-primary, #random-theme {
  width: 100%; font-family: var(--font-h); font-size: 16px; font-weight: 800;
  color: #fff; cursor: pointer; border: none;
  border-radius: var(--radius-sm); padding: 16px;
  background: var(--grad-cta); box-shadow: var(--shadow-cta);
  transition: transform .12s, box-shadow .12s;
}
.btn-primary:active, #random-theme:active { transform: scale(0.97); }
/* Вторичная: frosted-glass, во всю ширину. */
.btn-secondary {
  width: 100%; font-family: var(--font-h); font-size: 16px; font-weight: 800;
  color: var(--tg-text); cursor: pointer;
  border-radius: var(--radius-sm); padding: 15px;
  background: var(--card-bg); border: 1px solid var(--card-brd);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  transition: transform .12s;
}
.btn-secondary:active { transform: scale(0.97); }
/* #random-theme переопределяет .btn-secondary glass из разметки — гасим лишний блик. */
#random-theme::before { display: none; }

/* ───────── Экран 6: результат ───────── */
.result-icon { font-size: 80px; text-align: center; margin-top: 8px; animation: bounce .55s ease; }
@keyframes bounce { 0% { transform: scale(0.3); } 60% { transform: scale(1.18); } 100% { transform: scale(1); } }
/* «Почти!»: мягкое тёплое покачивание emoji вместо резкого «провала» (app.js: .almost). */
.result-icon.almost { animation: almostSway .6s cubic-bezier(.36, .07, .19, .97); }
@keyframes almostSway {
  0%, 100% { transform: rotate(0); }
  22% { transform: rotate(-8deg); }
  55% { transform: rotate(6deg); }
  82% { transform: rotate(-3deg); }
}
#result-title { text-align: center; }
.reveal {
  font-size: 16px; text-align: center; color: var(--tg-text); line-height: 1.5;
  padding: 20px; border-radius: var(--radius);
  background: var(--card-bg); border: 1px solid var(--card-brd);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}

/* ───────── Confetti (app.js создаёт кусочки при верном ответе) ───────── */
#confetti { position: fixed; inset: 0; overflow: hidden; pointer-events: none; z-index: 50; }
.confetti-piece {
  position: absolute; top: -12px;
  width: 9px; height: 14px; border-radius: 2px;
  will-change: transform, opacity;
  animation: confettiFall var(--dur, 2.4s) cubic-bezier(.2, .6, .35, 1) var(--delay, 0s) forwards;
}
@keyframes confettiFall {
  0%   { opacity: 1; transform: translateY(-12px) translateX(0) rotateZ(0deg); }
  100% { opacity: 0; transform: translateY(105vh) translateX(var(--drift, 0px)) rotateZ(var(--spin, 540deg)); }
}

/* Уважение к prefers-reduced-motion: гасим декоративные анимации. */
@media (prefers-reduced-motion: reduce) {
  .screen, .theme-card.enter, .tap-bounce, .result-icon, .result-icon.almost { animation: none; }
  .theme-card.enter { opacity: 1; }
  #confetti { display: none; }
}