.bracket-hud {
  position: absolute;
  inset: 0;
  padding: 14px;
  background: radial-gradient(circle at 50% 20%, rgba(80, 114, 255, 0.2), rgba(8, 9, 18, 0.93));
  backdrop-filter: blur(2px);
  z-index: 4;
  overflow: auto;
}

.bracket-hud__header {
  margin-bottom: 10px;
  text-align: center;
}

.bracket-tree {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.bracket-col {
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  background: rgba(10, 13, 24, 0.58);
  padding: 8px;
}

.bracket-col__title {
  color: #9aeaf7;
  font-size: 18px;
  margin-bottom: 6px;
}

.bracket-match {
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  padding: 6px;
  margin-bottom: 6px;
  background: rgba(0, 0, 0, 0.2);
}

.bracket-fighter {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 22px;
  color: rgba(255, 255, 255, 0.8);
}

.bracket-fighter.is-winner {
  color: #7df6b0;
}

.bracket-fighter.is-loser {
  color: #ff8f8f;
}

.bracket-fighter__tag {
  font-size: 16px;
  opacity: 0.85;
}