/* «Острословы» на ТВ (С16). Плоский слой поверх 3D (DESIGN_SPEC.md, правило 3): без теней, стекла и градиентов;
   латунь — «включено» (идёт голосование, победитель), цвет игрока — только когда автор уже открыт. */

body[data-screen="mode"] #mode {
  opacity: 1;
  visibility: visible;
  transition: opacity var(--t-slow) var(--ease-out), visibility 0s;
}

body[data-screen="mode"] #top {
  opacity: 1;
  transition: opacity var(--t-slow) var(--ease-out);
}

body[data-screen="mode"] #scores {
  opacity: 1;
  transform: none;
  transition: opacity var(--t-slow) var(--ease-out), transform var(--t-slow) var(--ease-out);
}

#mode .os-col,
#mode .os-duel {
  display: none;
}

#mode[data-layout="col"] .os-col,
#mode[data-layout="duel"] .os-duel {
  display: flex;
}

/* ───── колонка слева (подиумы справа — 3D) ───── */
.os-col {
  position: absolute;
  left: var(--side);
  top: var(--top-h);
  bottom: var(--scores-h);
  width: calc(42vw - var(--side));
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}

.os-title {
  margin: calc(var(--u) * 2.4) 0 calc(var(--u) * 1.2);
  font: 800 calc(var(--u) * 6) / 1.02 var(--font-text);
  letter-spacing: -0.025em;
  text-wrap: balance;
}

.os-title--prompt {
  font-size: calc(var(--u) * 5.2);
  color: var(--bone);
}

.os-kicker {
  margin: calc(var(--u) * 2.4) 0 0;
  font: 800 calc(var(--u) * 2.1) / 1 var(--font-display);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--bone-3);
}

.os-sub {
  margin: 0;
  max-width: 34em;
  font: 500 calc(var(--u) * 2.4) / 1.35 var(--font-text);
  color: var(--bone-2);
}

.os-rules {
  list-style: none;
  margin: calc(var(--u) * 2) 0 0;
  padding: 0;
  display: grid;
  gap: calc(var(--u) * 1.8);
}

.os-rules li {
  display: grid;
  grid-template-columns: calc(var(--u) * 5) 1fr;
  align-items: baseline;
  font: 500 calc(var(--u) * 2.6) / 1.3 var(--font-text);
  color: var(--bone);
}

.os-rules b {
  font: 900 calc(var(--u) * 4.2) / 1 var(--font-display);
  color: var(--brass);
}

.os-progress {
  margin-top: calc(var(--u) * 4);
  display: flex;
  align-items: baseline;
  gap: calc(var(--u) * 1.4);
  font: 600 calc(var(--u) * 2.6) / 1 var(--font-text);
  color: var(--bone-2);
}

.os-progress b {
  font: 900 calc(var(--u) * 9) / 0.9 var(--font-display);
  color: var(--brass-hi);
}

.os-chips {
  margin-top: calc(var(--u) * 2.4);
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--u) * 1);
}

.os-chip {
  --pc: var(--bone-2);
  display: inline-flex;
  align-items: center;
  gap: calc(var(--u) * 0.9);
  height: calc(var(--u) * 5);
  padding: 0 calc(var(--u) * 1.6) 0 calc(var(--u) * 0.5);
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  font: 800 calc(var(--u) * 2.2) / 1 var(--font-display);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--bone-3);
  transition: border-color var(--t-base) var(--ease-out), color var(--t-base) var(--ease-out);
}

.os-chip .ava {
  width: calc(var(--u) * 4);
  height: calc(var(--u) * 4);
  font-size: calc(var(--u) * 1.9);
  opacity: 0.35;
  transition: opacity var(--t-base) var(--ease-out);
}

.os-chip.done {
  border-color: var(--pc);
  color: var(--bone);
}

.os-chip.done .ava {
  opacity: 1;
}

.os-chip.off {
  border-style: dashed;
}

