.round-1 {
  --scale: 1;
}

.round-2 {
  --scale: 2;
}

.round-3 {
  --scale: 4;
}

.round-4 {
  --scale: 8;
}

.round-5 {
  --scale: 16;
}

.round-6 {
  --scale: 32;
}

.round-7 {
  --scale: 64;
}

.round-8 {
  --scale: 128;
}

.round-9 {
  --scale: 256;
}

.round-10 {
  --scale: 512;
}

thead.table-header th {
  text-align: center;
}

.entry {
  height: 50px;
}

/* fr */
:root {
  --bracket: 1px solid black;
  --bracket-height: 80px;
  --bracket-width: 200px;
  --player-container-height: 60px;
  --player-container-width: 120px;
}

.win {
  --bracket: 1px solid red;
}

.round-container-container {
  display: flex;
  flex-direction: row;
  overflow-x: auto;
  margin: 1.5rem;
}

.round-container {
  display: flex;
  flex: 1;
}

#round-container-right {
  flex-direction: row-reverse;
}

span.no-match {
  display: flex;
}

.match, .no-match {
  width: var(--player-container-width);
  /*border: 1px solid white;*/
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  box-sizing: border-box;
}

.player {
  border-radius: 5px;
  width: 100%;
  height: var(--player-container-height);
  text-align: center;
  color: black;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

#round-1-left .player, #round-1-right .player {
  border: 1px solid black;
  width: 100%;
  display: flex;
}

[class^="round-"] .player {
  border: none;
  width: 0;
  display: none;
}

#round-1-left .match::before, #round-container-right #round-1-right .match::before {
  content: "";
  position: absolute;
  border: none;
}

.round-1 .no-match::after {
  content: "";
  position: absolute;
  height: 1px;
  width: calc(var(--bracket-width) / 8);
  left: var(--player-container-width);
  /* inject in js */
  /*top: var(--bracket-height);*/
  /*border-top:  var(--bracket;*/
}

.round-1 .no-match.upper::after {
  top: var(--bracket-height);
  border-top: var(--bracket);
}

.round-1 .no-match.lower::after {
  bottom: var(--bracket-height);
  border-bottom: var(--bracket);
}

#round-container-right .round-1 .no-match.upper::after {
  top: var(--bracket-height);
  left: calc(var(--bracket-width) / -8);
  border-top: var(--bracket);
  border-left: none;
  border-bottom: none;
  border-right: none;
}

#round-container-right .round-1 .no-match.lower::after {
  bottom: var(--bracket-height);
  left: calc(var(--bracket-width) / -8);
  border-bottom: var(--bracket);
  border-left: none;
  border-top: none;
  border-right: none;
}

#round-1-left div.match:nth-of-type(odd)::after {
  content: "";
  position: absolute;
  border-top: var(--bracket);
  border-right: var(--bracket);
  border-bottom: none;
  height: calc(var(--bracket-height) / 2);
  width: calc(var(--bracket-width) / 8);
  left: var(--player-container-width);
  top: calc(var(--bracket-height) / 2);
  bottom: 0;
}

#round-container-right #round-1-right div.match:nth-of-type(odd)::after {
  content: "";
  position: absolute;
  border-top: var(--bracket);
  border-left: var(--bracket);
  border-right: none;
  border-bottom: none;
  height: calc(var(--bracket-height) / 2);
  width: calc(var(--bracket-width) / 8);
  left: calc(var(--bracket-width) / -8);
  top: calc(var(--bracket-height) / 2);
  bottom: 0;
}

#round-1-left div.match:nth-of-type(even)::after {
  content: "";
  position: absolute;
  border-top: none;
  border-bottom: var(--bracket);
  border-right: var(--bracket);
  height: calc(var(--bracket-height) / 2);
  width: calc(var(--bracket-width) / 8);
  left: var(--player-container-width);
  top: 0;
  bottom: calc(var(--bracket-height) / 2);
}

