/* ============================================================
   PB.Fams — bracket, round-robin, draw / pairing
   Flat: konektor garis solid, feedback via border & warna.
   ============================================================ */

/* ---------- bracket ---------- */
.bracket-scroll{overflow:auto;padding:16px 10px 22px;border-radius:var(--radius)}
.bracket{display:flex;gap:64px;align-items:stretch;min-width:min-content;padding:6px 4px;position:relative}

/* konektor — digambar JS sebagai SVG overlay */
.br-lines{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0;overflow:visible}
.br-lines path{fill:none;stroke:var(--border-strong);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;transition:stroke var(--speed) var(--ease)}
.br-lines path.on{stroke:color-mix(in srgb,var(--primary) 62%,transparent)}

.br-round{display:flex;flex-direction:column;min-width:270px;position:relative;z-index:1}
.br-matches{flex:1;display:flex;flex-direction:column;justify-content:space-around;gap:18px;min-height:120px}
.br-round > h4{
  position:sticky;top:0;z-index:2;width:max-content;margin:0 auto 6px;
  font-size:.66rem;text-transform:uppercase;letter-spacing:.14em;color:var(--muted);font-weight:800;
  text-align:center;padding:7px 16px;
  background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius-pill);
}
.br-round.br-final-round > h4{
  color:var(--accent);border-color:color-mix(in srgb,var(--accent) 42%,transparent);
  background:var(--accent-soft);
}

.br-match{
  position:relative;background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius-sm);padding:8px;display:flex;flex-direction:column;gap:6px;cursor:pointer;
  transition:border-color var(--speed) var(--ease),transform var(--speed) var(--ease),background var(--speed) var(--ease);
}
.br-match:hover{border-color:var(--border-strong);transform:translateY(-2px)}
.br-match.live{
  border-color:color-mix(in srgb,var(--primary) 55%,transparent);
  background:linear-gradient(180deg,color-mix(in srgb,var(--primary-soft) 72%,var(--surface)),var(--surface));
}
.br-match.is-final{border-color:color-mix(in srgb,var(--accent) 38%,transparent);padding:10px}
.br-match.is-final .br-lbl{color:var(--accent)}

.br-top{display:flex;align-items:center;gap:6px;padding:1px 3px 0}
.br-lbl{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.62rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.br-court{
  display:inline-flex;align-items:center;gap:4px;white-space:nowrap;
  font-size:.6rem;font-weight:700;color:var(--muted);
  background:var(--surface-2);border:1px solid var(--border);padding:2.5px 8px;border-radius:var(--radius-pill);
}
.br-court .ic{width:11px;height:11px}
.br-live{
  display:inline-flex;align-items:center;gap:5px;white-space:nowrap;
  font-size:.6rem;font-weight:800;letter-spacing:.08em;color:#fff;
  background:linear-gradient(180deg,#ef5350,#d32f2f);padding:2.5px 9px;border-radius:var(--radius-pill);
}
.br-live i{width:5px;height:5px;border-radius:50%;background:#fff;animation:brpulse 1.2s ease-in-out infinite}
@keyframes brpulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.65)}}

.br-body{display:flex;flex-direction:column}
.br-team{
  position:relative;display:flex;align-items:center;gap:8px;padding:9px 10px 9px 12px;
  border-radius:8px;font-size:.84rem;
  transition:background var(--speed) var(--ease);
}
.br-team + .br-team{border-top:1px solid var(--border)}
.br-team .nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}
.br-team .tbd{color:var(--faint);font-style:italic;font-weight:500}
.br-team .games{display:flex;gap:4px}
.br-team .games b{
  font-family:var(--font-num);font-size:.95rem;font-weight:600;line-height:1;
  min-width:24px;text-align:center;padding:3px 4px;border-radius:6px;
  background:var(--surface-2);color:var(--muted);
}
.br-team.win{background:var(--primary-soft)}
.br-team.win::before{content:"";position:absolute;left:2px;top:7px;bottom:7px;width:3px;border-radius:3px;background:var(--primary)}
.br-team.win .nm{color:var(--primary-2);font-weight:750}
.br-team.win .games b{background:transparent;color:var(--text)}
.br-team.win .games b.g-win{color:var(--primary-2);font-weight:700}
.br-team.lose{opacity:.52}

/* juara */
.br-champ{min-width:230px}
.br-champ .br-matches{justify-content:center}
.champ-card{
  background:linear-gradient(180deg,var(--accent-soft),transparent 70%),var(--surface);
  border:1px solid color-mix(in srgb,var(--accent) 45%,transparent);
  border-radius:var(--radius);padding:26px 18px 22px;text-align:center;position:relative;overflow:hidden;
}
.champ-card::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,transparent,var(--accent),transparent)}
.champ-card .ico{
  display:inline-flex;align-items:center;justify-content:center;width:64px;height:64px;border-radius:50%;
  background:var(--accent-soft);border:1px solid color-mix(in srgb,var(--accent) 40%,transparent);
  animation:bob 2.8s ease-in-out infinite;
}
.champ-card .ico .ic{width:32px;height:32px;stroke-width:1.7;color:var(--accent)}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
.champ-card strong{display:block;margin-top:12px;font-size:1.1rem;color:var(--text-strong)}
.champ-card .champ-lbl{display:block;margin-top:5px;font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);font-weight:800}

/* ---------- round robin cross table ---------- */
.rr-wrap{overflow:auto;border-radius:var(--radius);border:1px solid var(--border);background:var(--surface)}
table.rr{border-collapse:separate;border-spacing:0;font-size:.8rem;min-width:440px}
table.rr th,table.rr td{border:1px solid var(--border);padding:8px 10px;text-align:center;white-space:nowrap}
table.rr th{background:var(--surface-2);font-size:.66rem;color:var(--muted);text-transform:uppercase;letter-spacing:.07em;font-weight:800}
table.rr th.side{text-align:left;position:sticky;left:0;z-index:1;background:var(--surface-2)}
table.rr td.self{background:color-mix(in srgb,var(--surface-3) 60%,transparent)}
table.rr td.win{color:var(--primary-2);font-weight:800}
table.rr td.lose{color:var(--danger)}
table.rr td a{text-decoration:underline dotted}
table.rr tbody tr:hover td{background:color-mix(in srgb,var(--surface-2) 45%,transparent)}

/* ---------- draw / pairing ---------- */
.pair-grid{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(270px,1fr))}
.pair{
  display:flex;align-items:center;gap:11px;background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius);padding:13px;
  transition:border-color var(--speed) var(--ease);
}
.pair:hover{border-color:var(--border-strong)}
.pair .no{font-family:var(--font-num);font-size:1.5rem;font-weight:600;color:var(--faint);width:28px;text-align:center;line-height:1}
.pair .who{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px}
.pair .who strong{display:block;font-size:.9rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pair .who .row-tight{font-size:.84rem}
.pair.shuffling{animation:shuf .5s ease}
@keyframes shuf{0%{filter:blur(6px);opacity:.3;transform:scale(.96)}100%{filter:none;opacity:1}}
.pair.locked{border-color:color-mix(in srgb,var(--accent) 55%,transparent);background:color-mix(in srgb,var(--accent-soft) 45%,var(--surface))}