@import url(https://fonts.googleapis.com/css?family=Fredoka+One);
/* 只針對唱歌遊戲 modal 內的元素，避免影響整個頁面 */
#singingGame * {
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}

/* 只針對唱歌遊戲 modal 內的標題和段落 */
#singingGame h1 {
  font-family: "Fredoka One";
  text-align: center;
  font-size: 80px;
  color: #444;
  margin-bottom: 0px;
}

#singingGame p {
  font-family: "Fredoka One";
  text-align: center;
  font-size: 30px;
  color: #777;
  margin-top: 15px;
}

/* body 背景樣式已移至 modal-content 的 inline style，避免影響整個頁面 */
/* 背景樣式已在 HTML 的 inline style 中設定 */

.lildude-home {
  height: 100%;
  width: 100%;
  overflow: hidden;
  position: relative;
  z-index: 100; /* 確保在 singing-game-container 下方，但足夠高以便點擊 */
  pointer-events: auto; /* 確保可以接收點擊事件 */
}

.lildude, .lildude2, .lildude3 {
  position: absolute;
  bottom: 0%;
  height: 100%;
  /* width 由 JavaScript 動態設置，移除固定寬度 */
  margin: 0 auto;
  transition: height ease 0.5s;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  z-index: 100; /* 確保人物在容器上方，可以點擊 */
  cursor: pointer; /* 顯示手型游標，提示可以點擊 */
  pointer-events: auto !important; /* 強制允許點擊 */
}
.lildude:hover, .lildude2:hover, .lildude3:hover {
  height: 110%;
  transition: height ease 0.5s;
}

/* 懸停時使用更明顯的動畫 */
.lildude:hover .lildude-svg,
.lildude2:hover .lildude-svg,
.lildude3:hover .lildude-svg {
  animation: hoverBounce 2s ease-in-out infinite;
}

/* 懸停時的彈跳動畫 */
/* 使用 CSS 變量來組合旋轉和位移 */
@keyframes hoverBounce {
  0%, 100% {
    transform: rotate(var(--rotation-angle, 0deg)) translateY(0) scale(1);
  }
  50% {
    transform: rotate(var(--rotation-angle, 0deg)) translateY(-12px) scale(1.05);
  }
}
.lildude-svg {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: strat;
  transition: transform ease 0.5s;
  pointer-events: auto; /* 確保圖片可以接收點擊事件 */
  animation: floatIdle 3s ease-in-out infinite; /* 添加待機浮動動畫 */
  --rotation-angle: 0deg; /* CSS 變量用於存儲旋轉角度 */
}

/* 待機浮動動畫：輕微的上下浮動 */
/* 使用 CSS 變量來組合旋轉和位移 */
@keyframes floatIdle {
  0%, 100% {
    transform: rotate(var(--rotation-angle, 0deg)) translateY(0);
  }
  50% {
    transform: rotate(var(--rotation-angle, 0deg)) translateY(-8px);
  }
}
.lildude:active, .lildude2:active, .lildude3:active {
  height: 75%;
  transition: height ease 0.5s;
}
/* Active 狀態：使用 JavaScript 動態設置的角度 */
.lildude:active .lildude-svg {
  transform: scaleY(1.1);
  transition: transform ease 0.5s;
  animation: none; /* 點擊時停止動畫 */
}

/* 左側和右側角色在 active 時保留旋轉角度（由 JavaScript 動態設置） */
.lildude2:active .lildude-svg,
.lildude3:active .lildude-svg {
  /* transform 由 JavaScript 動態設置，包含旋轉和 scaleY */
  transition: transform ease 0.5s;
  animation: none; /* 點擊時停止動畫 */
}

/* 左側角色 - 容器只負責定位，不旋轉 */
/* 位置由 JavaScript 動態設置 */
.lildude3 {
  /* left 和 width 由 JavaScript 動態設置 */
  position: absolute;
  bottom: -10%; /* 往下移動一點 */
}

