/* ===== Квиз-Дуэль: стили дуэли (duel/watch) — агент UI-DUEL ===== */

/* --- Чип зрителя --- */
.watch-chip-wrap { text-align: center; margin-bottom: 10px; }

/* --- Скорборд --- */
.scoreboard {
  display: flex; gap: 10px; padding: 12px;
  position: sticky; top: 8px; z-index: 20;
}
.sb-half {
  flex: 1; border-radius: var(--radius-s); padding: 10px 12px;
  background: var(--bg); position: relative; text-align: center;
  min-width: 0;
}
.sb-half.is-me { background: var(--yellow-soft); border: 2px solid var(--yellow); }
.sb-you {
  position: absolute; top: -8px; left: 50%; transform: translateX(-50%);
  background: var(--yellow); border-radius: 999px; font-size: 11px; font-weight: 800;
  padding: 1px 10px; box-shadow: var(--shadow);
}
.sb-name { font-weight: 800; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-team { font-size: 12px; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-score { font-size: 30px; font-weight: 800; line-height: 1.1; margin-top: 4px; }
.round-label { text-align: center; margin: 8px 0 0; font-weight: 700; }

/* --- Карточки игроков (фаза ready) --- */
.player-card { padding: 12px 4px; text-align: center; }
.player-card + .player-card { border-top: 1px solid #EEF0F3; }

/* --- Countdown-оверлей --- */
.countdown-overlay {
  position: fixed; inset: 0; z-index: 80;
  display: flex; align-items: center; justify-content: center;
  background: rgba(51, 51, 51, .55); backdrop-filter: blur(2px);
}
.countdown-num {
  font-size: 120px; font-weight: 800; color: var(--yellow);
  text-shadow: 0 8px 32px rgba(0, 0, 0, .35);
  animation: popIn .45s cubic-bezier(.2, 1.4, .4, 1);
}

/* --- Монетка (flip) --- */
.coin-wrap { perspective: 600px; display: flex; justify-content: center; padding: 10px 0; }
.coin {
  width: 92px; height: 92px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #FFE985, var(--yellow) 60%, var(--yellow-deep));
  box-shadow: var(--shadow-lg), inset 0 -4px 8px rgba(0, 0, 0, .12);
  display: flex; align-items: center; justify-content: center;
  font-size: 44px; font-weight: 800; color: var(--ink);
  animation: coinSpin 1.2s cubic-bezier(.3, .1, .3, 1) forwards;
}
@keyframes coinSpin {
  0% { transform: rotateY(0) translateY(0); }
  50% { transform: rotateY(900deg) translateY(-26px); }
  100% { transform: rotateY(1800deg) translateY(0); }
}
.flip-banner { font-size: 17px; }

/* --- Выбор вопроса (фаза ask) --- */
.q-list { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.q-card {
  width: 100%; text-align: left; cursor: pointer;
  background: var(--bg); border: 2px solid transparent; border-radius: var(--radius-s);
  padding: 14px 16px; font-family: var(--font); font-size: 15px; font-weight: 700; color: var(--ink);
  transition: border-color .12s ease, transform .08s ease, background .12s ease;
}
.q-card:hover { border-color: var(--yellow-deep); background: #fff; }
.q-card:active { transform: scale(.98); }

/* --- Вопрос и варианты (фаза answer) --- */
.ask-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.q-text { font-size: 18px; font-weight: 800; margin: 10px 0 14px; line-height: 1.35; }
.q-text.is-dim { color: var(--ink-faint); font-weight: 700; }
.answers { display: flex; flex-direction: column; gap: 8px; }
.answer-btn {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  background: #fff; border: 2px solid #E8EAEE; border-radius: var(--radius-s);
  padding: 13px 14px; font-family: var(--font); font-size: 15px; font-weight: 700; color: var(--ink);
  cursor: pointer; transition: border-color .12s ease, transform .08s ease, background .12s ease;
}
button.answer-btn:hover { border-color: var(--yellow-deep); }
button.answer-btn:active { transform: scale(.98); }
.ab-idx {
  flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%;
  background: var(--bg); display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 800; color: var(--ink-soft);
}
.answer-btn.is-correct { background: #EDFDF2; border-color: var(--ok); color: #116232; }
.answer-btn.is-correct .ab-idx { background: var(--ok); color: #fff; }
.answer-btn.is-wrong { background: #FFF3F0; border-color: var(--danger); color: #9E2B22; }
.answer-btn.is-wrong .ab-idx { background: var(--danger); color: #fff; }
.answer-btn.is-picked { box-shadow: 0 0 0 3px rgba(255, 221, 45, .55); }
.answer-btn.is-dim { opacity: .55; }
.res-ok { color: var(--ok); }
.res-bad { color: var(--danger); }
.ok-text { color: var(--ok); font-weight: 700; }
.bad-text { color: var(--danger); font-weight: 700; }

/* --- Таймер-кольцо (SVG) --- */
.ring-wrap { position: relative; width: 56px; height: 56px; flex: 0 0 auto; }
.ring-wrap svg { transform: rotate(-90deg); }
.ring-bg { fill: none; stroke: #E8EAEE; stroke-width: 6; }
.ring-fg {
  fill: none; stroke: var(--yellow-deep); stroke-width: 6; stroke-linecap: round;
  transition: stroke .3s ease;
}
.ring-fg.ring-red { stroke: var(--danger); }
.ring-num {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 15px; font-weight: 800; color: var(--ink);
}

/* --- Лента раундов --- */
.rounds-strip { display: flex; gap: 5px; margin-top: 14px; flex-wrap: wrap; justify-content: center; }
.r-cell {
  min-width: 34px; height: 30px; padding: 0 6px; border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 800; color: var(--ink-soft);
  background: #fff; box-shadow: var(--shadow);
}
.r-cell.r-ok { background: #EDFDF2; color: var(--ok); }
.r-cell.r-bad { background: #FFF3F0; color: var(--danger); }
.r-cell.r-cur { background: var(--yellow); color: var(--ink); animation: qd-pulse 1.8s infinite; }
.r-cell.r-todo { opacity: .5; }

/* --- Итог (over / зритель после end) --- */
.over-title { font-size: 24px; font-weight: 800; }
.over-score { font-size: 40px; font-weight: 800; margin: 6px 0; letter-spacing: .04em; }
.round-row {
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
  padding: 7px 0; border-bottom: 1px solid #F0F1F4; font-size: 14px;
}
.round-row:last-child { border-bottom: none; }
.round-row .b { white-space: nowrap; }

/* --- Мелочи --- */
.mb-8 { margin-bottom: 8px; }