/* apps/animate-party/components.css — built on tokens.css
   Один визуальный режим (без dark mode), три поверхности используют один набор компонентов
   с масштабными вариантами --room (display) там, где это объявлено в DESIGN_LANGUAGE.md. */

/* ── 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;
  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;
}
.btn--room { min-height: 64px; font-size: var(--fs-room-label); padding: 0 var(--sp-6); }
@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); }

/* ── Timer ───────────────────────────────────────────────────────── */
.timer {
  font-family: var(--font-display);
  font-variant-numeric: tabular-nums;
  color: var(--c-text);
}
.timer--phone { font-size: var(--fs-display); }
.timer--room  { font-size: var(--fs-room-timer); }
.timer--urgent { color: var(--c-accent); animation: pulse 600ms ease-in-out infinite; }
@keyframes pulse { 50% { opacity: 0.5; } }

/* ── 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;
  background: rgba(23,20,16,0.4);
  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);
}

/* ── RoomCodeDisplay (display-only) ─────────────────────────────── */
.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: 96px; height: 96px;
  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 ────────────────────────────────────────────────── */
.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); }
.roster-item__status--drawing { color: var(--c-accent); }
.roster-item__status--done { color: var(--c-success); }

/* ── AnimationPlayer (плейсхолдер вместо реального canvas-плейбека) ── */
.anim-player {
  aspect-ratio: 1;
  background: var(--c-bg);
  border: var(--bw-thick) solid var(--c-ink);
  border-radius: var(--r-card);
  display: flex; align-items: center; justify-content: center;
  color: var(--c-text-muted);
  font-size: var(--fs-caption);
  position: relative;
  overflow: hidden;
}
.anim-player--room { border-radius: var(--r-card); }
.anim-player__loop-indicator {
  position: absolute; top: var(--sp-2); right: var(--sp-2);
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--c-accent);
  animation: pulse 1000ms ease-in-out infinite;
}

/* ── FakeAnswerForm ──────────────────────────────────────────────── */
.fake-answer-form { display: flex; flex-direction: column; gap: var(--sp-2); }
.fake-answer-form textarea {
  min-height: 64px;
  padding: var(--sp-3);
  border-radius: var(--r-sm);
  border: var(--bw-thick) solid var(--c-line);
  font-size: var(--fs-input, 16px);
  font-family: var(--font-body);
  resize: none;
}
.fake-answer-form textarea:focus { outline: none; border-color: var(--c-accent); }
.fake-answer-form__counter { font-size: var(--fs-label); color: var(--c-text-muted); text-align: right; }

/* ── AnswerOptionCard ────────────────────────────────────────────── */
.answer-option {
  display: block;
  width: 100%;
  text-align: left;
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-sm);
  border: var(--bw-thick) solid var(--c-line);
  background: var(--c-bg);
  font-size: var(--fs-body);
  cursor: pointer;
  transition: border-color var(--transition-base), background var(--transition-base);
}
.answer-option--selected { border-color: var(--c-accent); background: var(--c-bg-elevated); }
.answer-option--reveal-correct { border-color: var(--c-success); background: var(--c-success-bg); font-weight: 600; }
.answer-option--reveal-wrong   { opacity: 0.5; }
.answer-option--reveal-own     { border-style: dashed; }
.answer-option__author { font-size: var(--fs-label); color: var(--c-text-muted); margin-top: var(--sp-1); }

/* ── VoteResultBar ───────────────────────────────────────────────── */
.vote-bar { display: flex; flex-direction: column; gap: var(--sp-1); }
.vote-bar__track {
  height: 12px;
  border-radius: var(--r-sm);
  background: var(--c-bg-elevated);
  overflow: hidden;
}
.vote-bar__fill { height: 100%; background: var(--c-accent); }

/* ── ScoreDelta ──────────────────────────────────────────────────── */
.score-delta {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--c-success);
  font-size: var(--fs-title);
  animation: float-up var(--dur-reveal) var(--ease-spring);
}
@keyframes float-up { from { transform: translateY(8px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

/* ── Leaderboard ─────────────────────────────────────────────────── */
.leaderboard { display: flex; flex-direction: column; gap: var(--sp-1); }
.leaderboard-row {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-sm);
}
.leaderboard-row--room { padding: var(--sp-3) var(--sp-4); font-size: var(--fs-room-label); }
.leaderboard-row--lead { background: var(--c-bg-elevated); font-weight: 700; }
.leaderboard-row__rank { width: 2ch; text-align: center; font-family: var(--font-display); }
.leaderboard-row__name { flex: 1; }
.leaderboard-row__score { font-variant-numeric: tabular-nums; font-weight: 600; }

/* ── FinalPodium (display-only) ─────────────────────────────────── */
.podium { display: flex; align-items: flex-end; justify-content: center; gap: var(--sp-3); }
.podium-stand { display: flex; flex-direction: column; align-items: center; gap: var(--sp-2); }
.podium-stand__bar {
  width: 80px;
  background: var(--c-accent);
  border: var(--bw-thick) solid var(--c-ink);
  border-radius: var(--r-sm) var(--r-sm) 0 0;
  display: flex; align-items: flex-start; justify-content: center;
  padding-top: var(--sp-2);
  font-family: var(--font-display);
  font-size: var(--fs-title);
  color: var(--c-accent-fg);
}
.podium-stand--1 .podium-stand__bar { height: 120px; }
.podium-stand--2 .podium-stand__bar { height: 88px; }
.podium-stand--3 .podium-stand__bar { height: 64px; }

/* ── HostControlBar ──────────────────────────────────────────────── */
.host-control-bar {
  position: sticky; bottom: 0;
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-4);
  background: var(--c-bg-elevated);
  border-top: var(--bw-thick) solid var(--c-ink);
}