/* «Кто из нас?» на ТВ (С28). Вопрос крупно сверху; ряд карточек игроков на сцене, наклонённой к залу (perspective +
   rotateX — объём без теней и градиентов, DESIGN_SPEC, правило 3). Фишки голосов — плоские диски с торцом, стопкой;
   прожектор лидера — плоский полупрозрачный конус латунью. */

#mode .wo-wrap {
  display: none;
}

#mode[data-layout="who"] .wo-wrap {
  display: flex;
}

.wo-wrap {
  position: absolute;
  left: var(--side);
  right: var(--side);
  top: var(--top-h);
  bottom: var(--scores-h);
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: calc(var(--u) * 3);
  perspective: calc(var(--u) * 140);
}

.wo-wrap > .brand,
.wo-wrap > .os-title,
.wo-wrap > .os-rules {
  align-self: flex-start;
}

.wo-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: calc(var(--u) * 1);
  max-width: calc(var(--u) * 150);
}

.wo-head .os-kicker {
  margin: 0;
}

.wo-q {
  margin: 0;
  font: 900 calc(var(--u) * 6) / 1.05 var(--font-text);
  color: var(--bone);
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.wo-count {
  margin: 0;
  font: 700 calc(var(--u) * 2.4) / 1 var(--font-text);
  color: var(--bone-2);
}

.wo-row {
  list-style: none;
  margin: 0;
  padding: calc(var(--u) * 10) 0 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-end;
  gap: calc(var(--u) * 2) calc(var(--u) * 2.4);
  transform: rotateX(16deg);
  transform-origin: 50% 100%;
}

.wo-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: calc(var(--u) * 0.8);
  min-width: calc(var(--u) * 22);
  padding: calc(var(--u) * 1.6) calc(var(--u) * 2.4);
  background: var(--ink-2);
  border-top: calc(var(--u) * 0.6) solid var(--pc);
  /* торец карточки — сплошная полоса снизу: объём без тени */
  border-bottom: calc(var(--u) * 1) solid var(--ink-3);
  border-radius: calc(var(--u) * 1);
}

.wo-name {
  font: 800 calc(var(--u) * 3.4) / 1.1 var(--font-text);
  color: var(--bone);
  white-space: nowrap;
}

.wo-tick {
  width: calc(var(--u) * 2.2);
  height: calc(var(--u) * 2.2);
  border-radius: 50%;
  border: calc(var(--u) * 0.35) solid var(--line-strong);
}

.wo-tick.is-on {
  background: var(--pc);
  border-color: var(--pc);
}

.wo-n {
  font: 900 calc(var(--u) * 6.4) / 1 var(--font-display);
  color: var(--bone-2);
}

.wo-card.is-lead {
  background: var(--ink-3);
  border-bottom-color: var(--brass-lo);
}

.wo-card.is-lead .wo-n {
  color: var(--brass-hi);
}

/* прожектор: плоский конус от верха сцены на лидера */
.wo-spot {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: calc(var(--u) * 36);
  height: calc(100% + var(--u) * 26);
  transform: translateX(-50%);
  background: var(--brass-hi);
  opacity: 0.16;
  clip-path: polygon(42% 0, 58% 0, 100% 100%, 0 100%);
  pointer-events: none;
  animation: wo-spot-in 0.5s ease-out both;
}

@keyframes wo-spot-in {
  from {
    opacity: 0;
  }
}

.wo-stack {
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  min-height: calc(var(--u) * 1.4);
}

/* фишка — диск с торцом; стопка растёт вверх, каждый следующий чуть наезжает на предыдущий */
.wo-chip {
  width: calc(var(--u) * 10);
  height: calc(var(--u) * 2.8);
  margin-top: calc(var(--u) * -1);
  border-radius: 50%;
  background: var(--pc);
  border-bottom: calc(var(--u) * 0.8) solid var(--ink-0);
  animation: wo-chip-in 0.35s cubic-bezier(0.3, 1.4, 0.5, 1) both;
}

.wo-chip:nth-child(2) { animation-delay: 0.08s; }
.wo-chip:nth-child(3) { animation-delay: 0.16s; }
.wo-chip:nth-child(4) { animation-delay: 0.24s; }
.wo-chip:nth-child(5) { animation-delay: 0.32s; }
.wo-chip:nth-child(n + 6) { animation-delay: 0.4s; }

@keyframes wo-chip-in {
  from {
    transform: translateY(calc(var(--u) * -4));
    opacity: 0;
  }
}

/* открытое голосование: кто за этого игрока — именами на цветной полоске */
.wo-voters {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: calc(var(--u) * 0.6);
  max-width: calc(var(--u) * 24);
  min-height: calc(var(--u) * 2.6);
}

.wo-voters li {
  padding: calc(var(--u) * 0.2) calc(var(--u) * 0.8);
  border-left: calc(var(--u) * 0.4) solid var(--pc);
  background: var(--ink-1, var(--ink-0));
  font: 700 calc(var(--u) * 1.8) / 1.2 var(--font-text);
  color: var(--bone-2);
  white-space: nowrap;
}

.wo-foot {
  margin: 0;
  font: 700 calc(var(--u) * 2.6) / 1.2 var(--font-text);
  color: var(--bone-2);
  text-align: center;
}

@media (prefers-reduced-motion: reduce) {
  .wo-spot,
  .wo-chip {
    animation: none;
  }
}