/* 左側角色的圖片旋轉 */
/* 角度由 JavaScript 動態設置 */
.lildude3 .lildude-svg {
  transform-origin: center bottom;
  animation: floatIdleLeft 2.8s ease-in-out infinite; 左側角色使用稍微不同的動畫時機
  /* --rotation-angle: 0deg; CSS 變量用於存儲旋轉角度 */
}

/* 左側角色的待機浮動動畫 */
/* 使用 CSS 變量來組合旋轉和位移 */
@keyframes floatIdleLeft {
  0%, 100% {
    transform: rotate(var(--rotation-angle, 0deg)) translateY(0) translateX(0);
  }
  50% {
    transform: rotate(var(--rotation-angle, 0deg)) translateY(-7px) translateX(-2px);
  }
}

/* 中間角色 */
/* 位置由 JavaScript 動態設置 */
.lildude {
  /* left 和 width 由 JavaScript 動態設置 */
  bottom: -35%;
}

/* 右側角色 - 容器只負責定位，不旋轉 */
/* 位置由 JavaScript 動態設置 */
.lildude2 {
  /* right 和 width 由 JavaScript 動態設置 */
  position: absolute;
  bottom: -10%; /* 往下移動一點 */
}

/* 右側角色的圖片旋轉 */
/* 角度由 JavaScript 動態設置 */
.lildude2 .lildude-svg {
  transform-origin: center bottom;
  animation: floatIdleRight 2.8s ease-in-out infinite; /* 右側角色使用稍微不同的動畫時機 */
  --rotation-angle: 0deg; /* CSS 變量用於存儲旋轉角度 */
}

/* 右側角色的待機浮動動畫 */
/* 使用 CSS 變量來組合旋轉和位移 */
@keyframes floatIdleRight {
  0%, 100% {
    transform: rotate(var(--rotation-angle, 0deg)) translateY(0) translateX(0);
  }
  50% {
    transform: rotate(var(--rotation-angle, 0deg)) translateY(-9px) translateX(2px);
  }
}




/* 彈跳視窗寬度設定 - 由 JavaScript 動態調整，此處僅作為預設值 */
#singingGame .modal-dialog {
  max-width: 350px; /* 預設值，將由 JavaScript 根據圖片比例動態調整 */
}

/* 移除 padding 和 border，讓背景圖完全填滿 */
#singingGame .modal-content {
  padding: 0 !important;
  border: none !important;
  background-color: transparent !important; /* 背景色透明，讓背景圖直接顯示 */
}

#singingGame .modal-body {
  padding: 0 !important;
  background-color: transparent !important; /* 背景色透明 */
}

#singingGame .modal-header {
  padding: 0 !important;
  border: none !important;
  background-color: transparent !important; /* 背景色透明 */
  position: absolute; /* 絕對定位 */
  top: -40px; /* 移到背景圖上方 */
  right: 0; /* 靠右對齊 */
  z-index: 10; /* 確保在背景圖上方 */
  width: auto;
  height: auto;
}

/* 關閉按鈕樣式調整 */
#singingGame .modal-header .btn-close {
  margin: 0 ;
  padding: 0.5rem ;
  width: 32px ;
  height: 32px ;
  opacity: 1 ;
}

#singingGame .singing-game-container {
  position: absolute;
  display: flex; 
  justify-content: center;
  align-items: center;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 15; /* 確保在 lildude-home 上方 */
}

/* 問號圖片樣式 */
#singingGame .question-mark {
  max-width: 80%;
  max-height: 80%;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

/* 吉祥話文字容器 */
#singingGame .blessing-text {
  position: absolute;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: auto; /* 改為 auto，不要覆蓋整個區域 */
  height: auto; /* 改為 auto，不要覆蓋整個區域 */
  min-width: 500px; /* 確保有足夠空間顯示內容 */
}

/* 確保按鈕區域可以點擊 */
#singingGame .blessing-text > * {
  pointer-events: auto; /* 所有直接子元素都可以點擊 */
}

/* 吉祥圖片樣式 */
#singingGame .blessing-image {
  display: none; /* 預設隱藏 */
  max-width: 130px; /* 調整圖片大小 */
  max-height: 130px;
  width: auto;
  height: auto;
  object-fit: contain;
  animation: fadeInScale 0.5s ease; /* 淡入和縮放動畫 */
}

