@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: 700;
  font-style: normal;
}

body {
  font-family: 'SpoqaHanSansNeo-Regular';
}

button {
  cursor: pointer;
}

* {
  background-size: 100% 100%;
}

.game-view {
  width: 960px;
  height: 1079px;
  position: relative;
  background-image: url(resource/_Background.png);
}

.game-view .top {
  height: 116px;
  width: 100%;
  display: flex;
  justify-content: flex-end;
  padding-right: 40px;
}

.game-view .bottom {
  display: flex;
  justify-content: space-between;
  width: 100%;
  height: 172px;
  padding: 0 112px 0  115px;
  margin-top: 586px;
}

.game-view .bottom :is(.left, .right) {
  width: 252px;
  position: relative;
}

.game-view .bottom :is(.left, .right) .list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.game-view .bottom :is(.left, .right) .result {
  width: 85px;
  height: 85px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #2B61A9;
  border: 4px solid #FFFFFF;
  border-radius: 80px;
  position: absolute;
  left: 50%;
  top: 172px;
  transform: translate(-50%, -50%);

  font-weight: 700;
  font-size: 40px;
  line-height: 100%;
  color: white;
}


.game-view .bottom .right .result {
  background: #C23026;
}

.game-view .bottom :is(.left, .right) .list .card {
  width: 120px;
  height: 172px;
  background: url(resource/cards/back.svg);
  background-size: 100% 100%;
}

.game-view .bottom .left .list .card:nth-child(3) {
  grid-area: 2 / 2;
}

.game-view .bottom .result .item {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 46px;
  gap: 4px;
}

.game-view .bottom .middle {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
}

.game-view .bottom .title {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 208px;
  height: 40px;
  background-color: #251A28;
  border: 1px solid #9983A9;
  border-radius: 6px;
  font-size: 18px;
}

.game-view .bottom .main-title {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 18px;
}

.game-view .bottom .result {
  display: flex;
}

.game-view .top .right {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.game-view .mute .mask {
  width: 68px;
  height: 68px;
  background-image: url(resource/on.png);
}

.game-view .mute.muted {
  width: 68px;
  height: 68px;
}

.game-view .mute.muted .mask {
  background-image: url(resource/off.png);
}

.game-view .frame {
  display: flex;
  flex-direction: column;
  border-radius: 4px;
  width: 120px;
  height: 120px;
  background-color: #15335A;
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.2);
  gap: 10px;
  justify-content: center;
  align-items: center;
}

.game-view .frame .round-info {
  background: linear-gradient(180deg, #FFBB00 0%, #FFE65D 47.92%, #FFBB00 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-fill-color: transparent;
  font-style: normal;
  font-weight: 700;
  font-size: 18px;
  line-height: 19px;
}

.game-view .frame .timer {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
  justify-content: center;
  align-items: center;
}

.game-view .frame .timer .round-info .round-flex {
  display: flex;
}

.game-view .frame .timer .round-info .round-flex .round {
  color: #39E458;
}

.game-view .frame .timer .round-info .seed {
  display: none;
  font-weight: 400;
  font-size: 9px;
  color: #7E688B;
}

.game-view .frame .timer .seconds-wrap {
  position: relative;
}

.game-view .frame .timer .seconds-wrap .seconds {
  font-style: normal;
  font-weight: 700;
  font-size: 32px;
  line-height: 33px;
  color: white;
}

.game-view .frame .seconds-cover {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 5px;
  top: 0;
  font-weight: 700;
  font-size: 36px;
  line-height: 100%;
  width: 100%;
  height: 95%;
  border: 5px solid #9983A9;
  background-color: #3A2A43;
  border-radius: 20px;
  display: none;
}


.game-view .frame .progressContainer {
  background-image: url(resource/progressbar.png);
  width: calc(100% - 22px);
  height: 12px;
}

.game-view .frame .progressBar {
  background: linear-gradient(180deg, #FFBB00 0%, #FFE65D 47.92%, #FFBB00 100%);
  border-radius: 20px;
  width: 0%;
  height: 12px;
}

.game-view .frame .info-text {
  text-align: center;

  color: #4F4158;
  font-weight: 400;
  font-size: 9px;
  line-height: 9px;
}

.game-view .front .result {
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  gap: 27px;
  position: absolute;
  top: 245px;
  width: 294px;
  background-image: url(resource/result_board.png);
  padding: 24px;
  color: white;
}

.ball {
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: 700;
  font-size: 12px;
  line-height: 100%;
  text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.25);
  color: #FFFFFF;
  padding-right: 1px;
}

.ball-28 {
  width: 28px;
  height: 28px;
}

.ball-30 {
  width: 30px;
  height: 30px;
}

.ball-32 {
  width: 32px;
  height: 32px;
}

.ball.red {
  background-color: #D93E3E;
}

.ball.blue {
  background-color: #5994EA;
}

.ball.yellow {
  background-color: #FFD401;
}

.ball.green {
  background-color: #3BAC16;
}

.ball.purple {
  background-color: #A56ED8;
}


.ball.white {
  background-color: #fff;
  color: #222222;
}


.ball-img.red {
  background-image: url(resource/red.png);
}

.ball-img.blue {
  background-image: url(resource/blue.png);
}

.ball-img.yellow {
  background-image: url(resource/yellow.png);
}

.ball-img.green {
  background-image: url(resource/green.png);
}

.ball-img.white {
  background-image: url(resource/white.png);
  color: #222222;
}


.blank {
  width: 40px;
  height: 40px;
  background-image: url(resource/blank_ball.png);
  transition: all .3s ease-in-out;
}

.blank.ball {
  background-image: none;
}