:root{
  --red:#e50914;
  --red-light:#ff2d35;
  --red-dark:#b40008;
  --bg:#171a21;
  --bg-soft:#20242d;
  --panel:#262a34;
  --panel-2:#303541;
  --line:#555d6c;
  --text:#f7f7f7;
  --muted:#b8beca;
  --gold:#ffd36a;
  --white:#ffffff;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Arial,Helvetica,sans-serif;
  color:var(--text);
  background:var(--bg);
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
img{max-width:100%}

.site-header{
  position:sticky;
  top:0;
  z-index:30;
  background:linear-gradient(90deg,#ff1d25 0%,#e50914 52%,#b80008 100%);
  box-shadow:0 8px 24px rgba(0,0,0,.35);
}
.nav{
  width:min(1180px,100%);
  margin:auto;
  padding:12px 18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
}
.brand{
  display:flex;
  align-items:center;
  gap:12px;
  font-weight:900;
  min-width:190px;
}
.brand img{width:150px;height:auto;max-height:52px;object-fit:contain}
.brand span{white-space:nowrap;font-size:14px;letter-spacing:.2px}
.menu{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
  flex-wrap:wrap;
  font-weight:800;
}
.menu a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:38px;
  padding:9px 14px;
  border-radius:999px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.14);
}
.menu a:hover{background:rgba(255,255,255,.2)}