/* 圖片淡入和縮放動畫 */
@keyframes fadeInScale {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

/* 吉祥話內容樣式 */
#singingGame .blessing-content {
  font-family: 'Fredoka One', sans-serif;
  font-size: 2.2rem;
  font-weight: 600;
  color: #FFE9AE;
  text-align: center;
  padding: 0.5rem 0.5rem;
  border-radius: 15px;
  margin: 0;
  line-height: 1.5;
  animation: fadeInScale 0.5s ease; 
}

/* 活動按鈕樣式 - 在 modal-footer 中顯示 */
#singingGame .activity-button {
  display: inline-block; /* 一開始就顯示 */
  font-family: 'Fredoka One', sans-serif;
  font-size: 1.2rem;
  font-weight: 700;
  color: #de4721;
  text-align: center;
  text-decoration: none;
  padding: 0.5rem 1.5rem;
  background: linear-gradient(-3deg, #FFEF84 0%, #FFFEF4 100%);
  border-radius: 50px;
  transition: all 0.3s ease;
  animation: bounce-up 3s infinite;
  pointer-events: auto !important; /* 允許點擊，使用 !important 確保優先級 */
  position: relative; /* 確保 z-index 生效 */
  cursor: pointer; /* 顯示手型游標 */
  min-width: 120px; /* 確保按鈕有足夠的點擊區域 */
}

#singingGame .activity-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(255, 216, 107, 0.6);
  background: linear-gradient(135deg, #FFFFFF 0%, #fff9d4 100%);
}

#singingGame .activity-button:active {
  transform: translateY(0);
}





/* Modal Footer 放在背景圖外面最下面 */
#singingGame .modal-footer {
  position: absolute;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  bottom: -140px; /* 移到背景圖下方 */
  left: 50%;
  transform: translateX(-50%); /* 水平居中 */
  width: 100%;
  padding: 1rem 0 ;
  border: none ;
  background-color: transparent ;
  text-align: center;
  z-index: 10;
  gap: 1.5em; /* 調整間距 */
}

#singingGame .modal-footer .modal-title {
  margin: 0 ;
  top: 20px;
  font-size: 1.2rem ;
  color: #FFE9AE ;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  animation: bounce-up 3s infinite; /* 跳動動畫效果 */
}

/* 向上箭頭icon */
#singingGame .modal-footer .modal-title::before {
  content: ""; /* 清空文字内容 */
  display: block;
  width: 24px; 
  height: 24px; 
  background-image: url('../CB_NEW_YEAR/icon_up.svg');
  background-size: contain; /* 保持icon比例 */
  background-repeat: no-repeat;
  background-position: center;
  margin: 0 auto; 
  animation: bounce-up 3s infinite; /* 跳動動畫效果 */
  /* 如果需要改變顏色為 #FFE9AE，取消下面這行的註釋 */
  /* filter: brightness(0) saturate(100%) invert(89%) sepia(15%) saturate(2000%) hue-rotate(15deg) brightness(105%) contrast(95%); */
}

