/* 极速竞技 */
.drag {
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  width: 2.1875rem;
  height: 2.1875rem;
  border-radius: 50%;
  font-size: 0.375rem;
  position: fixed;
  z-index: 20;
}
.ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* xbox 手柄 */
.xbox-elliptic {
  width: 100%;
  height: 100%;
  font-size: 12px;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  word-break: break-all;
  white-space: break-spaces;
  text-align: center;
}
/* */
.elliptic-start {
  background: url("../img//xbox/xbox-sessting.png") no-repeat;
  background-size: 100% 100%;
}

.elliptic-start.active {
  background: url("../img/xbox/xbox-sessting-active.png") no-repeat;

  background-size: 100% 100%;
}
/* 设置 */
.elliptic-select {
  background: url("../img/xbox/xbox-elliptic.png") no-repeat;
  background-size: 100% 100%;
}
.elliptic-select.active {
  background: url("../img/xbox/xbox-elliptic-active.png") no-repeat;
  background-size: 100% 100%;
}
.xbox-square {
  background: url("../img/xbox/xbox-square.png") no-repeat;
  background-size: 100% 100%;
  width: 100%;
  height: 100%;
  font-size: 12px;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  word-break: break-all;
  white-space: break-spaces;
  text-align: center;
}
.xbox-square.active {
  background: url("../img/xbox/xbox-square-active.png") no-repeat;
  background-size: 100% 100%;
}

.xbox-round {
  background: url("../img/xbox/x-box-round.png") no-repeat;
  background-size: 100% 100%;
  width: 100%;
  height: 100%;
  font-size: 12px;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  word-break: break-all;
  white-space: break-spaces;
  text-align: center;
}
.xbox-round.active {
  background: url("../img/xbox/xbox-round-active.png") no-repeat;
  background-size: 100% 100%;
}
.xbox-dpad {
  background: url("../img/xbox/D-pad.png") no-repeat;
  background-size: 100% 100%;
}
.kb-rock-letter {
  position: absolute;
}

.rock-wrapper-right {
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.xbox-toucharea {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-image: url("../img/xbox/rock-bg.png");
  background-position: 0% 0%;
  background-size: 100% 100%;
  border-radius: 50%;
}
.ball {
  position: absolute;
  border-radius: 50%;
  top: 50%;
  left: 50%;
  cursor: pointer;
}
.ball-lt {
  background-image: url("../img/xbox/xbox-bar-lt.png");
  background-position: 0% 0%;
  background-size: 100% 100%;
}
.ball-rt {
  background-image: url("../img/xbox/xbox-bar-rt.png");
  background-position: 0% 0%;
  background-size: 100% 100%;
}

.roulette-style {
  position: absolute;
  background-image: url("../img/gta5/roulette_style.png");
  background-position: 0% 0%;
  background-size: 100% 100%;
  pointer-events: none;
  display: none;
  /* transition: all 0.1s linear; */
  /* transform-origin: center; */
}