/* «Испорченный телефон» на ТВ (С23). Шаги — колонка слева «кто сдал»; раскрытие — ряд из последних трёх звеньев:
   новое крупно, прошлые мельче и тусклее. Рисунок — тот же лист бумаги, что у «Каракуль». */

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

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

.tel-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;
}

.tel-tick {
  margin-left: calc(var(--u) * 0.4);
  font: 700 calc(var(--u) * 1.6) / 1 var(--font-text);
  color: var(--bone-3);
}

.os-chip.done .tel-tick {
  color: var(--brass);
}

.tel-head {
  margin: 0 0 calc(var(--u) * 2.4);
  font: 700 calc(var(--u) * 2.6) / 1.2 var(--font-text);
  color: var(--bone-2);
}

.tel-row {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 3);
  width: 100%;
  height: calc(100% - var(--u) * 10);
}

.tel-card {
  margin: 0;
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 1.2);
  width: 24%;
  opacity: 0.55;
  transition: opacity var(--t-base) var(--ease-out);
}

.tel-card.is-new {
  width: 40%;
  opacity: 1;
}

.tel-paper {
  width: 100%;
  aspect-ratio: 1;
  max-height: 58vh;
  background: var(--bone);
  border-radius: calc(var(--u) * 1.2);
  overflow: hidden;
}

.tel-card.is-new .tel-paper {
  max-height: 62vh;
}

.tel-cv {
  display: block;
  width: 100%;
  height: 100%;
}

.tel-text {
  padding: calc(var(--u) * 2.4) calc(var(--u) * 2.8);
  border-radius: var(--r-2);
  border: 1px solid var(--line-strong);
  background: var(--ink-2);
  font: 800 calc(var(--u) * 3) / 1.2 var(--font-text);
  color: var(--bone);
  overflow-wrap: anywhere;
  text-wrap: balance;
}

.tel-card.is-new .tel-text {
  font-size: calc(var(--u) * 4.4);
  border-color: var(--brass);
}

.tel-card figcaption {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(var(--u) * 1);
  font: 700 calc(var(--u) * 2) / 1 var(--font-text);
}

.tel-by {
  padding-left: calc(var(--u) * 1);
  border-left: calc(var(--u) * 0.5) solid var(--pc);
  color: var(--bone-2);
}

.tel-likes-n {
  color: var(--brass);
}