/* Соло формата 2 (варианты, части, подсказки, ставки): заводит сборка (quiz2-build-dispatch) пустым, наполняет задача quiz2-solo.
   Всё живёт в .panel под слайдом (не в .slide): тап по кнопкам не открывает крупный вид. Хром — токены --q-* (ui.css). */

/* перерисовка после тапа — без повторной анимации появления строк */
.answers.v2-still .ans,
.answers.v2-still .v2t {
  animation: none;
}

.v2t {
  display: grid;
  gap: 10px;
  padding: 12px;
  border-radius: var(--q-radius);
  border: 1px solid var(--q-line);
  background: var(--q-surface);
  color: var(--q-fg);
  animation: q-rise var(--q-base) var(--q-ease) both;
  animation-delay: calc(var(--k, 0) * 35ms);
}

.v2t:has(> .v2-know:only-child) {
  padding: 0;
  border: 0;
  background: transparent;
}

.v2-row {
  display: grid;
  grid-template-columns: 36px 1fr auto;
  gap: 12px;
  align-items: start;
}

.v2-row--ans {
  grid-template-columns: 1fr auto;
}

.v2-row .no {
  padding-top: 3px;
  font: 600 15px/1 var(--q-mono);
  color: var(--q-accent-hi);
}

.v2t .tx {
  font-size: 18px;
  font-weight: 600;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.v2t .nt {
  display: block;
  margin-top: 3px;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.4;
  color: var(--q-muted);
}

.v2-lbl {
  margin: 0;
  font-size: 16px;
  line-height: 1.35;
  color: var(--q-muted);
}

.v2-lbl b {
  color: var(--q-fg);
}

.v2-note {
  margin: 0;
  font-size: 16px;
  color: var(--q-muted);
}

.v2-pts {
  font: 600 16px/1.3 var(--q-mono);
  color: var(--q-muted);
}

.v2-pts.is-right {
  color: var(--q-ok);
}

.v2-pts.is-wrong {
  color: var(--q-accent-hi);
}

/* варианты: pick и порядок */
.v2-opts {
  display: grid;
  gap: 8px;
}

.v2-opt {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: var(--q-tap);
  padding: 10px 14px;
  text-align: left;
  font: 600 17px/1.3 var(--q-text);
  border-radius: var(--q-radius);
  border: 1px solid var(--q-line);
  background: var(--q-raised);
  color: var(--q-fg);
  cursor: pointer;
  overflow-wrap: anywhere;
  transition:
    background-color var(--q-fast) var(--q-ease),
    border-color var(--q-fast) var(--q-ease),
    transform var(--q-fast) var(--q-ease);
}

.v2-opt:not(:disabled):active {
  transform: scale(0.98);
}

.v2-opt:disabled {
  cursor: default;
  opacity: 1;
}

.v2-opt.is-right {
  background: var(--q-ok-bg);
  border-color: var(--q-ok);
}

.v2-opt.is-wrong {
  background: oklch(0.63 0.19 30 / 0.14);
  border-color: var(--q-accent);
}

.v2-pos {
  display: grid;
  place-items: center;
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid var(--q-line);
  font: 600 15px/1 var(--q-mono);
  color: var(--q-accent-hi);
}

.v2-pos:empty {
  border-style: dashed;
}

.v2-opt.is-right .v2-pos {
  border-color: var(--q-ok);
  color: var(--q-ok);
}

.v2-opt.is-wrong .v2-pos {
  border-color: var(--q-accent);
}

.v2-reset {
  justify-self: start;
}

/* сегменты: «Угадал / Ошибся / Пропуск», подсказки, ответ на ставку */
.v2-seg {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.v2-seg button,
.v2-chip,
.v2-stake,
.v2-step {
  min-height: var(--q-tap);
  padding: 0 14px;
  font: 600 16px/1.2 var(--q-text);
  border-radius: var(--q-radius);
  border: 1px solid var(--q-line);
  background: var(--q-raised);
  color: var(--q-fg);
  cursor: pointer;
  transition:
    background-color var(--q-fast) var(--q-ease),
    border-color var(--q-fast) var(--q-ease);
}

.v2-seg button {
  flex: 1 1 auto;
}

.v2-seg small,
.v2-stake small {
  font: 500 13px/1 var(--q-mono);
  color: var(--q-muted);
}

.v2-seg button[aria-pressed="true"],
.v2-chip[aria-pressed="true"] {
  background: var(--q-ok-bg);
  border-color: var(--q-ok);
}

.v2-seg button[data-v="-1"][aria-pressed="true"],
.v2-seg button[data-act="ok"][data-v="0"][aria-pressed="true"] {
  background: oklch(0.63 0.19 30 / 0.14);
  border-color: var(--q-accent);
}

.v2-seg button[data-v="0"][aria-pressed="true"]:not([data-act="ok"]) {
  background: var(--q-surface);
  border-color: var(--q-muted);
}

/* части ответа */
.v2-chips {
  display: grid;
  gap: 6px;
}

.v2-chip {
  padding: 10px 14px;
  text-align: left;
  font-weight: 500;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.v2-chip b {
  font-weight: 700;
}

/* степпер count */
.v2-count {
  display: flex;
  align-items: center;
  gap: 10px;
}

.v2-count .v2-lbl {
  flex: 1;
}

.v2-step {
  width: var(--q-tap);
  padding: 0;
  font-size: 20px;
}

.v2-step:disabled {
  opacity: 0.4;
  cursor: default;
}

.v2-count output {
  min-width: 2ch;
  text-align: center;
  font: 700 22px/1 var(--q-display);
}

.v2-count > span:not(.v2-lbl) {
  font-size: 16px;
  color: var(--q-muted);
}

/* ставки */
.v2-stakes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.v2-stake {
  display: grid;
  place-items: center;
  gap: 2px;
  min-height: 56px;
  font: 700 22px/1 var(--q-display);
}

.v2-stake:not(:disabled):hover {
  border-color: var(--q-accent);
}

.v2-stake:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.v2-know {
  width: 100%;
}

/* до ставки вопрос скрыт: дека и медиа невидимы, на их месте подсказка */
.solo-frame.v2-stake-wait .deck,
.solo-frame.v2-stake-wait .media-layer {
  visibility: hidden;
}

.solo-frame.v2-stake-wait .zoom-btn {
  display: none;
}

.solo-frame.v2-stake-wait::after {
  content: "Сначала ставка — вопрос откроется после выбора";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 16px;
  text-align: center;
  font: 600 16px/1.35 var(--q-text);
  color: var(--q-muted);
  background: var(--q-stage);
}

@media (prefers-reduced-motion: reduce) {
  .v2t {
    animation: none;
  }
}