#round-container-right #round-1-right div.match:nth-of-type(even)::after {
  content: "";
  position: absolute;
  border-top: none;
  border-bottom: var(--bracket);
  border-left: var(--bracket);
  border-right: none;
  height: calc(var(--bracket-height) / 2);
  width: calc(var(--bracket-width) / 8);
  left: calc(var(--bracket-width) / -8);
  top: 0;
  bottom: calc(var(--bracket-height) / 2);
}

/*[class^="round-"] .match:nth-child(odd)::before {*/
/*    content: "";*/
/*    position: absolute;*/
/*    right: 0;*/
/*    border-top: var(--bracket);*/
/*    top: calc(var(--bracket-height) / 2 * var(--scale));*/
/*    width: calc(var(--bracket-width) / 8);*/
/*}*/

/*[class^="round-"] .match:nth-child(even)::before {*/
/*    content: "";*/
/*    position: absolute;*/
/*    right: 0;*/
/*    border-bottom: var(--bracket);*/
/*    bottom: calc(var(--bracket-height) / 2 * var(--scale));*/
/*    width: calc(var(--bracket-width) / 8);*/
/*}*/

[class^="round-"] .match:nth-child(odd)::after {
  content: "";
  position: absolute;
  border-top: var(--bracket);
  border-right: var(--bracket);
  height: calc(var(--bracket-height) / 2 * var(--scale));
  width: calc(var(--bracket-width) / 8);
  left: 0;
  top: calc(var(--bracket-height) / 2 * var(--scale));
}

[class^="round-"] .match:nth-child(even)::after {
  content: "";
  position: absolute;
  border-bottom: var(--bracket);
  border-right: var(--bracket);
  height: calc(var(--bracket-height) / 2 * var(--scale));
  width: calc(var(--bracket-width) / 8);
  left: 0;
  bottom: calc(var(--bracket-height) / 2 * var(--scale));
}

/*#round-container-right [class^="round-"] .match:nth-child(odd)::before {*/
/*    content: "";*/
/*    position: absolute;*/
/*    left: calc(var(--bracket-width) / -4);*/
/*    border-top: var(--bracket);*/
/*    top: calc(var(--bracket-height) / 2 * var(--scale));*/
/*    width: calc(var(--bracket-width) / 8);*/
/*}*/

/*#round-container-right [class^="round-"] .match:nth-child(even)::before {*/
/*    content: "";*/
/*    position: absolute;*/
/*    left: calc(var(--bracket-width) / -4);*/
/*    border-bottom: var(--bracket);*/
/*    bottom: calc(var(--bracket-height) / 2 * var(--scale));*/
/*    width: calc(var(--bracket-width) / 8);*/
/*}*/

#round-container-right [class^="round-"] .match:nth-child(odd)::after {
  content: "";
  position: absolute;
  border-top: var(--bracket);
  border-left: var(--bracket);
  border-right: none;
  height: calc(var(--bracket-height) / 2 * var(--scale));
  width: calc(var(--bracket-width) / 8);
  left: calc(var(--bracket-width) * 1 / -4);
  top: calc(var(--bracket-height) / 2 * var(--scale));
}

#round-container-right [class^="round-"] .match:nth-child(even)::after {
  content: "";
  position: absolute;
  border-bottom: var(--bracket);
  border-left: var(--bracket);
  border-right: none;
  height: calc(var(--bracket-height) / 2 * var(--scale));
  width: calc(var(--bracket-width) / 8);
  left: calc(var(--bracket-width) * 1 / -4);
  bottom: calc(var(--bracket-height) / 2 * var(--scale));
}

.round:last-child .match::after {
  content: "";
  position: absolute;
  border-top: var(--bracket);
  border-bottom: none;
  border-right: none;
  border-left: none;
  left: calc(-1 * var(--bracket-width) / 8);
}

