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

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

#mode[data-layout="tune"] .tn-wrap {
  display: grid;
}

.tn-wrap {
  position: absolute;
  left: var(--side);
  right: var(--side);
  top: var(--top-h);
  bottom: var(--scores-h);
  grid-template-columns: 1fr auto;
  grid-template-rows: auto 1fr;
  column-gap: calc(var(--u) * 3);
  align-content: center;
}

.tn-wrap > .brand,
.tn-wrap > .os-title,
.tn-wrap > .os-rules {
  grid-column: 1 / -1;
  justify-self: start;
}

.tn-head {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: calc(var(--u) * 1);
}

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

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

.tn-clue.is-wait {
  font-size: calc(var(--u) * 3.6);
  color: var(--bone-2);
}

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

.tn-stage {
  position: relative;
  align-self: center;
  justify-self: center;
  /* 88 u: дуга (0,56 ширины) + края + заголовок с подсказкой влезают между верхом и табло счёта */
  width: min(100%, calc(var(--u) * 88));
  perspective: calc(var(--u) * 120);
}

.tn-tilt {
  transform: rotateX(24deg);
  transform-origin: 50% 90%;
}

.tn-svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.tn-plate {
  fill: var(--ink-2);
  stroke: var(--ink-3);
  stroke-width: 4;
}

.tn-track {
  fill: none;
  stroke: var(--ink-3);
  stroke-width: 56;
}

.tn-track.is-left {
  stroke: var(--pc-sky);
  opacity: 0.55;
}

.tn-track.is-right {
  stroke: var(--pc-coral);
  opacity: 0.55;
}

.tn-tick {
  stroke: var(--bone-3);
  stroke-width: 4;
  stroke-linecap: round;
}

.tn-band {
  fill: none;
  stroke-width: 56;
}

.tn-band.b2 {
  stroke: var(--brass-lo);
}

.tn-band.b3 {
  stroke: var(--brass);
}

.tn-band.b4 {
  stroke: var(--brass-hi);
}

.tn-band-t {
  font: 900 44px / 1 var(--font-display);
  fill: var(--brass-hi);
  text-anchor: middle;
  dominant-baseline: middle;
}

.tn-mark {
  stroke: var(--pc);
  stroke-width: 10;
  stroke-linecap: round;
}

.tn-needle {
  transition: transform 0.45s cubic-bezier(0.3, 1.3, 0.5, 1);
}

.tn-needle.is-empty {
  opacity: 0.25;
}

.tn-needle__l {
  stroke: var(--bone);
  stroke-width: 14;
  stroke-linecap: round;
}

.tn-hub {
  fill: var(--brass);
  stroke: var(--ink-0);
  stroke-width: 6;
}

.tn-ends {
  display: flex;
  justify-content: space-between;
  /* наклон rotateX сжимает дугу по высоте, а место под ней остаётся — подтягиваем края к концам дуги */
  margin-top: calc(var(--u) * -8);
  font: 800 calc(var(--u) * 3.2) / 1.1 var(--font-text);
}

.tn-end {
  max-width: 40%;
}

.tn-end.is-left {
  color: var(--pc-sky);
}

.tn-end.is-right {
  color: var(--pc-coral);
  text-align: right;
}

.tn-points {
  list-style: none;
  margin: 0;
  padding: 0;
  align-self: center;
  display: grid;
  gap: calc(var(--u) * 1);
  min-width: calc(var(--u) * 30);
}

.tn-points li {
  display: flex;
  justify-content: space-between;
  gap: calc(var(--u) * 2);
  padding: calc(var(--u) * 0.8) calc(var(--u) * 1.6);
  border-left: calc(var(--u) * 0.6) solid var(--pc, var(--brass));
  background: var(--ink-2);
  font: 700 calc(var(--u) * 2.6) / 1.1 var(--font-text);
  color: var(--bone);
}

.tn-points li.is-giver {
  color: var(--bone-2);
}

.tn-points b {
  color: var(--brass-hi);
}

@media (prefers-reduced-motion: reduce) {
  .tn-needle {
    transition: none;
  }
}