.os-table {
  list-style: none;
  margin: calc(var(--u) * 2) 0 0;
  padding: 0;
  display: grid;
  gap: calc(var(--u) * 1);
  width: 100%;
  max-width: calc(var(--u) * 62);
}

.os-table li {
  --pc: var(--bone-2);
  display: grid;
  grid-template-columns: calc(var(--u) * 4) auto 1fr auto;
  align-items: center;
  gap: calc(var(--u) * 1.4);
  height: calc(var(--u) * 6);
  padding: 0 calc(var(--u) * 2);
  border-left: calc(var(--u) * 0.5) solid var(--pc);
  background: var(--ink-1);
  font: 800 calc(var(--u) * 2.8) / 1 var(--font-display);
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.os-table .pl {
  color: var(--bone-3);
}

.os-table .sc {
  font-size: calc(var(--u) * 3.6);
  color: var(--brass);
}

/* ───── дуэль: задание сверху, ответы — героями ───── */
.os-duel {
  position: absolute;
  left: var(--side);
  right: var(--side);
  top: var(--top-h);
  bottom: calc(var(--scores-h) + var(--u) * 2);
  flex-direction: column;
  align-items: center;
  gap: calc(var(--u) * 2.2);
}

.os-duel .os-kicker {
  margin-top: calc(var(--u) * 1.6);
}

.os-prompt {
  margin: 0;
  max-width: calc(var(--u) * 140);
  padding: calc(var(--u) * 2.6) calc(var(--u) * 5);
  border-radius: var(--r-2);
  background: var(--cobalt-deep);
  outline: 1px solid var(--brass-lo);
  outline-offset: calc(var(--u) * -0.9);
  font: 800 calc(var(--u) * 4.6) / 1.12 var(--font-text);
  letter-spacing: -0.015em;
  text-align: center;
  text-wrap: balance;
}

/* Плашки — по содержимому, по центру свободного места: растянутые на всю высоту, они на первом снимке были
   пустыми коробками по 580 px с одной строкой посередине (03.11.2026) */
.os-answers {
  flex: 1;
  width: 100%;
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: minmax(calc(var(--u) * 30), auto);
  align-content: center;
  gap: calc(var(--u) * 3);
  align-items: stretch;
}

.os-answers.many {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: minmax(calc(var(--u) * 20), auto);
  gap: calc(var(--u) * 1.6);
}

.os-answers.many.n2,
.os-answers.many.n4 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.os-answers.many.n7,
.os-answers.many.n8 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.os-answers.many.n9,
.os-answers.many.n10 {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.os-ans {
  --pc: var(--brass);
  position: relative;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: calc(var(--u) * 3) calc(var(--u) * 3.4) calc(var(--u) * 2.4);
  border-radius: var(--r-2);
  background: var(--ink-1);
  border: 1px solid var(--line-strong);
  overflow: hidden;
  transition: border-color var(--t-slow) var(--ease-out), opacity var(--t-slow) var(--ease-out), transform var(--t-slow) var(--ease-spring);
}

.os-ans .bar {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: calc(var(--u) * 0.6);
  background: var(--pc);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t-slow) var(--ease-out);
}

.os-ans .lt {
  position: absolute;
  left: calc(var(--u) * 2.4);
  top: calc(var(--u) * 1.8);
  font: 900 calc(var(--u) * 2.6) / 1 var(--font-display);
  color: var(--brass-lo);
}

.os-ans .tx {
  margin: 0;
  font: 800 calc(var(--u) * 5.4) / 1.12 var(--font-text);
  letter-spacing: -0.02em;
  text-align: center;
  text-wrap: balance;
  overflow-wrap: anywhere;
}

.os-ans .tx[data-len="mid"] {
  font-size: calc(var(--u) * 4.4);
}

.os-ans .tx[data-len="long"] {
  font-size: calc(var(--u) * 3.6);
}

.os-answers.many .tx {
  font-size: calc(var(--u) * 3);
}

/* до четырёх вариантов финала места хватает на кегль дуэли */
.os-answers.many.n2 .tx,
.os-answers.many.n3 .tx,
.os-answers.many.n4 .tx {
  font-size: calc(var(--u) * 4.2);
}

.os-answers.many .tx[data-len="long"] {
  font-size: calc(var(--u) * 2.4);
}

.os-ans .tx.empty {
  color: var(--bone-3);
  font-weight: 600;
}

.os-ans .who {
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: calc(var(--u) * 1.4);
  margin-top: calc(var(--u) * 2.4);
  padding-top: calc(var(--u) * 1.6);
  border-top: 1px solid var(--line);
}

.os-ans .au {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--u) * 1);
  min-width: 0;
  font: 900 calc(var(--u) * 3) / 1 var(--font-display);
  letter-spacing: 0.04em;
  color: var(--pc);
}

