/* apps/animate-hub/components.css — built on tokens.css
   Портировано из apps/animate-party/components.css. Игровые компоненты
   (Timer, AnimationPlayer, FakeAnswerForm, AnswerOptionCard, VoteResultBar,
   ScoreDelta, Leaderboard, FinalPodium, HostControlBar) сюда НЕ перенесены —
   они принадлежат party-игре, которая остаётся в animate-party (см. DESIGN.md
   "hand-off в игровой модуль"). Здесь — только то, что нужно hub/display-waiting/
   browser-join-fallback экранам. */

/* ── Button ──────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  white-space: nowrap;
  gap: var(--sp-2);
  min-height: var(--tap-min);
  padding: 0 var(--sp-5);
  border-radius: var(--r-pill);
  border: var(--bw-thick) solid var(--c-ink);
  font-family: var(--font-display);
  font-size: var(--fs-body);
  font-weight: 600;
  text-decoration: none; /* .btn on <a> (j.html "Открыть в Telegram") — не только <button> */
  cursor: pointer;
  transition: transform var(--transition-base), opacity var(--transition-base);
  background: var(--c-bg-elevated);
  color: var(--c-text);
}
.btn--primary { background: var(--c-accent); color: var(--c-accent-fg); }
.btn--ghost   { background: transparent; border-color: var(--c-line); color: var(--c-text-muted); }
.btn:active   { transform: scale(0.96); }
.btn[disabled], .btn--disabled { opacity: 0.4; pointer-events: none; }
.btn--loading { color: transparent; position: relative; }
.btn--loading::after {
  content: "";
  position: absolute;
  width: 18px; height: 18px;
  border-radius: 50%;
  border: 2.5px solid currentColor;
  border-top-color: transparent;
  color: var(--c-accent-fg);
  animation: spin 700ms linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Input ───────────────────────────────────────────────────────── */
.field { display: flex; flex-direction: column; gap: var(--sp-1); }
.field__label { font-size: var(--fs-caption); color: var(--c-text-muted); }
.input {
  min-height: var(--tap-min);
  padding: 0 var(--sp-4);
  border-radius: var(--r-sm);
  border: var(--bw-thick) solid var(--c-line);
  background: var(--c-bg);
  color: var(--c-text);
  font-size: var(--fs-input, 16px); /* никогда меньше 16px — предотвращает zoom на iOS */
  font-family: var(--font-body);
}
.input:focus { outline: none; border-color: var(--c-accent); }
.input--error { border-color: var(--c-error); }
.field__error { font-size: var(--fs-caption); color: var(--c-error); }
.input[disabled] { opacity: 0.5; }

/* ── Badge ───────────────────────────────────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  padding: var(--sp-1) var(--sp-3);
  border-radius: var(--r-sm);
  font-size: var(--fs-label);
  font-weight: 600;
  border: var(--bw-thick) solid var(--c-ink);
}
.badge--host   { background: var(--c-accent); color: var(--c-accent-fg); }
.badge--status { background: var(--c-bg-elevated); color: var(--c-text-muted); }

/* ── Banner ──────────────────────────────────────────────────────── */
.banner {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-sm);
  border: var(--bw-thick) solid var(--c-ink);
  font-size: var(--fs-caption);
}
.banner--info  { background: var(--c-bg-elevated); color: var(--c-text); }
.banner--error { background: var(--c-error-bg); color: var(--c-error); }

/* ── ConfirmDialog ───────────────────────────────────────────────── */
.dialog-overlay {
  position: absolute; inset: 0;
  /* Нейтральный чёрный, не --c-ink: --c-ink инвертируется в тёмной теме
     (light-ink → dark-fg), из-за чего затемнение overlay в dark mode
     выходило блёкло-серым вместо тёмного скрима (найдено при lookbook QA) */
  background: rgba(0,0,0,0.45);
  display: flex; align-items: center; justify-content: center;
}
.dialog {
  background: var(--c-bg);
  border: var(--bw-thick) solid var(--c-ink);
  border-radius: var(--r-card);
  padding: var(--sp-5);
  max-width: 320px;
  text-align: center;
}
.dialog__actions { display: flex; gap: var(--sp-2); margin-top: var(--sp-4); }

/* ── EmptyState ──────────────────────────────────────────────────── */
.empty-state {
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-2);
  padding: var(--sp-6);
  color: var(--c-text-muted);
  text-align: center;
}

/* ── Card ────────────────────────────────────────────────────────── */
.card {
  background: var(--c-bg-elevated);
  border: var(--bw-thick) solid var(--c-ink);
  border-radius: var(--r-card);
  padding: var(--sp-4);
}
.card--pressable { cursor: pointer; transition: transform var(--transition-base); }
.card--pressable:active { transform: scale(0.97); }

/* ── GameCard (новое) — game-list, композиция поверх Card, не новый примитив ── */
.game-card {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  text-align: left;
  width: 100%;
}
.game-card__icon {
  width: var(--sz-icon-card);
  height: var(--sz-icon-card);
  flex-shrink: 0;
  border-radius: var(--r-sm);
  background: var(--c-bg);
  border: var(--bw-thick) solid var(--c-ink);
  display: flex; align-items: center; justify-content: center;
}
.game-card__body { flex: 1; min-width: 0; }
.game-card__title { font-family: var(--font-display); font-size: var(--fs-title); }
.game-card__hint { font-size: var(--fs-caption); color: var(--c-text-muted); }
.game-card__chevron { color: var(--c-text-muted); flex-shrink: 0; }

/* ── CopyShareRow (новое) — share-screen-link, Card + pill-кнопки, не share-sheet ── */
.copy-share-row { display: flex; gap: var(--sp-3); }
.copy-share-row .btn { flex: 1; }
.copy-share-row .btn svg { width: var(--sz-icon-sm); height: var(--sz-icon-sm); }

/* ── RoomCodeDisplay (display-waiting / share-screen-link) ──────── */
.room-code {
  background: var(--c-ink);
  color: var(--c-bg);
  border-radius: var(--r-card);
  padding: var(--sp-6);
  text-align: center;
}
.room-code__label { font-size: var(--fs-room-label); opacity: 0.7; }
.room-code__value {
  font-family: var(--font-display);
  font-size: var(--fs-room-code);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.05em;
}
.room-code__qr {
  width: var(--sz-qr);
  height: var(--sz-qr);
  margin: var(--sp-4) auto 0;
  background: var(--c-bg);
  border-radius: var(--r-sm);
  display: flex; align-items: center; justify-content: center;
  color: var(--c-ink);
  font-size: var(--fs-label);
}

/* ── PlayerRoster (display-waiting / hub-lobby) ─────────────────── */
.roster { display: flex; flex-direction: column; gap: var(--sp-2); }
.roster-item {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-sm);
  background: var(--c-bg-elevated);
}
.roster-item--room { padding: var(--sp-3) var(--sp-4); font-size: var(--fs-room-label); }
.roster-item__name { font-weight: 600; }
.roster-item__status { font-size: var(--fs-label); color: var(--c-text-muted); }