@import url('/fonts/fonts.css');

/* Візуальна мова 1:1 з comms-office / mindset: та сама палітра, ті самі дві
 * гарнітури (Onest — текст, Unbounded — дисплей), та сама єдина крива
 * анімації, ті самі 5px радіуса й 1px лінії. Продукти одного офісу мусять
 * читатись як один продукт.
 *
 * Дві відмінності від дашборда, і обидві продиктовані пляжем, а не смаком:
 * 1) МАСШТАБ. Дашборд читають із рук у приміщенні; це — на сонці, однією
 *    рукою, у мокрому купальнику. Тому базові 17px замість 16, кнопки від
 *    56px заввишки і таймер на пів екрана.
 * 2) КОНТРАСТ. `--soft` (#6B625F) на папері дає ~5:1 — у приміщенні добре, під
 *    прямим сонцем зникає. Тому все, що треба прочитати ЗАРАЗ (ім'я партнера,
 *    запитання, таймер), малюється `--ink`, а `--soft` лишається тільки
 *    підписам, які можна й не прочитати.
 */
:root {
  --pink: #E0117E; --pink-soft: #FCE7F1; --pink-dark: #B00D64;
  --ink: #14110F; --body: #332C2A; --soft: #6B625F;
  --line: #E7DFE3; --paper: #FAF7F8; --card: #FFFFFF;
  --ok: #009E5C; --crit: #B3382F; --warn: #C4700B;
  --ease: cubic-bezier(.22,.75,.28,1);
  /* Висота, нижче якої палець промахується. Взято не зі стелі: 44px — поріг
     Apple HIG, 56 — те, що працює, коли рука мокра й людина йде. */
  --tap: 56px;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--paper); color: var(--body);
  font-family: 'Onest', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size: 17px; line-height: 1.55; -webkit-font-smoothing: antialiased;
  /* Горизонтального прокручування не буває в принципі — вимога ТЗ. */
  overflow-x: hidden;
  /* `dvh`, а не `vh`: на iOS адресний рядок з'їдає нижні 60px, і кнопка
     «Приєднатися» опинялася під ним рівно доти, доки людина не здогадається
     прокрутити сторінку, на якій нічого прокручувати. */
  min-height: 100dvh;
  padding-bottom: env(safe-area-inset-bottom);
}
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

a { color: var(--pink); }
:focus-visible { outline: 3px solid var(--pink); outline-offset: 3px; border-radius: 4px; }
.disp { font-family: 'Unbounded', sans-serif; font-weight: 800; letter-spacing: -.04em; }
.num { font-variant-numeric: tabular-nums; }
.eyebrow {
  font-size: 11px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--soft);
}
.hide { display: none !important; }

/* ── каркас ────────────────────────────────────────────────────────────── */
.wrap { max-width: 560px; margin: 0 auto; padding: 0 18px; }
.screen { padding: 22px 0 40px; }
/* Екран, у якого вміст мусить стояти по центру висоти (пошук пари, таймер):
   тут головне — одна річ, і вона має бути навпроти очей, а не під шапкою. */
.screen.mid {
  min-height: calc(100dvh - var(--bar-h, 0px));
  display: flex; flex-direction: column; justify-content: center;
}

/* ── смуга «немає зв'язку» ─────────────────────────────────────────────── */
/* Показується ТІЛЬКИ коли зв'язку немає. Постійне «на зв'язку» — напис, який
   завжди правдивий і тому нічого не означає.
   Крапка НЕ блимає. Блимання доречне для аварії, яку треба помітити негайно;
   тут же коротка втрата мережі на пляжі — норма, застосунок її переживає, і
   миготіння в кутку читалося як «усе зламалось». Статична смуга повідомляє
   рівно стільки, скільки треба. */
