:root{
  --bg:#0b1020;
  --card:#111a33;
  --muted:#93a4c7;
  --text:#e9f0ff;
  --accent:#51b6ff;
  --accent2:#7c5cff;
  --border:rgba(255,255,255,.08);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;background:
  radial-gradient(1200px 600px at 15% 10%, rgba(124,92,255,.25), transparent 55%),
  radial-gradient(900px 500px at 80% 20%, rgba(81,182,255,.22), transparent 55%),
  var(--bg);
  color:var(--text);
}
a{color:inherit;text-decoration:none}
.container{max-width:1100px;margin:0 auto;padding:18px}

.topbar{position:sticky;top:0;z-index:10;background:rgba(11,16,32,.75);backdrop-filter: blur(10px);border-bottom:1px solid var(--border)}
.topbar__inner{display:flex;align-items:center;gap:16px;justify-content:space-between}
.brand{font-weight:800;letter-spacing:.5px}
.nav{display:flex;gap:14px;flex-wrap:wrap}
.nav a{opacity:.9}
.nav a:hover{opacity:1;color:var(--accent)}
.lang{display:flex;gap:8px}
.chip{border:1px solid var(--border);padding:6px 10px;border-radius:999px;font-size:12px;opacity:.9}
.chip:hover{opacity:1;border-color:rgba(81,182,255,.45)}

.hero{padding:26px 0}
.grid{display:grid;gap:16px}
.grid.two{grid-template-columns:1.3fr .7fr}
@media (max-width:900px){.grid.two{grid-template-columns:1fr}}

.card{background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
  border:1px solid var(--border); border-radius:16px; padding:16px;
  box-shadow: 0 12px 30px rgba(0,0,0,.25);
}
.h1{font-size:34px;line-height:1.15;margin:0 0 10px}
.p{margin:0;color:var(--muted);line-height:1.55}
.badge{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--border);padding:6px 10px;border-radius:999px;font-size:12px;color:var(--muted)}
.badge i{width:8px;height:8px;border-radius:50%;background:var(--accent);display:inline-block;box-shadow:0 0 0 3px rgba(81,182,255,.18)}

.btns{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.btn{padding:10px 14px;border-radius:12px;border:1px solid var(--border);background:transparent;cursor:pointer;font-weight:650}
.btn.primary{background:linear-gradient(90deg, rgba(81,182,255,.9), rgba(124,92,255,.9)); border:0}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0)}

.kv{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}
@media (max-width:520px){.kv{grid-template-columns:1fr}}
.kv .item{border:1px solid var(--border);border-radius:14px;padding:12px}
.kv .k{font-size:12px;color:var(--muted)}
.kv .v{font-size:14px;margin-top:6px}

