section.bracket {
  overflow: auto;
}

section.bracket figure {
  display: grid;
  grid-gap: 1rem;
  grid-auto-columns: 24rem;
  grid-auto-rows: 6rem;
}

section.bracket figure div.title {
  text-align: center;
  --pico-border-width: 0.1875rem;
  --pico-font-weight: 600;
  font-weight: var(--pico-font-weight);
  padding: calc(var(--pico-spacing) / 2) var(--pico-spacing);
  border-bottom: var(--pico-border-width) solid var(--pico-table-border-color);
  white-space: nowrap;
}

section.bracket figure .game {
  text-align: center;
  align-content: center;
}

section.bracket figure .game:not(.dummy) {
  border-radius: var(--pico-border-radius);
  border-color: var(--pico-table-border-color);
  border-style: solid;
  border-width: var(--pico-border-width);
}

section.bracket .battle {
  padding: 0;
}

section.bracket a.game {
  text-decoration: none;
  display: block;
}

section.bracket a.game:hover {
  text-decoration: none;
  background-color: var(--pico-dropdown-hover-background-color);
}

section.bracket .battle-result {
  display: none;
}

section.bracket .battle-game-id,
section.bracket .battle-title,
section.bracket .battle-role {
  display: block;
  color: var(--pico-color);
}

section.bracket .battle-game-id,
section.bracket .battle-role {
  --pico-color: #888;
}

section.bracket .battle-title {
  display: flex;
  gap: 1rem;
  align-items: center;
}

section.bracket .battle-participant {
  flex: 1;
}

@media (max-width: 767px) {
  section.bracket figure,
  section.bracket figure div.title {
    display: block;
  }

  section.bracket figure .game {
    display: block;
    padding-top: var(--pico-spacing);
    padding-bottom: var(--pico-spacing);
  }

  section.bracket figure .game.dummy {
    display: none;
  }

  section.bracket figure .game:not(.dummy) {
    border-style: none;
  }
}




.battle-participant.winner {
  display: flex;
  justify-content: center;
  align-items: center;
  -font-weight: 700;
  -font-size: 3rem;
  text-align: center;
}

.battle-participant.winner::before,
.battle-participant.winner::after {
  content: "";
  display: block;
  background-image: url("/assets/wreath-31913a66.svg");
  background-size: 100% 100%;
  height: 2rem;
  aspect-ratio: 1 / 1;
}

.battle-participant.winner::before {
  transform: scaleX(-1);
}