.conn {
  display: none; position: fixed; top: 0; left: 0; right: 0; z-index: 30;
  align-items: center; justify-content: center; gap: 8px;
  padding: 7px 14px calc(7px + env(safe-area-inset-top));
  font-size: 13px; font-weight: 700; color: #fff; background: var(--crit);
}
.conn.off { display: flex; }
.conn .dot { width: 8px; height: 8px; background: #fff; flex: none; opacity: .85; }
@keyframes blink { 50% { opacity: .25; } }

/* ── кіт ───────────────────────────────────────────────────────────────── */
.cat { margin: 0 auto 18px; width: fit-content; }
.cat-gif { display: block; max-width: 180px; max-height: 180px; border-radius: 5px; }
/* Запасний варіант — емодзі, який крутиться й підстрибує. Не «заглушка на
   потім»: він важить нуль байтів, працює офлайн і на пляжі показується
   миттєво, тоді як гіфка на поганому 3G доїжджає останньою. */
.cat-emoji { font-size: 92px; line-height: 1; animation: catspin 2.4s var(--ease) infinite; }
@keyframes catspin {
  0%   { transform: rotate(0deg)    scale(1);    }
  25%  { transform: rotate(-14deg)  scale(1.08); }
  50%  { transform: rotate(0deg)    scale(1);    }
  75%  { transform: rotate(14deg)   scale(1.08); }
  100% { transform: rotate(360deg)  scale(1);    }
}

/* ── типографіка екранів ───────────────────────────────────────────────── */
h1.title {
  font-family: 'Unbounded', sans-serif; font-weight: 800; letter-spacing: -.045em;
  font-size: clamp(30px, 9vw, 42px); line-height: 1.05; color: var(--ink);
  margin: 0 0 14px; text-wrap: balance;
}
h2.sub {
  font-size: 20px; font-weight: 700; color: var(--ink); margin: 0 0 10px;
  letter-spacing: -.01em; text-wrap: balance;
}
p.lead { font-size: 17px; color: var(--body); margin: 0 0 22px; text-wrap: pretty; }
p.small { font-size: 14px; color: var(--soft); margin: 10px 0 0; }

/* ── картки ────────────────────────────────────────────────────────────── */
.card {
  background: var(--card); border: 1px solid var(--line); border-radius: 5px;
  padding: 18px 18px; margin-bottom: 14px;
}
.card.accent { border-color: var(--pink); box-shadow: 0 0 0 1px var(--pink); }

/* ── кнопки ────────────────────────────────────────────────────────────── */
.btn {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  width: 100%; min-height: var(--tap); padding: 14px 20px;
  font: inherit; font-size: 18px; font-weight: 700; letter-spacing: -.01em;
  border-radius: 5px; border: 1px solid var(--pink); background: var(--pink);
  color: #fff; cursor: pointer; text-decoration: none;
  transition: background .18s var(--ease), transform .12s var(--ease);
}
.btn:active { transform: scale(.985); }
.btn:hover { background: var(--pink-dark); border-color: var(--pink-dark); }
.btn[disabled] { opacity: .45; pointer-events: none; }
.btn.ghost { background: var(--card); color: var(--ink); border-color: var(--line); }
.btn.ghost:hover { border-color: var(--pink); background: var(--card); }
.btn.quiet { background: transparent; border-color: transparent; color: var(--soft); font-size: 15px; min-height: 44px; }
.btn.quiet:hover { color: var(--pink); background: transparent; }
.btn.danger { background: var(--crit); border-color: var(--crit); }
.btn.sm { font-size: 15px; min-height: 44px; padding: 9px 14px; width: auto; }
.btns { display: flex; flex-direction: column; gap: 10px; }
.btns.row { flex-direction: row; }
.btns.row .btn { flex: 1; }

/* ── поля ──────────────────────────────────────────────────────────────── */
label.field { display: block; margin-bottom: 14px; }
label.field > span { display: block; font-size: 13px; font-weight: 700; color: var(--soft); margin-bottom: 6px; letter-spacing: .02em; }
input[type=text], input[type=password], textarea, select {
  width: 100%; font: inherit; font-size: 18px; color: var(--ink);
  background: var(--card); border: 1px solid var(--line); border-radius: 5px;
  padding: 14px 14px; min-height: var(--tap);
  transition: border-color .2s var(--ease);
}
/* 18px — не естетика. Нижче 16px мобільний Safari АВТОМАТИЧНО зумить сторінку
   при фокусі поля й назад уже не повертає: людина лишається на збільшеній
   сторінці, яку тепер треба возити пальцем. */
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--pink); box-shadow: 0 0 0 2px var(--pink-soft); }
textarea { min-height: 92px; resize: vertical; line-height: 1.5; }

.err {
  background: #FDECEA; border: 1px solid #F3C4BF; color: #8A241D;
  border-radius: 5px; padding: 12px 14px; font-size: 15px; margin-bottom: 14px;
  line-height: 1.5;
}
.warnbox {
  background: var(--pink-soft); border: 1px solid #F6C8DF; color: #8A0E4E;
  border-radius: 5px; padding: 12px 14px; font-size: 15px; margin-bottom: 14px; line-height: 1.5;
}

/* ── партнер ───────────────────────────────────────────────────────────── */
/* Ім'я — найбільший текст на екрані після таймера, бо це єдине, що людині
   треба зчитати, підводячись із рушника. */
.partner-name {
  font-family: 'Unbounded', sans-serif; font-weight: 800; letter-spacing: -.045em;
  font-size: clamp(30px, 10vw, 46px); line-height: 1.06; color: var(--ink);
  margin: 6px 0 4px; text-wrap: balance;
}
/* Кодове слово. Прямокутник, а не «пігулка»: скруглення 999px тут читалося як
 * чужий елемент — на всій сторінці радіус 5px, і одна кругла форма посеред
 * прямих кутів ламала систему. Той самий радіус, що в карток і кнопок. */
