/* «Три фронта» на большом экране: ворота — колонки, войско — шеренги солдат.
   Размеры от --tf-u (рост солдата), цвет — только из палитры мероприятия. */

.tf-stage{display:flex;flex-direction:column;align-items:center;gap:10px;width:100%;--tf-u:26px;}
.tf-stage.big{--tf-u:clamp(26px,5.2vh,58px);}

/* шапка */
.tf-head{display:flex;align-items:center;gap:clamp(14px,3vw,48px);flex-wrap:wrap;justify-content:center;}
.tf-who{display:flex;align-items:baseline;gap:.4em;font-size:calc(var(--tf-u) * .62);}
.tf-name{font-weight:900;}
.tf-who.s0 .tf-name{color:var(--accent);}
.tf-who.s1 .tf-name{color:var(--blue);}
.tf-dot{width:.55em;height:.55em;border-radius:50%;align-self:center;}
.tf-who.s0 .tf-dot{background:var(--accent);}
.tf-who.s1 .tf-dot{background:var(--blue);}
.tf-points{font-weight:900;color:var(--text);}
.tf-ready{font-size:.55em;font-weight:800;text-transform:uppercase;letter-spacing:.07em;
  color:var(--muted);align-self:center;}
.tf-vs{color:var(--muted);font-weight:800;font-size:calc(var(--tf-u) * .45);}
.tf-round{font-size:calc(var(--tf-u) * .48);font-weight:800;color:var(--muted);
  text-transform:uppercase;letter-spacing:.1em;}

/* ворота */
.tf-gates{display:grid;grid-template-columns:repeat(3,1fr);gap:calc(var(--tf-u) * .5);
  width:100%;max-width:calc(var(--tf-u) * 34);}
.tf-gate{
  display:flex;flex-direction:column;align-items:center;gap:calc(var(--tf-u) * .22);
  background:var(--ink-deep);border:1px solid var(--line);
  border-radius:var(--radius-l);padding:calc(var(--tf-u) * .35);
}
/* Взятые ворота светятся цветом победителя — итог раунда виден одним взглядом. */
.tf-gate.won0{border-color:var(--accent);
  box-shadow:0 0 calc(var(--tf-u) * .7) color-mix(in srgb, var(--accent) 45%, transparent);}
.tf-gate.won1{border-color:var(--blue);
  box-shadow:0 0 calc(var(--tf-u) * .7) color-mix(in srgb, var(--blue) 45%, transparent);}
.tf-worth{font-size:calc(var(--tf-u) * .5);color:var(--gold);letter-spacing:.08em;}

/* шеренга: солдаты в ряд, перенос по ширине ворот */
.tf-rank{display:flex;flex-wrap:wrap;gap:calc(var(--tf-u) * .12);
  justify-content:center;align-items:flex-end;min-height:calc(var(--tf-u) * .95);}
.tf-man{
  display:block;width:calc(var(--tf-u) * .42);height:calc(var(--tf-u) * .9);
  /* Силуэт — маска: цвет приходит из background, значит из палитры. */
  -webkit-mask:var(--tf-man-svg) center/contain no-repeat;
  mask:var(--tf-man-svg) center/contain no-repeat;
  transform-origin:50% 100%;
}
.tf-rank.s0 .tf-man{background:var(--accent);}
.tf-rank.s1 .tf-man{background:var(--blue);}
/* Проигравшая шеренга падает — это и есть «сшибка» на экране. */
.tf-rank.beaten .tf-man{transform:rotate(68deg);opacity:.35;}

.tf-clash{display:flex;align-items:baseline;gap:.25em;font-size:calc(var(--tf-u) * .6);font-weight:900;}
.tf-num.s0{color:var(--accent);}
.tf-num.s1{color:var(--blue);}
.tf-x{color:var(--muted);}
.tf-verdict{font-size:calc(var(--tf-u) * .34);font-weight:800;text-align:center;}
.tf-verdict.s0{color:var(--accent);}
.tf-verdict.s1{color:var(--blue);}
.tf-verdict.tie{color:var(--muted);}
.tf-legend{font-size:calc(var(--tf-u) * .32);color:var(--muted);text-align:center;}

:root{
  /* Солдат: голова + плечи. data-URI, потому что маске нужен именно источник
     картинки, а не разметка; тот же силуэт, что в клиенте игры для людей. */
  --tf-man-svg:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 34"><circle cx="12" cy="7" r="6"/><path d="M3 34c0-8 4-13 9-13s9 5 9 13z"/></svg>');
}

@media (prefers-reduced-motion: reduce){
  .tf-rank.beaten .tf-man{transform:none;}
}