/* ============================================================
   BRACKET PAGE
   ============================================================ */

* {
  box-sizing: border-box;
}

:root {
  --page-bg: #f2ecdd;
  --blue: #5F75FD;
  --green: #278d3e;
  --gold: #C7BD55;
  --gold-dark: #a89a3e;
  --text: #277f38;
  --dark: #354536;

  /* FIX: satu variable lebar dipakai bareng oleh M3 & M4 supaya
     ukurannya selalu sama persis, tidak tergantung konten teks
     di dalamnya. */
  --match-box-width: 220px;
}



.nav-toggle {
  display: none;
}

body {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;

  font-family: "Alan Sans", sans-serif;


  background-image: url("assets/matchesbackground3.png");
  background-repeat: no-repeat;
  background-position: top;
  background-size: cover;
  color: var(--dark);
}



/* ============================================================
   NAVBAR
   ============================================================ */

.navbar {
  width: 100%;
  height: 72px;

  display: flex;
  align-items: center;

  padding: 0 40px;

  background: #5F75FD;

  position: relative;
  z-index: 100;

  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* LOGO */

.nav-logo {
  display: flex;
  align-items: center;
}

.nav-logo img {
  width: 90%;
  height: 90%;

  padding-bottom: 10px;
  padding-top: 10px;

  object-fit: contain;
}

/* MENU */

.nav-menu {
  margin-left: auto;

  display: flex;
  align-items: center;

  gap: 42px;
}

.nav-menu a {
  position: relative;

  font-family: "Alan Sans", sans-serif;

  font-size: 15px;
  font-weight: 600;

  color: #ffffff;

  text-decoration: none;

  padding: 8px 0;

  transition: color 0.2s ease;
}

.nav-menu a:hover {
  color: #ffffff;
}

/* ACTIVE */

.nav-menu a.active {
  font-weight: 800;
}

.nav-menu a.active::after {
  content: "";

  position: absolute;

  left: 0;
  right: 0;
  bottom: 0;

  height: 3px;

  background: #C7BD55;

  border-radius: 10px;
}

/* PLAY NOW */

.play-now {
  position: relative;

  width: clamp(105px, 40vw, 155px);
  aspect-ratio: 1 / 1;

  margin-left: 42px;

  display: flex;
  align-items: center;
  justify-content: center;

  background-image: url("assets/PlayNow.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;

  color: white;
  text-decoration: none;

  font-family: "Alan Sans", sans-serif;
  font-size: clamp(12px, 5vw, 15px);
  font-weight: 800;

  transition: transform .2s ease;

  flex-shrink: 0;
}

.play-now:hover {
  transform: translateY(-2px);
}

.play-now span {
  position: relative;
  z-index: 2;

  transform: translateY(-1px);
}

/* ============================================================
   PAGE
   ============================================================ */

.bracket-page {
  max-width: 1500px;
  margin: 0 auto;
  padding: 35px 20px 100px;
}


/* ============================================================
   TABS
   ============================================================ */

.bracket-tabs {
  display: flex;
  gap: 10px;
  margin-bottom: 35px;
  flex-wrap: wrap;
}

.bracket-tab {
  padding: 12px 22px;

  border: 2px solid var(--dark);
  border-radius: 8px;

  background: transparent;
  color: var(--dark);

  font-family: "Alan Sans", sans-serif;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .5px;

  cursor: pointer;
  transition: .2s ease;
}

.bracket-tab.active {
  background: var(--dark);
  color: white;
}

.bracket-tab:hover:not(.active) {
  background: rgba(53, 69, 54, .08);
}


/* ============================================================
   VIEW SWITCH
   ============================================================ */

.bracket-view {
  display: none;
}

.bracket-view.active {
  display: block;
}


/* ============================================================
   TEAM BANNER (dipakai di semua tempat)
   ============================================================
   Pakai asset asli dari /assets:
   - SlotTop.png / SlotBottom.png       -> sisi kiri bracket
   - RightSlotTop.png / RightSlotBottom -> sisi kanan bracket
     (versi mirror, dipakai lewat class .team-row-right)
   - finalistsTop.png / finalistsBottom -> khusus box FINAL &
     M5 (play-off juara 3), lihat override di bawah.
   ============================================================ */

.team-row,
.team-row-right {
  position: relative;

  display: flex;
  align-items: center;
  justify-content: space-between;

  height: 34px;

  padding: 0 34px 0 14px;
  margin-bottom: 3px;

  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.team-row[data-team="1"] {
  background-image: url("assets/SlotTop.png");
}

.team-row[data-team="2"] {
  background-image: url("assets/SlotBottom.png");
}

.team-row-right[data-team="1"] {
  background-image: url("assets/RightSlotTop.png");
}

.team-row-right[data-team="2"] {
  background-image: url("assets/RightSlotBottom.png");
}

/* FIX: FINAL & M5 (bronze/play-off juara 3) pakai asset khusus
   "finalistsTop/Bottom", menimpa asset default di atas -- aturan
   ini harus ditulis SETELAH aturan default supaya menang. */

.final-box .team-row[data-team="1"],
.final-box .team-row-right[data-team="1"],
.playoff-box .team-row[data-team="1"],
.playoff-box .team-row-right[data-team="1"] {
  background-image: url("assets/finalists Top.png");
}

.final-box .team-row[data-team="2"],
.final-box .team-row-right[data-team="2"],
.playoff-box .team-row[data-team="2"],
.playoff-box .team-row-right[data-team="2"] {
  background-image: url("assets/finalists Bottom.png");
}

.team-row.is-winner,
.team-row-right.is-winner {
  filter: brightness(1.08) saturate(1.1);
  box-shadow: 0 0 0 2px var(--dark) inset;
}

.team-row.is-loser,
.team-row-right.is-loser {
  opacity: .5;
  filter: grayscale(.4);
}

.team-name {
  font-size: 11px;
  font-weight: 800;
  color: var(--dark);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* FIX: posisi teks disesuaikan arah bagan.
   - Bagan KIRI (.team-row, asset SlotTop/Bottom): teks rata
     kiri (default, tidak diubah).
   - Bagan KANAN (.team-row-right, asset RightSlotTop/Bottom
     yang di-mirror): area "isi" ribbon-nya sekarang ada di sisi
     kanan kotak, jadi urutan dibalik (skor pindah ke kiri) dan
     teks nama dirata-kanankan.
   - FINAL & M5 (asset finalistsTop/Bottom, kotaknya simetris):
     teks nama di tengah (justify/center). */

.team-row-right {
  flex-direction: row-reverse;
  padding: 0 14px 0 34px;
}

.team-row-right .team-name {
  text-align: right;
}

.team-row-right .team-score {
  right: auto;
  left: 4px;
}

.final-box .team-name,
.playoff-box .team-name {
  flex: 1;
  text-align: center;
}

/* FIX: sebelumnya padding kiri-kanan tidak simetris (14px vs
   34px, sisa dari desain box lain yang nyisain ruang buat skor
   di sisi kanan). Untuk FINAL & M5, dibuat simetris supaya nama
   tim benar-benar rata tengah pada seluruh lebar box, bukan
   cuma di antara sisa ruang setelah dikurangi padding kanan. */

.final-box .team-row,
.final-box .team-row-right,
.playoff-box .team-row,
.playoff-box .team-row-right {
  padding: 0 14px;
}

/* FIX: skor & nama tim untuk FINAL/M5 ditumpuk vertikal
   (bukan sejajar horizontal seperti box lain), karena bentuk
   ribbon finalistsTop/Bottom "jam pasir" -- konten harus
   mengikuti kemiringannya:
   - Baris ATAS (data-team="1"): NAMA di atas, SKOR di bawahnya
   - Baris BAWAH (data-team="2"): SKOR di atas, NAMA di bawahnya */

.final-box [data-team="1"],
.playoff-box [data-team="1"] {
  flex-direction: column;
  justify-content: center;
  gap: 2px;
}

.final-box [data-team="2"],
.playoff-box [data-team="2"] {
  flex-direction: column-reverse;
  justify-content: center;
  gap: 2px;
}

.final-box .team-score,
.playoff-box .team-score {
  position: static;
  transform: none;
  width: auto;
}

.team-score {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);

  width: 22px;

  text-align: center;

  color: white;

  font-size: 11px;
  font-weight: 800;
}

.vs {
  display: block;
  text-align: center;
  margin: 2px 0 6px;
  font-size: 11px;
  font-weight: 800;
  color: var(--green);
}


/* ============================================================
   DAY 1 - GRID LAYOUT
   ============================================================
   FIX: sebelumnya flexbox 3 kolom terpisah (M1/M2/M3), jadi
   baris tiap kolom tidak nyambung satu sama lain -- M2 selalu
   mulai dari atas, tidak peduli M2 pair 1 itu levelnya sejajar
   dengan Slot 5 (bukan Slot 1). Sekarang pakai CSS Grid flat:
   semua slot-box adalah anak langsung #day1-grid, dan posisi
   baris/kolomnya diatur lewat inline style dari JS, supaya
   benar-benar sejajar lintas kolom.

   Peta baris grid (row 1 = heading M1/M2/M3):
   - M1 slot 1-8   -> kolom 1, baris 2-9
   - M2 pair 1-4   -> kolom 2, baris 6-9 (sejajar Slot 5-8)
   - M3 pair 1-4   -> kolom 3, baris 2-5 (sejajar Slot 1-4)
   - Road to Final -> kolom 4, di samping M3
   ============================================================ */

.bracket-columns {
  position: relative;
  display: grid;
  grid-template-columns: 180px 180px 180px minmax(135px, 1fr);
  column-gap: 72px;
  row-gap: 18px;
  align-items: start;

  overflow-x: auto;
  padding-bottom: 20px;
}

/* Garis bracket digambar oleh JS di atas grid sehingga posisi garis
   selalu mengikuti posisi slot, termasuk ketika lebar layar berubah. */
.day1-connectors {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  z-index: 0;
}

.day1-connectors path,
.day1-connectors line {
  fill: none;
  stroke: rgba(53, 69, 54, .72);
  stroke-width: 1.4;
  vector-effect: non-scaling-stroke;
}

.day1-connectors .connector-dashed {
  stroke-dasharray: 3 3;
}

.day1-connectors .connector-arrow {
  fill: rgba(53, 69, 54, .72);
  stroke: none;
}

.round-heading {
  grid-row: 1;
  margin-bottom: 0;
}

.round-heading.col-m1 { grid-column: 1; }
.round-heading.col-m2 { grid-column: 2; }
.round-heading.col-m3 { grid-column: 3; }

.round-code {
  display: inline-block;
  margin-right: 6px;
  font-size: 13px;
  font-weight: 900;
  color: var(--green);
}

.round-info {
  font-size: 11px;
  font-weight: 700;
  color: #6b7a67;
}

.slot-box {
  position: relative;
  z-index: 1;
  width: 180px;
}

#day1-grid .team-row,
#day1-grid .team-row-right {
  height: 25px;
  padding-left: 10px;
  padding-right: 27px;
}

#day1-grid .team-name,
#day1-grid .team-score,
#day1-grid .vs {
  font-size: 8px;
}

#day1-grid .team-score {
  width: 18px;
  right: 3px;
}

