:root {
  --main-pink-color: #ff96a0;
  --main-light-pink-color: #aee4ed;
  --main-dark-color:#1d4a77;
}


html, body{
	width:100%;
	height:100%;
}

.container {
	max-width: 1100px;
}

.hidden { display: none!important ;}



.timer { font-size: 24px; color: red; }


.bg-my-dark{
  background: var(--main-dark-color);
  color:#fff;
}

.yh-bgcolor1{
  background: var(--main-light-pink-color);
}


.yh-quiz-videoPage{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.yh-quiz-videoPage a#showVideo{
  width:60%;
  padding:1.2rem;
}

.yh-quiz-videoPage a#showVideo img{
  width:100%;
  height:auto;
}



.mainBg{
  height: 100%;
}

.dark-btnStyle{
  width: 100%;
  height: auto;
  padding: 1rem .5rem;
  background: var(--main-dark-color);
  color: #fff;
  margin-bottom: 1rem;
  display: block;
  text-align: center;
  border-radius: 10px;
  border:0;
  text-decoration: none;
  box-sizing: border-box;
}


.logoutBar{
  width:100%;
  padding:.5rem 0;
  display: flex;
  justify-content: flex-end;
  border-bottom:1px solid #00a2af;
  margin-bottom:1.2rem;
}

.logoutBar.inshareP{
  justify-content: space-between;
}

.logoutBar p{
  margin:0;
  color:#333;
  font-size: 1rem;
  color:#00a2af;
}

.logoutBar a:link,
.logoutBar a:visited,
.logoutBar a:active{
  text-decoration: none;
  /* border:1px solid #00a2af; */
  color:#00a2af;
  font-size: .8rem;
  padding:.25rem .35rem;
  border-radius:5px;
}


/* 登入頁面 */
#loginSection{
  width:100%!important;
  display: flex;
  align-content: center;
  flex-direction: column;
  box-sizing: border-box;
}

#loginSection input{
  width:100%;
  padding:.8rem;
  margin-bottom:.5rem;
}


.logoutBtn{
  color:#fff;
  text-decoration: none;
  padding:.15rem .35rem;
  text-align: center;
  border:1px solid #fff;
  border-radius:5px;
  background: var(--main-dark-color);
  font-size: .9rem;
}



/* 遊戲頁面 */
.textstyle1{
  color:var(--main-dark-color);
  border-top:1px solid var(--main-dark-color);
  border-bottom:1px solid var(--main-dark-color);
  padding:.25rem 0;
  text-align: center;
}

.textstyle2{
  color:var(--main-dark-color);
  font-size: 1.5rem;
  padding:.25rem 0;
  text-align: center;
}

.leftTimeBox{
  width:160px;
  height:160px;
  margin:0 auto;
  background: var(--main-dark-color);
  border-radius: 80px;
  display: flex;
  flex-direction: column;
  align-content: center;
  justify-content: center;
  align-items: center;
  text-align: center;
  color:#fff;
  /* margin-bottom:1.5rem; */
}

.leftTimeBox p{
  margin-bottom:.35rem;
}

.leftTimeBox .timer{
  height: auto;
  color:#fff;
  font-size: 1.2rem;
}

.leftTimeBox .timer span#timeLeft{
  font-size: 4rem;
  margin-right:.35rem;
  line-height: 1.1;
}

#questionContainer{
  display: flex;
  flex-direction: column;
  align-items: center;
}

#questionContainer .question{
  position: relative;
  display: flex;
  justify-content: center;
  margin: 1rem 0;
  margin-bottom:2rem;
  
}

#questionContainer .question .qBody{
  display: flex;
}

#questionContainer .question .qNo{
  position: relative;
  width:30px;
  height:30px;
  flex-shrink: 0; /* 防止縮小 */
  margin-right:.5rem;
  /* padding:.1rem 1.1rem; */
  border-radius: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--main-dark-color);
  color:#fff;
}

#questionContainer .question h4{
  font-size: 1.3rem;
  line-height: 1.4;
  color: var(--main-dark-color);
  margin:0;
  margin-bottom:1rem;
}

#tipBtn{
  font-size: .9rem;
  line-height: 1.3;
  text-decoration: none;
  border: 1px solid var(--main-dark-color);
  color:var(--main-dark-color);
  border-radius: 5px;
  padding:.35rem;
}