#round-container-right .round:last-child .match::after {
  content: "";
  position: absolute;
  border-top: var(--bracket);
  border-bottom: none;
  border-right: none;
  border-left: none;
  right: calc(-1 * var(--bracket-width) / 8);
}

.round-2, .round-3, .round-4, .round-5, .round-6, .round-7, .round-8, .round-9 {
  margin-left: calc(var(--bracket-width) / 8);
}

#round-1-left, #round-1-right {
  margin-left: 0;
}

.round:last-child {
  margin-left: calc(var(--bracket-width) / 4);
}

.round-1 .no-match {
  height: calc(2 * var(--bracket-height));
}

#round-1-left .match, #round-1-right .match {
  width: var(--player-container-width);
}

[class^="round-"] .match {
  height: calc(var(--scale, 1) * var(--bracket-height));
  width: 0;
}

.player-text {
  font-size: 1.1rem;
  font-weight: bold;
}

.seed-text {
  font-size: 1.1rem;
}

.team-text {
  margin-top: 0.25rem;
  font-size: 1.1rem;
}

/* 선수 2명인 경우, 예외처리 */
#rcc-with-two-player {
  #round-1-right {
    display: flex;
    justify-content: end;
  }

  #round-container-right #round-1-right div.match:nth-of-type(odd)::after {
    border-left: none;
  }

  #round-1-left div.match:nth-of-type(odd)::after {
    border-right: none;
  }
}

/* 선수 1명인 경우, 예외처리 */
#rcc-with-one-player {
  --bracket: none;

  #round-1-left {
    height: var(--bracket-height);
    position: relative;
  }

  #round-1-left .match {
    position: absolute;
    right: 0;
    transform: translate(50%, 0);
  }
}

/* 34위전 관련 스타일링 */
#third-place-match-container {
  display: block;
  width: 100%;

  h2 {
    margin-top: 2.5rem;
    font-size: 2rem;

    text-align: center;
  }

  #third-place-match {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    position: relative;

    .player-container {
      flex: 1;
      display: flex;
    }

    .player-container:nth-child(1) {
      justify-content: start;
    }

    .player-container:nth-child(2) {
      justify-content: end;
    }

    .player {
      display: flex;
      width: var(--player-container-width);
      height: var(--player-container-height);
      align-items: flex-end;
      flex-direction: column;
      gap: 0.4rem;
      background: #fff;
      color: #999;
      border: 1px solid #ddd;
      border-radius: 0.7rem;
      padding: 0.6rem 1rem;
      position: relative;

      .player-text {
        font-size: 1.4rem;
        font-weight: 600;
      }

      .team-text {
        font-size: 1.2rem;
        font-weight: 400;
      }
    }

    .player-container {
      position: relative;
    }

    .player-container:nth-child(1):after {
      top: 50%;
      border-top: var(--bracket);
      content: "";
      position: absolute;
      height: 1px;
      width: calc(100% - var(--player-container-width));
      left: var(--player-container-width);
    }

    .player-container:nth-child(2):after {
      top: 50%;
      border-top: var(--bracket);
      content: "";
      position: absolute;
      height: 1px;
      width: calc(100% - var(--player-container-width));
      right: var(--player-container-width);
    }

    .player-container[data-is-left="true"]::before {
      display: flex;
      justify-content: center;
      align-items: center;
      content: attr(data-match-number);
      position: absolute;
      color: white;
      background: #999999;
      /*background: #2846c3;*/
      font-weight: bold;
      transform: translate(50%, 25%);
      width: 2.2rem;
      height: 2.2rem;
      border-radius: 0.7rem;
      cursor: pointer;
      font-size: 1rem;
      letter-spacing: -0.03rem;
      right: 0;
      top: 50%;
      z-index: 100;
    }

    .player-container[data-is-left="true"][data-match-result-exists="true"]::before {
      background: #2846c3;
    }
  }
}