.code {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--pink); color: #fff; border-radius: 5px;
  padding: 12px 20px; font-size: 22px; font-weight: 800;
  letter-spacing: .02em; margin-top: 14px;
}
.trio-note { font-size: 15px; color: var(--soft); margin-top: 12px; }

/* ── таймер ────────────────────────────────────────────────────────────── */
/* `clamp` від ширини екрана: на 320px це ~92px, на 430px — ~124px. Фіксувати
   в px не можна — на SE таймер вилазив за край і переносився цифрами. */
.timer {
  font-family: 'Unbounded', sans-serif; font-weight: 800; letter-spacing: -.05em;
  font-variant-numeric: tabular-nums;
  font-size: clamp(76px, 29vw, 132px); line-height: 1; color: var(--ink);
  text-align: center; margin: 10px 0 6px;
  transition: color .3s var(--ease);
}
.timer.warn { color: var(--pink); animation: beat .9s var(--ease) infinite; }
.timer.over { color: var(--soft); }
@keyframes beat { 50% { transform: scale(1.035); } }
.question {
  font-size: clamp(20px, 5.6vw, 26px); font-weight: 700; color: var(--ink);
  line-height: 1.32; letter-spacing: -.02em; text-wrap: pretty; margin: 0;
}

/* ── список людей (квест, номінації) ───────────────────────────────────── */
.people { display: flex; flex-direction: column; gap: 8px; margin: 14px 0; }
.person {
  display: flex; align-items: center; gap: 12px; width: 100%;
  min-height: var(--tap); padding: 12px 15px; text-align: left;
  font: inherit; font-size: 17px; font-weight: 600; color: var(--ink);
  background: var(--card); border: 1px solid var(--line); border-radius: 5px;
  cursor: pointer; transition: border-color .18s var(--ease), background .18s;
}
.person:hover { border-color: var(--pink); }
.person[aria-pressed="true"] {
  border-color: var(--pink); background: var(--pink-soft); color: var(--pink-dark);
  box-shadow: 0 0 0 1px var(--pink);
}
.person .meta { margin-left: auto; font-size: 12.5px; font-weight: 600; color: var(--soft); flex: none; }
.person[aria-pressed="true"] .meta { color: var(--pink); }
.person .tick { font-size: 20px; color: var(--pink); }

/* ── результати ────────────────────────────────────────────────────────── */
.countdown {
  font-family: 'Unbounded', sans-serif; font-weight: 800;
  font-size: clamp(110px, 42vw, 200px); line-height: 1; color: var(--pink);
  text-align: center;
}
.winner-name {
  font-family: 'Unbounded', sans-serif; font-weight: 800; letter-spacing: -.045em;
  font-size: clamp(32px, 11vw, 52px); line-height: 1.05; color: var(--pink);
  margin: 10px 0; text-wrap: balance;
}
/* ── п'єдестал ─────────────────────────────────────────────────────────── */
.medal-big { font-size: 64px; line-height: 1; margin-bottom: 2px; }
.rest {
  margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 10px;
}
.rest-row { display: flex; align-items: center; gap: 12px; text-align: left; }
.medal-sm { font-size: 26px; line-height: 1; flex: none; }
.rest-name { font-size: 19px; font-weight: 700; color: var(--ink); flex: 1; }
.rest-votes { font-size: 17px; font-weight: 700; color: var(--soft); flex: none; }

.story {
  background: var(--pink-soft); border: 1px solid #F6C8DF; border-radius: 5px;
  padding: 13px 15px; font-size: 16px; color: #8A0E4E; margin-top: 12px; line-height: 1.5;
}
#confetti { position: fixed; inset: 0; pointer-events: none; z-index: 40; }

/* Спалах «Час вийшов». Третій канал сигналу поруч зі звуком і вібрацією —
   і на iPhone найчастіше єдиний, що спрацює: вібрації в Safari немає, а
   бічний перемикач глушить і WebAudio. */
.flash {
  position: fixed; inset: 0; z-index: 45; pointer-events: none;
  display: grid; place-items: center;
  background: var(--pink); color: #fff;
  font-family: 'Unbounded', sans-serif; font-weight: 800; letter-spacing: -.03em;
  font-size: clamp(34px, 11vw, 60px); text-align: center;
  animation: flashout 1.6s var(--ease) forwards;
}
@keyframes flashout {
  0%   { opacity: 0; }
  8%   { opacity: 1; }
  70%  { opacity: 1; }
  100% { opacity: 0; }
}

/* ── низ ───────────────────────────────────────────────────────────────── */
.footer { padding: 26px 0 34px; font-size: 12.5px; color: var(--soft); text-align: center; }

/* Кнопка звуку. Живе внизу, бо це єдина дія, яку людина робить один раз і
   більше про неї не згадує; заважати основному екрану вона не має. */
.sound-bar { position: sticky; bottom: 0; z-index: 15; padding: 10px 0 calc(10px + env(safe-area-inset-bottom)); background: linear-gradient(rgba(250,247,248,0), var(--paper) 40%); }