/* 向上跳動動畫（可選） */
@keyframes bounce-up {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

/* RWD 響應式設計 - 參考 three.css 的模式 */
/* 平板和手機 (≤768px) */
@media (max-width: 768px) {
  #singingGame .blessing-content {
    top: 35%;
    font-size: 2rem;
    /* padding: 0.8rem 1.5rem; */
  }

  #singingGame .blessing-image{
    max-width: 120px;
    max-height: 120px;
    
  }
  
  #singingGame .activity-button {
    font-size: 1rem;
    padding: 0.7rem 1.5rem;
  }
 
  /* Modal 對話框調整 - 由 JavaScript 動態調整 */
  #singingGame .modal-dialog {
    /* max-width 由 JavaScript 根據圖片比例動態設置 */
    margin: 1rem auto;
  }

  /* Modal 內容高度調整 - 由 JavaScript 動態調整 */
  #singingGame .modal-content {
    /* width, min-height, height 由 JavaScript 動態設置 */
    /* max-height 由 JavaScript 動態設置 */
    background-size: contain !important;
    background-position: center center !important;
  }

  /* #singingGame .modal-body 的 height, max-height 由 JavaScript 動態設置 */

  #singingGame .modal-title {
    font-size: 1.5rem;
    z-index: 100;
  }

  /* 手機端 Footer 調整 */
  #singingGame .modal-footer {
    bottom: -150px; /* 手機端距離稍微近一點 */
  }

  #singingGame .modal-footer .modal-title {
    font-size: 1.2rem !important; /* 手機端字體稍小 */
  }

  /* 手機端向上箭頭圖標調整 */
  #singingGame .modal-footer .modal-title::before {
    width: 20px; /* 手機端圖標稍小 */
    height: 20px;
  }

  .lildude {
    height: 65%;  /* 從 45% 增加到 60%，讓人物更大 */
    bottom: -15%;
  }

  .lildude2 {
    height: 60%;  /* 從 45% 增加到 60%，讓人物更大 */
    bottom: 8%;
  }

  .lildude3 {
    height: 55%;  /* 從 40% 增加到 55%，讓人物更大 */
    bottom: 8%;
  }

  /* 小人互動效果調整 */
  .lildude:active, .lildude2:active, .lildude3:active {
    height: 75%;  /* 從 65% 增加到 75%，讓點擊時更大 */
  }

  .lildude:hover, .lildude2:hover, .lildude3:hover {
    height: 65%;  /* 從 48% 增加到 65%，讓懸停時更大 */
  }
}

/* 響應式設計 - 手機端調整字體大小 */

@media (max-width: 500px) {
  
  
  #singingGame .activity-button {
    font-size: 0.9rem;
    padding: 0.6rem 1.2rem;
  }
   
  .lildude2 {
    bottom: 5% !important; /* 右邊角色往下移動 */
  }

  .lildude3 {
    bottom: 5% !important; /* 左邊角色往下移動 */
  }
}

/* 小螢幕手機 (350px - 767px) */
@media (max-width: 767px) and (min-width: 350px) {
  
  #singingGame .modal-content {
    /* width, min-height, height 由 JavaScript 動態設置 */
    background-size: contain !important;
    background-position: center center !important;
  }

  /* modal-body height 由 JavaScript 動態設置 */

  /* 更小的字體 */
  #singingGame h1 {
    font-size: 32px;
  }

  #singingGame p {
    font-size: 16px;
  }

  #singingGame .modal-title {
    font-size: 20px !important;
  }

  /* 更小的小人 */
  /* 位置由 JavaScript 動態設置，這裡只設置高度 */
  .lildude {
    height: 55%;  /* 從 40% 增加到 55%，讓人物更大 */
  }

  .lildude2 {
    height: 55%;  /* 從 40% 增加到 55%，讓人物更大 */
  }

  .lildude3 {
    height: 50%;  /* 從 35% 增加到 50%，讓人物更大 */
    
  }
}

/* 超小螢幕 (≤349px) */
@media (max-width: 349px) {
  #singingGame .blessing-content {
    top: 30%;
    font-size: 1.8rem;
    /* padding: 0.6rem 1rem; */
  }

  #singingGame .blessing-image{
    max-width: 100px;
    max-height: 100px;
    
  }
  #singingGame .modal-content {
    /* width, min-height, height 由 JavaScript 動態設置 */
    background-size: contain !important;
    background-position: center center !important;
  }

  /* modal-body height 由 JavaScript 動態設置 */

  #singingGame p {
    font-size: 14px;
  }

  #singingGame .modal-title {
    font-size: 18px !important;
  }

  /* 最小的小人 */
  /* 位置由 JavaScript 動態設置，這裡只設置高度 */
  .lildude {
    height: 55%;  /* 從 35% 增加到 50%，讓人物更大 */
    bottom: -13%;
  }

  .lildude2 {
    height: 60%;  /* 從 35% 增加到 50%，讓人物更大 */
  }

  .lildude3 {
    height: 55%;  /* 從 30% 增加到 55%，讓人物更大 */
  }
}