.section{margin:18px 0}
.section h2{margin:0 0 10px;font-size:18px}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
@media (max-width:900px){.steps{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.steps{grid-template-columns:1fr}}
.step{border:1px solid var(--border);border-radius:14px;padding:12px}
.step .n{font-weight:800;color:var(--accent)}
.step .t{color:var(--muted);margin-top:6px}

.table{width:100%;border-collapse:collapse;overflow:hidden;border-radius:14px;border:1px solid var(--border)}
.table th,.table td{padding:10px 12px;border-bottom:1px solid var(--border);text-align:left;font-size:14px}
.table th{color:var(--muted);font-weight:650}
.small{font-size:12px;color:var(--muted)}
.right{text-align:right}

.field{display:flex;flex-direction:column;gap:6px;margin-bottom:12px}
input,textarea,select{
  padding:10px 12px;border-radius:12px;border:1px solid var(--border);
  background:rgba(255,255,255,.03);color:var(--text);outline:none
}
input:focus,textarea:focus,select:focus{border-color:rgba(81,182,255,.5)}
.hr{height:1px;background:var(--border);margin:14px 0}

.footer{border-top:1px solid var(--border);margin-top:26px;background:rgba(255,255,255,.01)}
.footer__inner{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;color:var(--muted)}
.footer__links{display:flex;gap:12px}
.footer__links a:hover{color:var(--accent)}
/* Bracket layout */
.bracket{
  display:flex;
  gap:18px;
  overflow:auto;
  padding-bottom:6px;
}
.bracket-col{
  min-width:260px;
}
.bracket-col h3{
  margin:0 0 10px;
  font-size:14px;
  color:var(--muted);
  font-weight:700;
}
.bracket-col .sub{
  font-size:12px;
  color:var(--muted);
  margin-top:-6px;
  margin-bottom:10px;
}

.bracket-stack{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.match-card{
  position:relative;
  border:1px solid var(--border);
  border-radius:14px;
  overflow:hidden;
  background:rgba(255,255,255,.02);
}

.match-top{
  padding:8px 10px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  border-bottom:1px solid var(--border);
  font-size:12px;
  color:var(--muted);
}
.tag{
  display:inline-flex;
  align-items:center;
  padding:3px 8px;
  border-radius:999px;
  font-size:11px;
  border:1px solid var(--border);
  color:var(--muted);
}
.tag.finished{ border-color: rgba(81,182,255,.35); color: var(--text); }
.tag.live{ border-color: rgba(124,92,255,.45); color: var(--text); }
.tag.paused{ b

/* Bracket layout */
.bracket{
  display:flex;
  gap:18px;
  overflow:auto;
  padding-bottom:6px;
}
.bracket-col{
  min-width:260px;
}
.bracket-col h3{
  margin:0 0 10px;
  font-size:14px;
  color:var(--muted);
  font-weight:700;
}
.bracket-col .sub{
  font-size:12px;
  color:var(--muted);
  margin-top:-6px;
  margin-bottom:10px;
}
.bracket-stack{
  display:flex;
  flex-direction:column;
  gap:12px;
}

/* Tournament Match Card */
.match-card{
  position:relative;
  border:1px solid rgba(255,255,255,.08);
  border-radius:14px;
  background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
  box-shadow:0 10px 30px rgba(0,0,0,.35);
  overflow:hidden;
  transition:transform .15s ease, box-shadow .15s ease;
  text-decoration:none;
  color:inherit;
}
.match-card:hover{
  transform:translateY(-2px);
  box-shadow:0 16px 40px rgba(0,0,0,.45);
}
.match-top{
  padding:8px 12px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  border-bottom:1px solid rgba(255,255,255,.08);
  font-size:12px;
  color:var(--muted);
}
.match-id{opacity:.85;font-weight:600;}
.tag{
  padding:4px 10px;
  border-radius:999px;
  font-size:11px;
  font-weight:700;
  border:1px solid rgba(255,255,255,.15);
}
.tag.finished{ color:#9be7ff; border-color:rgba(81,182,255,.5); }
.tag.live{ color:#d3b8ff; border-color:rgba(124,92,255,.55); }
.tag.paused{ color:#ffd59b; border-color:rgba(255,180,80,.55); }
.tag.scheduled{ color:#a8b3cf; }

.team-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:11px 14px;
}
.team-row + .team-row{
  border-top:1px solid rgba(255,255,255,.06);
}
.team-name{ font-size:14px; font-weight:800; }
.team-muted{ color:var(--muted); font-weight:600; }
.team-score{ min-width:30px; text-align:right; font-size:14px; font-weight:900; }
.team-row.win{ background:linear-gradient(90deg, rgba(81,182,255,.12), transparent); }
.team-row.lose{ opacity:.55; }

@media (min-width:1100px){
  .bracket{ gap:26px; }
  .bracket-col{ min-width:280px; }
}
/* ===== Match Card – Team Highlight ===== */

.match-card{
  padding:4px; /* внешний воздух внутри карточки */
}

/* Header */
.match-top{
  padding:10px 14px;
}

/* Teams container */
.team-row{
  position:relative;
  padding:14px 16px;
  gap:12px;
}

/* Divider */
.team-row + .team-row{
  border-top:1px solid rgba(255,255,255,.07);
}

/* Team name */
.team-name{
  font-size:15px;
  font-weight:800;
  letter-spacing:.3px;
}

/* Score */
.team-score{
  font-size:15px;
  font-weight:900;
  min-width:36px;
}

/* ===== Winner / Loser visuals ===== */

/* WIN */
.team-row.win{
  background:linear-gradient(
    90deg,
    rgba(60,200,120,.18),
    rgba(60,200,120,.05),
    transparent
  );
}

.team-row.win::before{
  content:"✓";
  position:absolute;
  left:8px;
  top:50%;
  transform:translateY(-50%);
  font-size:14px;
  font-weight:900;
  color:#3cc878;
}

/* LOSE */
.team-row.lose{
  opacity:.45;
}

.team-row.lose::before{
  content:"✕";
  position:absolute;
  left:8px;
  top:50%;
  transform:translateY(-50%);
  font-size:13px;
  font-weight:900;
  color:rgba(255,255,255,.35);
}

/* Adjust text indent because of icons */
.team-row.win .team-name,
.team-row.lose .team-name{
  padding-left:16px;
}
/* meta line under match header */
.match-meta{
  padding:8px 14px 0 14px;
  font-size:12px;
  color:var(--muted);
  display:flex;
  gap:10px;
  justify-content:space-between;
  align-items:center;
}
.match-meta .pill{
  border:1px solid rgba(255,255,255,.10);
  padding:3px 8px;
  border-radius:999px;
  line-height:1;
}
.team-row{ position:relative; }
.team-row.win::before{
  content:"✓";
  position:absolute;
  left:8px; top:50%;
  transform:translateY(-50%);
  font-size:14px; font-weight:900;
  color:#3cc878;
}
.team-row.lose::before{
  content:"✕";
  position:absolute;
  left:8px; top:50%;
  transform:translateY(-50%);
  font-size:13px; font-weight:900;
  color:rgba(255,255,255,.35);
}
.team-row.win .team-name,
.team-row.lose .team-name{ padding-left:16px; }
.team-row.win{
  background:linear-gradient(90deg, rgba(60,200,120,.18), rgba(60,200,120,.05), transparent);
}
.team-row.lose{ opacity:.45; }
/* ===== Bracket: clean aligned layout ===== */

.bracket{
  display:flex;
  gap:26px;
  overflow:auto;
  padding:6px 4px 10px;
}

.bracket-col{
  min-width:280px;
}

.bracket-col h3{
  margin:0 0 8px;
  font-size:14px;
  color:var(--muted);
  font-weight:800;
}

.bracket-col .sub{
  font-size:12px;
  color:var(--muted);
  margin-bottom:12px;
}

/* Fixed card size to align rows */
.match-card{
  display:block;
  border:1px solid rgba(255,255,255,.08);
  border-radius:14px;
  background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
  box-shadow:0 10px 30px rgba(0,0,0,.35);
  overflow:hidden;
  text-decoration:none;
  color:inherit;
  height:118px;            /* IMPORTANT: fixed height */
}

.match-card:hover{
  transform:translateY(-2px);
  box-shadow:0 16px 40px rgba(0,0,0,.45);
}

/* header */
.match-top{
  padding:9px 12px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  border-bottom:1px solid rgba(255,255,255,.08);
  font-size:12px;
  color:var(--muted);
}

.match-id{opacity:.85;font-weight:650;}

/* status */
.tag{
  padding:4px 10px;
  border-radius:999px;
  font-size:11px;
  font-weight:800;
  border:1px solid rgba(255,255,255,.15);
}
.tag.scheduled{ color:#a8b3cf; }
.tag.finished{ color:#9be7ff; border-color:rgba(81,182,255,.5); }
.tag.paused{ color:#ffd59b; border-color:rgba(255,180,80,.55); }
.tag.live{
  color:#d3b8ff;
  border-color:rgba(124,92,255,.55);
  position:relative;
  padding-left:26px;
}

/* LIVE pulsing dot */
.tag.live::before{
  content:"";
  position:absolute;
  left:10px;
  top:50%;
  width:8px;
  height:8px;
  border-radius:50%;
  transform:translateY(-50%);
  background:#7c5cff;
  box-shadow:0 0 0 0 rgba(124,92,255,.55);
  animation:livePulse 1.2s infinite;
}
@keyframes livePulse{
  0%{ box-shadow:0 0 0 0 rgba(124,92,255,.55); }
  70%{ box-shadow:0 0 0 10px rgba(124,92,255,0); }
  100%{ box-shadow:0 0 0 0 rgba(124,92,255,0); }
}

/* meta row: map + score */
.match-meta{
  padding:8px 12px 0 12px;
  font-size:12px;
  color:var(--muted);
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
}
.pill{
  border:1px solid rgba(255,255,255,.10);
  padding:3px 8px;
  border-radius:999px;
  line-height:1;
  white-space:nowrap;
}

/* team rows */
.team-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:10px 12px;
}
.team-row + .team-row{
  border-top:1px solid rgba(255,255,255,.06);
}
.team-name{
  font-size:13px;
  font-weight:850;
}
.team-muted{ color:var(--muted); font-weight:650; }
.team-score{
  min-width:28px;
  text-align:right;
  font-size:13px;
  font-weight:900;
}

/* winner/loser */
.team-row{ position:relative; }
.team-row.win{
  background:linear-gradient(90deg, rgba(60,200,120,.18), rgba(60,200,120,.05), transparent);
}
.team-row.win::before{
  content:"✓";
  position:absolute;
  left:8px; top:50%;
  transform:translateY(-50%);
  font-size:13px;
  font-weight:900;
  color:#3cc878;
}
.team-row.lose{ opacity:.45; }
.team-row.lose::before{
  content:"✕";
  position:absolute;
  left:8px; top:50%;
  transform:translateY(-50%);
  font-size:12px;
  font-weight:900;
  color:rgba(255,255,255,.35);
}
.team-row.win .team-name,
.team-row.lose .team-name{ padding-left:14px; }

/* ===== Round spacing to make bracket look "even" ===== */
.bracket-stack{ display:flex; flex-direction:column; }

/* Each round gets different gap, creating the bracket ladder */
.bracket-col[data-round="R16"] .bracket-stack{ gap:12px; }
.bracket-col[data-round="QF"]  .bracket-stack{ gap:54px; padding-top:26px; }
.bracket-col[data-round="SF"]  .bracket-stack{ gap:142px; padding-top:82px; }
.bracket-col[data-round="F"]   .bracket-stack{ gap:0; padding-top:176px; }

/* Mobile */
@media (max-width:900px){
  .bracket{ gap:16px; }
  .bracket-col{ min-width:260px; }
  .match-card{ height:118px; }
}
/* ===== Stream Modal ===== */
.stream-modal{
  position:fixed;
  inset:0;
  display:none;
  z-index:9999;
}

.stream-modal.is-open{
  display:block;
}

.stream-backdrop{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.70);
  backdrop-filter: blur(6px);
}

.stream-dialog{
  position:relative;
  width:min(980px, calc(100vw - 24px));
  margin:60px auto 0 auto;
  border-radius:16px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.12);
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  box-shadow:0 24px 80px rgba(0,0,0,.60);
}

.stream-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:12px 14px;
  border-bottom:1px solid rgba(255,255,255,.10);
}

.stream-title{
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:900;
}

.live-dot{
  width:10px;
  height:10px;
  border-radius:999px;
  background:#7c5cff;
  box-shadow:0 0 0 0 rgba(124,92,255,.55);
  animation:livePulse 1.1s infinite;
}

@keyframes livePulse{
  0%{ box-shadow:0 0 0 0 rgba(124,92,255,.55); }
  70%{ box-shadow:0 0 0 12px rgba(124,92,255,0); }
  100%{ box-shadow:0 0 0 0 rgba(124,92,255,0); }
}

.stream-close{
  background:transparent;
  border:0;
  color:rgba(255,255,255,.80);
  font-size:18px;
  cursor:pointer;
  width:36px;
  height:36px;
  border-radius:10px;
}
.stream-close:hover{
  background:rgba(255,255,255,.06);
}

.stream-body{
  padding:14px;
}

.stream-frame{
  width:100%;
  aspect-ratio: 16/9;
  border-radius:14px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(0,0,0,.25);
}

.stream-frame iframe{
  width:100%;
  height:100%;
  display:block;
}

/* Mobile */
@media (max-width: 700px){
  .stream-dialog{
    margin:18px auto 0 auto;
  }
  .stream-body{
    padding:10px;
  }
}