@font-face {
  font-family: 'SpoqaHanSansNeo-Regular';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2108@1.1/SpoqaHanSansNeo-Regular.woff') format('woff');
  font-weight: 500;
  font-style: normal;
}

body {
  font-family: 'SpoqaHanSansNeo-Regular';
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-use-select: none;
  user-select: none;
}

img {
  -webkit-user-drag: none;
  -khtml-user-drag: none;
  -moz-user-drag: none;
  -o-user-drag: none;
  user-drag: none;
}

.game-result {
  display: flex;
  flex-direction: column;
  background-color: #000;
  width: 960px;
}

.game-result .top {
  display: flex;
  overflow-x: scroll;
}

.game-result .top .item {
  display: flex;
  flex-direction: column;
  border: 1px solid #575757;
}

.game-result .top .item>div {
  display: flex;
  justify-content: center;
  align-items: center;
}

.game-result .top .item .round {
  width: 132px;
  height: 39px;
  font-size: 20px;
  color: #CBCBCB;
  border-bottom: 1px solid #575757;
}

.game-result .top .item .card-box {
  display: flex;
  gap: 4px;
  position: relative;
  width: 132px;
  height: 120px;
  border-bottom: 1px solid #575757;
}

.game-result .top .item .card-box img {
  width: 56px;
  height: 81px;
  border-radius: 4px;
}

.game-result .top .item .card-box.three img {
  position: absolute;
}

.game-result .top .item .card-box.three img:nth-child(1) {
  transform: translateX(-32px);
}

.game-result .top .item .card-box.three img:nth-child(3) {
  transform: translateX(32px);
}

.game-result .top .item .player {
  background-color: #1C2D59;
}

.game-result .top .item .banker {
  background-color: #551E1C;
}

.game-result .top .item .result-message {
  width: 132px;
  height: 39px;
  background-color: #2D2D2D;
  border-bottom: 1px solid #575757;
}

.game-result .top .item .each-num {
  width: 132px;
  height: 39px;
  font-size: 16px;
  color: #DCCEA2;
}

.game-result .middle {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 960px;
  height: 56px;
  gap: 12px;
  font-size: 20px;
  color: white;
  overflow: hidden;
}

.game-result .middle .text:not(:last-child) {
  margin-right: 12px;
}

.game-result .middle .ball {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  color: #fff;
}

.game-result .bottom {
  display: flex;
  overflow-x: scroll;
}

.game-result .bottom .col {
  border: 1px solid #575757;
  border-right: none;
}

.game-result .bottom .col .type {
  font-weight: 700;
  font-size: 20px;
  line-height: 100%;
}

.game-result .bottom .col .type.player {
  color: #3584F7;
}

.game-result .bottom .col .type.banker {
  color: #C23026;
}

.game-result .bottom .col .item {
  width: 56px;
  height: 56px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-bottom: 1px solid #575757;
  background-color: #2E2E2E;
}

.game-result .bottom .col .streak {
  color: #FFFFFF;
  background-color: black;
  font-size: 20px;
  color: white;
  border-bottom: none;
}

.game-result .bottom .col .item .ball {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  font-weight: 500;
  font-size: 16px;
  line-height: 100%;
}

.ball.player {
  background-color: #2B61A9;
}

.ball.banker {
  background-color: #C23026;
}

.ball.tie {
  background-color: #5E942D;
}

[color=tie] {
  color: #0CDE47;
}

[color=banker] {
  color: #E65E59;
}

[color=player] {
  color: #35B4F7;
}