.hero{
  position:relative;
  overflow:hidden;
  padding:40px 18px;
  background:
    radial-gradient(circle at 15% 0%,rgba(255,255,255,.22),transparent 24%),
    radial-gradient(circle at 85% 15%,rgba(255,211,106,.26),transparent 26%),
    linear-gradient(145deg,#ff2028 0%,#e50914 38%,#b00008 68%,#7d0000 100%);
}
.hero:before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,rgba(0,0,0,.2),transparent 45%,rgba(0,0,0,.22));
  pointer-events:none;
}
.hero-wrap{
  position:relative;
  width:min(1180px,100%);
  margin:auto;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(300px,420px);
  gap:34px;
  align-items:center;
}
.note{
  display:inline-block;
  margin:0 0 18px;
  color:#fff4f4;
  background:rgba(125,0,0,.45);
  border:1px solid rgba(255,255,255,.14);
  padding:12px 15px;
  border-radius:14px;
  font-weight:800;
  line-height:1.55;
}
.hero h1{
  margin:0 0 16px;
  font-size:clamp(34px,5vw,62px);
  line-height:1.03;
  letter-spacing:-1px;
}
.hero p{font-size:18px;color:#fff1f1;line-height:1.65;max-width:680px}
.cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:24px}
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:56px;
  padding:14px 24px;
  border-radius:14px;
  font-weight:900;
  background:#fff;
  color:#b00008;
  box-shadow:0 12px 26px rgba(0,0,0,.18);
}
.btn.secondary{background:#2b2f39;color:#fff;border:1px solid rgba(255,255,255,.18)}
.hero-img{
  width:100%;
  max-width:420px;
  aspect-ratio:1/1;
  margin:auto;
  border-radius:26px;
  overflow:hidden;
  border:5px solid rgba(255,255,255,.24);
  box-shadow:0 28px 70px rgba(0,0,0,.46);
  background:#111;
}
.hero-img img{
  display:block;
  width:100%;
  height:100%;
  aspect-ratio:1/1;
  object-fit:cover;
}

main{width:min(1320px,100%);margin:auto;padding:32px 18px}
.section-title{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:16px;
  margin:18px 0;
}
.section-title h2{margin:0;font-size:clamp(26px,3vw,36px)}
.section-title p{margin:6px 0 0;color:var(--muted);line-height:1.55}



.bracket-shell{
  width:100%;
  max-height:760px;
  overflow:auto;
  padding:18px 18px 22px;
  border-radius:24px;
  background:
    radial-gradient(circle at top left,rgba(255,45,53,.10),transparent 30%),
    linear-gradient(180deg,#222731 0%,#151922 100%);
  border:1px solid #3f4858;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 20px 50px rgba(0,0,0,.28);
  scrollbar-color:#e50914 #151821;
  scrollbar-width:thin;
}
.bracket-shell::-webkit-scrollbar{width:10px;height:10px}
.bracket-shell::-webkit-scrollbar-track{background:#151821;border-radius:999px}
.bracket-shell::-webkit-scrollbar-thumb{background:linear-gradient(90deg,var(--red),var(--gold));border-radius:999px}
.bracket-hint{
  position:sticky;
  left:0;
  z-index:10;
  display:inline-flex;
  align-items:center;
  margin:0 0 14px;
  padding:9px 14px;
  border-radius:999px;
  background:rgba(229,9,20,.18);
  border:1px solid rgba(255,255,255,.12);
  color:#ffe8e8;
  font-size:13px;
  font-weight:900;
  white-space:nowrap;
}
.bracket{
  --card-w:280px;
  --col-gap:88px;
  --slot-h:112px;
  --top-space:44px;
  --board-h:1664px;
  width:calc((var(--card-w) * 5) + (var(--col-gap) * 4) + 80px);
  min-width:calc((var(--card-w) * 5) + (var(--col-gap) * 4) + 80px);
  min-height:calc(var(--board-h) + 92px);
  display:grid;
  grid-template-columns:repeat(5,var(--card-w));
  column-gap:var(--col-gap);
  align-items:start;
  position:relative;
  padding:0 70px 42px 0;
}
.round{
  position:relative;
  min-height:calc(var(--board-h) + 58px);
}
.round h2{
  position:sticky;
  top:0;
  z-index:7;
  height:36px;
  margin:0 0 18px;
  padding:10px 12px;
  border-radius:12px;
  font-size:13px;
  line-height:16px;
  text-align:center;
  letter-spacing:.2px;
  color:#fff;
  background:linear-gradient(180deg,#ff3139 0%,#df0712 55%,#b40008 100%);
  box-shadow:0 0 0 1px rgba(255,255,255,.17) inset,0 10px 22px rgba(0,0,0,.26);
}
.match-list{
  position:relative;
  height:var(--board-h);
}
.match-card{
  position:absolute;
  left:0;
  top:calc(var(--y) - 43px);
  width:var(--card-w);
  min-height:86px;
  padding:10px 11px 9px;
  border-radius:14px;
  background:linear-gradient(180deg,#303642 0%,#272d37 100%);
  border:1px solid #505a6b;
  box-shadow:0 14px 26px rgba(0,0,0,.24);
}
.match-card:before{
  content:"";
  position:absolute;
  inset:-1px -1px auto -1px;
  height:3px;
  border-radius:14px 14px 0 0;
  background:linear-gradient(90deg,var(--red),#ff7546,var(--gold));
}
.match-card:after{
  content:"";
  position:absolute;
  right:calc(var(--col-gap) * -1);
  top:50%;
  width:var(--col-gap);
  border-top:1px solid var(--line);
  opacity:.65;
}
.round:last-child .match-card:after{display:none}
.match-date{
  margin-bottom:7px;
  color:#c5cbd6;
  font-size:11.5px;
  font-weight:900;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.team-row{
  display:grid;
  grid-template-columns:26px minmax(0,1fr) auto;
  gap:9px;
  align-items:center;
  min-height:30px;
  padding:3px 5px;
  border-radius:8px;
  font-size:13.5px;
  font-weight:900;
}
.team-row+.team-row{margin-top:2px}
.team-row .flag{width:26px;height:26px;display:flex;align-items:center;justify-content:center;flex:0 0 26px}
.team-row .flag img{width:26px;height:26px;object-fit:cover;border-radius:5px;border:1px solid rgba(255,255,255,.35);box-shadow:0 2px 6px rgba(0,0,0,.28);background:#fff;display:block}
.team-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.team-row.winner{background:rgba(255,255,255,.09)}
.team-row.winner .team-name:after{content:" ◂";color:#fff}
.team-row.empty{color:#8b929e}
.team-row.empty .flag:before{
  content:"";
  width:15px;
  height:15px;
  border-radius:50%;
  background:linear-gradient(180deg,#596170,#3b414d);
  opacity:.45;
}
.blank-line{
  display:block;
  width:82%;
  max-width:138px;
  height:10px;
  border-radius:999px;
  background:linear-gradient(90deg,#677080,#444b57);
  opacity:.72;
}
.score{color:#e6e8ed;font-variant-numeric:tabular-nums}
.bracket-guide{
  position:absolute;
  inset:58px auto 24px auto;
  width:1px;
  background:linear-gradient(180deg,transparent,#333b49 5%,#333b49 95%,transparent);
  opacity:.5;
}

.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.info-card,.article{
  border-radius:22px;
  background:#fff;
  color:#222;
  box-shadow:0 14px 34px rgba(0,0,0,.13);
}
.info-card{padding:22px;border-top:8px solid var(--red)}
.info-card h3{margin-top:0;color:#d4000b}
.article{padding:28px;line-height:1.75}
.article h1,.article h2{color:#d70000;margin-top:0}
.table-wrap{overflow-x:auto;border-radius:18px;box-shadow:0 10px 26px rgba(0,0,0,.12)}
table{width:100%;border-collapse:separate;border-spacing:0;background:#fff;color:#222;overflow:hidden}
th,td{padding:15px 16px;border-bottom:1px solid #eee;text-align:left;vertical-align:middle}
tbody tr:last-child td{border-bottom:0}
th{background:linear-gradient(90deg,#e50914,#b80000);color:#fff;font-weight:900}
tbody tr:nth-child(even){background:#fafafa}
tbody tr:hover{background:#fff3f3}
.site-footer{margin-top:36px;background:#111;padding:28px 18px;color:#ccc}
.site-footer .inner{max-width:1180px;margin:auto;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}

@media(max-width:980px){
  .nav{align-items:center;gap:12px}
  .brand{min-width:auto}.brand span{display:none}.brand img{width:132px}
  .menu{gap:6px;font-size:14px}.menu a{padding:8px 10px;min-height:34px}
  .hero-wrap{grid-template-columns:1fr;gap:28px}.hero-img{max-width:520px}
  .cards{grid-template-columns:1fr}
}
@media(max-width:620px){
  .site-header{position:relative}
  .nav{padding:12px 14px;flex-direction:column;align-items:stretch}
  .brand{justify-content:center}.brand img{width:150px}
  .menu{display:grid;grid-template-columns:1fr 1fr;gap:8px;width:100%}
  .menu a{border-radius:12px;text-align:center;background:rgba(255,255,255,.11)}
  .hero{padding:28px 14px 34px}
  .hero h1{font-size:40px}.hero p{font-size:16px}.note{font-size:14px}
  .btn{width:100%;min-height:54px}
  .hero-img{max-width:100%;border-radius:20px;border-width:3px}
  main{padding:26px 12px}
  .section-title{display:block}
  .bracket-shell{padding:14px;border-radius:20px;max-height:72vh}
  .bracket-hint{font-size:12px;white-space:normal;line-height:1.4;border-radius:12px}
  .bracket{--card-w:254px;--col-gap:66px;--slot-h:104px;--board-h:1664px}
  .match-card{min-height:82px;padding:9px 10px}
  .match-card:after{right:calc(var(--col-gap) * -1);width:var(--col-gap)}
  .team-row{font-size:12.5px}
  .article{padding:20px}th,td{padding:12px 10px;font-size:14px}
}


/* Flag files in this package are square 48x48 PNG; keep them square so they don't look stretched. */
.team-row .flag img[src$='.png']{object-fit:cover;}
.bracket-shell{min-height:680px;}
.round h2{white-space:nowrap;}
.match-card{display:flex;flex-direction:column;justify-content:center;}
.match-card .team-row{background:rgba(255,255,255,.025);}
.match-card .team-row.empty{background:transparent;}
@media(max-width:620px){.team-row .flag,.team-row .flag img{width:24px;height:24px;flex-basis:24px}.team-row{grid-template-columns:24px minmax(0,1fr) auto}}


.schedule-table{
    width:100%;
    border-collapse:collapse;
    overflow:hidden;
    border-radius:16px;
    background:#fff;
}

.schedule-table thead{
    background:linear-gradient(90deg,#d80000,#ff2626);
}

.schedule-table th{
    color:#fff;
    padding:18px;
    text-align:left;
    font-size:15px;
    font-weight:700;
}

.schedule-table td{
    padding:18px;
    border-bottom:1px solid #ececec;
    color:#333;
    font-size:15px;
}

.schedule-table tbody tr{
    transition:.25s;
}

.schedule-table tbody tr:hover{
    background:#fff5f5;
}

.badge{
    display:inline-block;
    padding:7px 14px;
    border-radius:999px;
    font-size:13px;
    font-weight:700;
}

.live{
    background:#d7ffe2;
    color:#14823d;
}

.waiting{
    background:#fff1cc;
    color:#9b6a00;
}

.final{
    background:#e7e5ff;
    color:#5a32d6;
}

.section-desc{
    margin:10px 0 25px;
    color:#555;
    line-height:1.7;
}

.contact-card{
    margin-top:40px;
    padding:35px;
    background:#ffffff;
    border-radius:22px;
    box-shadow:0 18px 45px rgba(0,0,0,.12);
}

.contact-card h2{
    color:#d70000;
    font-size:34px;
    margin-bottom:15px;
}

.contact-desc{
    color:#666;
    margin-bottom:30px;
    line-height:1.8;
}

.contact-table{
    border-radius:18px;
    overflow:hidden;
    border:1px solid #ececec;
}

.contact-row{
    display:grid;
    grid-template-columns:220px 1fr;
    align-items:center;
    padding:18px 25px;
    border-bottom:1px solid #ececec;
    transition:.25s;
}

.contact-row:last-child{
    border-bottom:none;
}

.contact-row:hover{
    background:#fff7f7;
}

.contact-label{
    font-weight:700;
    color:#d70000;
}

.contact-value{
    color:#333;
    word-break:break-word;
}

.contact-value a{
    color:#0066cc;
    text-decoration:none;
}

.contact-value a:hover{
    text-decoration:underline;
}

@media(max-width:768px){

.contact-row{
    grid-template-columns:1fr;
    gap:8px;
}

.contact-label{
    margin-bottom:4px;
}

}

.rg-list{
    margin:25px 0;
    padding-left:22px;
}

.rg-list li{
    margin:12px 0;
    line-height:1.8;
    color:#444;
}

.rg-box{
    margin-top:35px;
    padding:25px;
    border-left:6px solid #d90000;
    background:#fff6f6;
    border-radius:14px;
}

.rg-box h3{
    color:#d90000;
    margin-bottom:10px;
}

.rg-box p{
    margin:0;
    color:#555;
}