#day1-grid .vs {
  margin: 0 0 3px;
  line-height: 11px;
}

#day1-grid .slot-label {
  font-size: 9px;
  margin-bottom: 2px;
}

/* Pemisah visual antara Slot 4 (upper) & Slot 5 (lower) di M1 */

.slot-box[data-m1-slot="5"] {
  padding-top: 22px;
  border-top: 2px dashed rgba(53, 69, 54, .25);
}

.slot-label {
  font-size: 10px;
  font-weight: 800;
  color: var(--dark);
  margin-bottom: 4px;
  display: block;
}

/* Connector garis siku ke round berikutnya (M1 -> M2, M2 -> M3) */

/* Connector lama per-slot dimatikan; garis lengkap sekarang berada
   dalam SVG .day1-connectors. */

.road-to-final-link {
  grid-column: 4;
  grid-row: 2 / span 4;

  align-self: center;
  justify-self: start;

  width: fit-content;
  min-width: 135px;
  height: fit-content;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 9px 14px;

  background: var(--dark);
  color: white;

  font-size: 10px;
  font-weight: 800;

  text-decoration: none;
  border-radius: 5px;
  white-space: nowrap;

  position: relative;
  z-index: 1;
}

/* ============================================================
   DAY 2 - ROAD TO FINAL
   ============================================================ */

