/* «Шляпа» на ТВ (С24). На ходу — кто объясняет и счёт хода крупно (слов на ТВ нет до конца хода); после хода —
   слова в две колонки: угаданные — латунью, пропуски и «не успели» — тусклее. */

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

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

.hat-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: flex-start;
}

.hat-who {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: calc(var(--u) * 2.4);
}

.hat-who .ava {
  width: calc(var(--u) * 11);
  height: calc(var(--u) * 11);
  font-size: calc(var(--u) * 5);
}

.hat-who .os-kicker,
.hat-who .os-title {
  margin: 0;
}

.hat-name {
  font-size: calc(var(--u) * 7.5);
}

.hat-team {
  margin: 0;
  padding: calc(var(--u) * 1) calc(var(--u) * 2);
  border-radius: 999px;
  border: 2px solid var(--pc);
  font: 800 calc(var(--u) * 2.6) / 1 var(--font-text);
  color: var(--bone);
}

.hat-score {
  margin-top: calc(var(--u) * 4);
  display: flex;
  gap: calc(var(--u) * 8);
}

.hat-big {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 1);
}

.hat-big b {
  font: 900 calc(var(--u) * 16) / 0.9 var(--font-display);
  color: var(--brass);
}

.hat-big span {
  font: 700 calc(var(--u) * 2.4) / 1 var(--font-text);
  color: var(--bone-2);
}

.hat-big.is-dim b {
  color: var(--bone-3);
}

.hat-list {
  list-style: none;
  margin: calc(var(--u) * 2) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, calc(var(--u) * 62)));
  gap: calc(var(--u) * 1) calc(var(--u) * 5);
}

.hat-li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: calc(var(--u) * 2);
  padding: calc(var(--u) * 1) calc(var(--u) * 1.6);
  border-left: calc(var(--u) * 0.5) solid var(--line-strong);
}

.hat-li.is-got {
  border-left-color: var(--brass);
}

.hat-li__w {
  font: 800 calc(var(--u) * 3.2) / 1.15 var(--font-text);
  color: var(--bone);
}

.hat-li.is-skip .hat-li__w,
.hat-li.is-late .hat-li__w {
  color: var(--bone-3);
  font-weight: 600;
}

.hat-li__r {
  flex: none;
  font: 700 calc(var(--u) * 1.9) / 1 var(--font-text);
  color: var(--bone-3);
}

.hat-li.is-got .hat-li__r {
  color: var(--brass);
}