#questionContainer .question h4 b{
  font-size: 1.5rem;
  font-weight: bold;
  color:#ec5b54;
}

#questionContainer .quizSelect{
  width: 50%;
  display: flex;
  flex-direction:column;
  justify-content: center;
}

#questionContainer .quizSelect button.selBtn{
  border:2px solid var(--main-dark-color);
  border-radius: 5px;
  background: var(--main-light-pink-color);
  display: grid;
  grid-template-columns: 1fr 5fr;
  gap:.05rem;
  justify-content: center;
  align-items: center;
  padding: 1.3rem;
  margin-bottom:1rem;
  max-width: 100%;
  font-size: 1.2rem;
}

/* #questionContainer .quizSelect button.selBtn span:first-child{
  background: var(--main-dark-color);
  color: #fff;
} */

#questionContainer .quizSelect button.selBtn span:last-child{
  text-align: left;
}

#gameSection h5{
  text-align: center;
  font-size: 1.8rem;
  color: #DA758B;
  margin: 1rem 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

#gameSection h5:before,
#gameSection h5:after{
  content:"\00a0⭐⭐⭐\00a0";
  display: block;
  color: #DA758B;
  font-size: 1rem;
}

.qatitle{
  width:100%;
  text-align: center;
}




/* .qatitle img{
  width:300px;
  height: auto;
  display: block;
  margin:0 auto;
} */


/* 答題結束畫面 */



#wrongAnsBtn, #playAgain{
  margin-bottom:1rem;
}

#playAgain button p{
  margin-bottom:0;
  font-size: .8rem;
  color:yellow;
}

/* #wrongAnsBtn button{
  width:100%;
  background: var(--main-dark-color);
  color: #fff;
  border: 0;
  padding:1rem .5rem;
  border-radius: 10px;
} */

.resultTxtBox{
  width:100%;
  display: flex;
  flex-direction: column;
}

.resultTxtBox h2{
  width:100%;
  text-align: center;
}

.resultTxtBox img.finImg{
  width: 50%;
  height: auto;
  margin: 0 auto;
}

.resultTxtBox p{
  text-align: center;
  font-size: 1.2rem;
}

.resultTxtBox a.finBtn{
  width: 250px;
  margin: 0 auto;
}


/* 智慧王排行榜 */

.recResRow{
  height: 100%;
  overflow: auto;
  align-content: flex-start;
}

table.resTable{
  width:100%;
}

table.resTable tr th{
  text-align: center;
  background: var(--main-dark-color);
  color:#fff;
  padding:.25rem;
}

table.resTable tr td{
  text-align: center;
  padding:.25rem;
  font-size: 1rem;
}

table.resTable tr{
  background: rgb(255, 240, 243);
}

table.resTable tr:nth-child(even){
  background: #fff;
}

/* 正確解答頁面 */

.correctAnsBox .rightQ{
  border-radius: 5px;
  background: #fff; 
  padding: .15rem .35rem;
  margin-bottom:.5rem;
}

.correctAnsBox p{
  margin-bottom:.35rem;
}

.correctAnsBox .rightQ p{
  margin-bottom:0;
}


.correctAnsBox p.qtxt{
  color: var(--main-dark-color);
}

.correctAnsBox p.rAnstxt{
  color:#333;
}

/* 手機裝置樣式 (最大寬度 767px) */
@media (max-width: 767px) {
  /* 在此處加入您針對手機裝置的樣式 */
  .resultTxtBox img.finImg{
    width: 80%;
    height: auto;
    margin: 0 auto;
  }
  
  
  .yh-quiz-videoPage a#showVideo{
    width:100%;
    padding:1rem;
  }


  /* 範例：將標題文字置中對齊 */
  h1 {
	text-align: center;
  }
  
  #questionContainer .quizSelect {
      width: 90%;
      box-sizing: border-box;
  }

  /* 範例：調整按鈕樣式 */
  .btn {
	width: 100%; /* 讓按鈕寬度佔滿整個容器 */
	margin-bottom: 10px; /* 增加按鈕之間的間距 */
  }
  
  .qatitle img{
    width:100%;
    height:auto;
    display: block;
  }
  
}