.road-to-final {
  display: grid;
  grid-template-columns: var(--match-box-width) var(--match-box-width) 1fr var(--match-box-width) var(--match-box-width);
  align-items: center;
  gap: 20px;
}

.road-to-final {
  position: relative;
}

.day2-connectors {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  z-index: 0;
}

.day2-connectors path {
  fill: none;
  stroke: rgba(53, 69, 54, 0.72);
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
}

.road-to-final > :not(.day2-connectors) {
  position: relative;
  z-index: 1;
}

.rtf-side {
  display: flex;
  flex-direction: column;
  gap: 60px;
}

/* FIX: M3 (.match-box) dan M4 (.match-box-m4) sekarang dipaksa
   pakai lebar yang SAMA PERSIS (--match-box-width), tidak lagi
   bergantung ke lebar kolom grid / panjang teks di dalamnya. */

.match-box,
.match-box-m4 {
  width: var(--match-box-width);
  max-width: var(--match-box-width);

  padding: 4px;
}

.match-meta {
  margin-bottom: 6px;
}

.match-meta .round-code {
  font-size: 11px;
}

.match-meta .round-info {
  display: block;
  font-size: 9px;
}

.rtf-mid-left,
.rtf-mid-right {
  display: flex;
  justify-content: center;
}

.rtf-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

