@font-face {
  font-family: 'Tenada';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2210-2@1.0/Tenada.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'WavvePADO-Regular';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2404@1.0/WavvePADO-Regular.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'TTHakgyoansimTtwimteulR';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2402_keris@1.0/TTHakgyoansimTtwimteulR.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
}

body {
 background: url(../img/background.png) no-repeat center/cover;
  display: flex;
  flex-direction: row;
  justify-content: center;
  margin-top: 50px;
}


/* 메뉴판 css */
#title {
  /* border: 10px solid #000; */
  height: 800px;
  width: 350px;
  margin-top: 20px;
  text-align: center;
  background: rgb(137, 201, 41);
  border-radius: 20px;
}


/* 메뉴판 제목 */
#title h1 {
  padding: 35px;
  font-size: 40px;
  color: rgb(255, 255, 255);
  font-weight: 400;
  font-family: 'TTHakgyoansimTtwimteulR';
  text-shadow: 3px 3px 0px #6c6b6b;
}

#title image {
  width: 10px;
  height: 10px;
}

#title span {
  font-size: 20px;
}


/* 메뉴판 - 플레이어 정보 */
#title div.playerA {
  background: rgb(252, 210, 39);
  border-radius: 20px;
  padding: 20px;
}
#title div.playerA h2{
  font-size: 15px;
  font-family: WavvePADO-Regular;
}

#title div.playerB {
  background: rgb(255, 174, 23);
  border-radius: 20px;
  padding: 20px;
  margin-top: 10px;
}
#title div.playerB h2{
  font-size: 15px;
  font-family: WavvePADO-Regular;
}

/* 현재 누구의 턴인지 보여주는 */

.turn .diceInfo{
  height: 100px;
  border-radius: 20px;
}

.turn .diceInfo #playerToken{
  transform: scale(0.5);
  position: relative;
  margin-top: -30px;
  animation: blink 1.5s ease infinite; /* blink 애니메이션 적용 */
}
.turn .diceInfo #currentPlayerDisplay{
  font-family: WavvePADO-Regular;
  font-size: 20px;
  margin-top: -30px;
}
/* 플레이어 말 깜빡임 애니메이션 효과 */
@keyframes blink {
  0% { top: 0;} /* 시작 시 보임 */
  50% { top:-5px;} /* 50% 시점에서 사라짐 */
  100% { top: 0;} /* 끝나면 다시 보임 */
}


/* 주사위 굴러가는 이미지 */
section.dice .dice-image{
  border: 1px solid #000;
  height: 200px;
  border-radius: 20px;
  background: white;
  margin-top: 30px;
  background-size: cover;
  background-position: center;
  /* background-image: url(/board/img/dice.gif); */
}


/* 🎲 주사위 버튼 */

section.dice button {
  border: none;
  outline: none;
  background-color: #3863c9;
  padding: 20px 40px;
  font-size: 18px;
  font-weight: 700;
  color: #fff;
  border-radius: 5px;
  transition: all ease 0.1s;
  box-shadow: 0px 5px 0px 0px #7791ce;
  margin-top:30px;
}

  section.dice button:active{
    transform: translateY(5px);
    box-shadow: 0px 0px 0px 0px #879bca;
  }