/* Сетка. Колонка раунда — flex со space-around: матч следующего раунда
   встаёт ровно посередине между двумя своими, без единого вычисления координат.
   JS задаёт только размеры холста и шаг --slot для вертикальных перемычек. */

.stage{position:relative}

.viewport{
  overflow:auto; overscroll-behavior-x:contain;
  padding:0; background:var(--bg);
  scrollbar-width:thin;
  max-height:calc(100dvh - var(--chrome, 108px));
}
.sizer{position:relative; width:calc(var(--bw,1200px) * var(--z,1)); height:calc(var(--bh,600px) * var(--z,1))}
.canvas{position:absolute; inset:0 auto auto 0; transform:scale(var(--z,1)); transform-origin:0 0}

.bracket{
  display:flex; gap:var(--gap,56px); align-items:stretch;
  width:var(--bw,1200px); height:var(--bh,600px); padding:var(--pad,20px);
}
.round{display:flex; flex-direction:column; flex:0 0 var(--cw,252px); width:var(--cw,252px)}
.round-head{
  height:var(--headh,32px); display:flex; align-items:center; gap:8px;
  font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--txt-mute);
}
.round-head b{color:var(--acc); font-weight:700}
.round-head .bo{
  font-size:10.5px; font-weight:600; letter-spacing:.02em; text-transform:none;
  color:var(--txt-mute); border:1px solid var(--line); border-radius:99px; padding:1px 7px;
}
.round-body{flex:1; display:flex; flex-direction:column; justify-content:space-around}

.slot{position:relative; display:flex; align-items:center}

/* перемычки: горизонталь наружу, горизонталь внутрь, вертикаль между парой */
.round:not(:last-child) .slot::after{
  content:''; position:absolute; top:50%; right:calc(-1 * var(--gap,56px) / 2);
  width:calc(var(--gap,56px) / 2); border-top:1px solid var(--line-hi);
}
.round:not(:first-child) .slot::before{
  content:''; position:absolute; top:50%; left:calc(-1 * var(--gap,56px) / 2);
  width:calc(var(--gap,56px) / 2); border-top:1px solid var(--line-hi);
}
.vline{
  position:absolute; top:50%; right:calc(-1 * var(--gap,56px) / 2);
  height:var(--slot,96px); border-right:1px solid var(--line-hi);
}

/* ── карточка матча ──────────────────────────────────────────────────────── */
.match{
  width:100%; background:var(--panel); border:1px solid var(--line);
  border-radius:var(--r2); overflow:hidden; box-shadow:var(--shadow);
}
.m-head{
  display:flex; align-items:center; justify-content:space-between; gap:6px;
  height:var(--headh-m,19px); padding:0 8px;
  background:var(--panel-2); border-bottom:1px solid var(--line);
  font-family:var(--mono); font-size:10.5px; color:var(--txt-mute); line-height:1;
}
.m-head .lobby{font-weight:600; color:var(--txt-dim); letter-spacing:-.02em}
.m-head .tools{display:flex; align-items:center; gap:4px}
.m-head button{
  border:0; background:none; color:var(--txt-mute); cursor:pointer; padding:1px 4px;
  border-radius:var(--r1); font:inherit; font-size:10.5px; line-height:1.4;
}
.m-head button:hover{background:var(--line); color:var(--txt)}

/* Жёсткая сетка сторон: имя и подпись слева, счёт справа через все строки.
   Высоты фиксированы — от них JS считает шаг сетки, и карточки не разъезжаются. */
.side{
  display:grid; grid-template-columns:1fr auto; grid-template-rows:auto auto;
  align-content:center; column-gap:8px;
  height:var(--sideh,32px); padding:0 8px 0 10px; position:relative;
}
.side + .side{border-top:1px solid var(--line)}
.side .nm{
  grid-area:1 / 1; font-size:12.5px; font-weight:500; line-height:1.2;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.side .sub{
  grid-area:2 / 1; font-size:10px; line-height:1.2; color:var(--txt-mute);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.side .sc{
  grid-area:1 / 2 / 3 / 3; align-self:center;
  font-size:15px; font-weight:700; color:var(--txt-dim);
  min-width:14px; text-align:right;
}
.side.empty .nm{color:var(--txt-mute); font-style:italic; font-weight:400}

.side.win::before{
  content:''; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--acc);
}
.side.win .nm{font-weight:700}
.side.win .sc{color:var(--acc)}
.match[data-st="done"] .side:not(.win){opacity:.5}

.match[data-st="live"]{border-color:color-mix(in oklab, var(--warn) 45%, var(--line))}
.match[data-st="live"] .m-head{background:color-mix(in oklab, var(--warn) 14%, var(--panel-2)); color:var(--warn)}
.match[data-st="ready"]{border-color:var(--acc-line)}
.match.bye{opacity:.72; border-style:dashed}
.match.bye .note{height:var(--sideh,32px); display:flex; align-items:center;
  padding:0 10px; font-size:11px; color:var(--txt-mute); border-top:1px solid var(--line)}

/* подсветка команды при наведении/фокусе — видно её путь по сетке */
.side.hl{background:var(--acc-soft)}

/* ── админский режим ─────────────────────────────────────────────────────── */
.match.live-edit .side.pick{cursor:pointer}
.match.live-edit .side.pick:hover{background:var(--acc-soft)}
.match.live-edit .side.pick:hover .nm{color:var(--acc)}
.match.live-edit .side.pick::after{
  content:'+1'; position:absolute; right:32px; top:50%; translate:0 -50%;
  font-size:10px; font-weight:700; color:var(--acc); opacity:0; transition:opacity .12s;
}
.match.live-edit .side.pick:hover::after{opacity:1}

/* ── чемпион ─────────────────────────────────────────────────────────────── */
.champ{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  margin:14px max(14px, env(safe-area-inset-left)) 0;
  padding:14px 18px; border-radius:var(--r3);
  border:1px solid var(--acc-line); background:var(--acc-soft);
}
.champ .cup{font-size:26px; line-height:1}
.champ .who{font-size:19px; font-weight:700}
.champ .second{color:var(--txt-dim); font-size:13.5px}

/* ── пусто ───────────────────────────────────────────────────────────────── */
.empty-state{
  margin:40px auto; max-width:520px; text-align:center; color:var(--txt-dim);
  padding:0 16px; line-height:1.6;
}
.empty-state h2{font-size:18px; margin-bottom:8px; color:var(--txt)}

/* ── мобильные ───────────────────────────────────────────────────────────── */
@media (max-width:640px){
  .top-title h1{font-size:15px}
  .champ{margin-inline:12px; padding:12px 14px}
  .champ .who{font-size:17px}
}

/* ── печать: белый фон, без панелей, сетка вписана в лист ────────────────── */
@media print{
  @page{size:A4 landscape; margin:8mm}
  .viewport{overflow:visible; max-height:none}
  .sizer{width:auto; height:auto}
  .canvas{position:static; transform:scale(var(--pz,.6)); transform-origin:0 0;
          width:calc(100% / var(--pz,.6))}
  .match{box-shadow:none; break-inside:avoid}
  .champ{break-inside:avoid}
}