.trophy-img {
  width: 130px;
  height: auto;
  display: block;
}

.final-box {
  width: 100%;
  max-width: 260px;
}

.final-box .team-row,
.final-box .team-row-right {
  height: 52px;
}

.final-box .team-name {
  font-size: 13px;
}

.playoff-box {
  width: 100%;
  max-width: 320px;
  margin-top: 6px;
}

.playoff-box .team-row,
.playoff-box .team-row-right {
  height: 48px;
}

.playoff-box .round-code {
  color: #a52d2d;
}


/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 900px) {

  .road-to-final {
    grid-template-columns: 1fr;
  }

  .day2-connectors {
    display: none;
  }
  .rtf-side,
  .rtf-mid-left,
  .rtf-mid-right {
    max-width: 320px;
    margin: 0 auto;
  }

  /* Di layar sempit, biarkan M3/M4 melebar penuh mengikuti
     container (tetap sama lebar satu sama lain karena sama-sama
     100%), bukan dipaksa ke --match-box-width yang terlalu kecil
     dibanding lebar layar HP. */

  .match-box,
  .match-box-m4 {
    width: 100%;
    max-width: 320px;
  }
}

@media (max-width: 620px) {

    /* NAVBAR */

  .navbar {
    height: 64px;
    min-height: 64px;
    padding: 0 18px;
    justify-content: space-between;
    z-index: 1000;
  }

  .nav-logo {
    flex-shrink: 0;
  }

  .nav-logo img {
    width: 78px;
    height: auto;
    max-height: 48px;
    display: block;
    padding: 0;
  }

  /* HAMBURGER */

  .nav-toggle {
    width: 42px;
    height: 42px;
    padding: 0;
    border: none;
    background: transparent;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    cursor: pointer;
    position: relative;
    z-index: 1002;
  }

  .nav-toggle span {
    width: 22px;
    height: 2px;
    display: block;
    background: #f8f8f8;
    border-radius: 2px;
    transition: transform .25s ease, opacity .2s ease;
  }

  .nav-toggle.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-toggle.active span:nth-child(2) { opacity: 0; }
  .nav-toggle.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  /* MENU */

  .nav-menu {
    position: absolute;
    top: 64px;
    left: 12px;
    right: 12px;
    margin-left: 0;
    padding: 12px;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;

    background: rgba(255, 255, 255, .97);
    box-shadow: 0 10px 30px rgba(40, 70, 40, .15);
    border: 1px solid rgba(39, 141, 62, .08);

    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: opacity .2s ease, transform .2s ease, visibility .2s ease;
    z-index: 1001;
  }

  .nav-menu.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  .nav-menu a {
    margin-left: 0;
  }

  .nav-menu > a:not(.play-now) {
    width: 100%;
    min-height: 45px;
    padding: 0 16px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1.5px;
    color: #52634e;
    background: transparent;
    transition: background .2s ease, color .2s ease;
  }

  .nav-menu > a:not(.play-now):hover {
    color: #278d3e;
    background: rgba(39, 141, 62, .06);
  }

  .nav-menu > a.active {
    color: #278d3e;
    background: rgba(39, 141, 62, .08);
  }

  .nav-menu > a.active::after {
    display: none;
  }

  .nav-menu .play-now {
    width: 100%;
    height: 44px;
    min-height: 44px;
    margin-top: 7px;
    margin-left: 0;
    padding: 0;
    font-size: 11px;
  }
  
  .bracket-page {
    padding: 20px 12px 70px;
  }

  .bracket-tab {
    font-size: 11px;
    padding: 10px 14px;
  }
}