.os-ans .au .nm {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.os-ans .vt {
  font: 600 calc(var(--u) * 2.1) / 1 var(--font-text);
  color: var(--bone-2);
}

.os-ans .vt b {
  margin-right: 0.25em;
  font: 900 calc(var(--u) * 3.4) / 1 var(--font-display);
  color: var(--bone);
}

.os-ans .pt {
  font: 900 calc(var(--u) * 4) / 1 var(--font-display);
  color: var(--brass);
}

.os-ans .voters {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--u) * 0.6);
  margin-top: calc(var(--u) * 1.2);
  min-height: calc(var(--u) * 3.4);
}

.os-ans .voters .ava {
  width: calc(var(--u) * 3.4);
  height: calc(var(--u) * 3.4);
  font-size: calc(var(--u) * 1.6);
}

.os-answers.many .os-ans {
  padding: calc(var(--u) * 2.4) calc(var(--u) * 2);
}

.os-answers.many .au {
  font-size: calc(var(--u) * 2.3);
}

.os-answers.many .pt {
  font-size: calc(var(--u) * 2.8);
}

.os-ans.shown {
  border-color: var(--pc);
}

.os-ans.shown .bar {
  transform: none;
}

.os-ans.shown .who {
  display: flex;
}

.os-ans.win {
  border-width: 2px;
  transform: scale(1.02);
}

.os-ans.lose {
  opacity: 0.55;
}

.os-foot {
  min-height: calc(var(--u) * 6);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--u) * 1.6);
  font: 600 calc(var(--u) * 2.4) / 1 var(--font-text);
  color: var(--bone-2);
}

.os-foot .cnt {
  font: 900 calc(var(--u) * 3.6) / 1 var(--font-display);
  color: var(--brass-hi);
}

.os-foot .dots {
  display: inline-flex;
  gap: calc(var(--u) * 0.6);
}

.os-foot .dots .ava {
  width: calc(var(--u) * 4);
  height: calc(var(--u) * 4);
  font-size: calc(var(--u) * 1.9);
}

/* штамп «Всухую!» — как печать вердикта, латунью; остальное («Ничья», «Без боя») — тише */
.os-stamp {
  padding: calc(var(--u) * 1) calc(var(--u) * 2.6);
  border: 2px solid var(--line-strong);
  border-radius: var(--r-1);
  font: 900 calc(var(--u) * 3.6) / 1 var(--font-display);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bone-2);
  animation: os-stamp var(--t-slow) var(--ease-spring) both;
}

.os-stamp.sweep {
  border-color: var(--brass-hi);
  color: var(--brass-hi);
  transform: rotate(-4deg);
}

@keyframes os-stamp {
  from {
    opacity: 0;
    transform: scale(1.4) rotate(-4deg);
  }
}

/* «Острословы» в лобби: у «Своей игры» свои настройки (пакет, кто судит, раунды, финал) — здесь их нет */
body:not([data-game="svoyak"]) #settings .set-svoyak {
  display: none;
}

.lobby-game {
  margin: calc(var(--u) * 1.2) 0 0;
  max-width: 36em;
  font: 500 calc(var(--u) * 2.1) / 1.35 var(--font-text);
  color: var(--bone-3);
}