/* ===== CSS 變數定義 ===== */
:root {
  --primary-pink: #ff6b9d;
  --primary-purple: #c44dff;
  --secondary-pink: #ffa8d5;
  --text-dark: #2d3436;
  --text-light: #636e72;
  --card-shadow: 0 20px 60px rgba(255, 107, 157, 0.3);
  --card-hover-shadow: 0 25px 80px rgba(255, 107, 157, 0.4);
}

/* ===== 全域樣式 ===== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* 視覺隱藏但保持可訪問性 */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  min-height: 100vh;
  overflow-x: hidden;
  position: relative;
  /* 杏仁色可愛箭頭鼠標 */
  cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="28" viewBox="0 0 24 28"><defs><filter id="shadow"><feDropShadow dx="0.5" dy="0.5" stdDeviation="0.5" flood-color="%23000" flood-opacity="0.3"/></filter></defs><path d="M 2 2 L 2 22 L 8 16 L 12 24 L 15 23 L 11 15 L 18 15 Z" fill="%23FFEBCD" stroke="%23D2B48C" stroke-width="1.5" stroke-linejoin="round" filter="url(%23shadow)"/></svg>') 2 2, auto;
}

/* 可點擊元素使用金黃色箭頭鼠標 */
button, a, .clickable, [onclick] {
  cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="28" viewBox="0 0 24 28"><defs><filter id="shadow2"><feDropShadow dx="0.5" dy="0.5" stdDeviation="0.5" flood-color="%23000" flood-opacity="0.4"/></filter></defs><path d="M 2 2 L 2 22 L 8 16 L 12 24 L 15 23 L 11 15 L 18 15 Z" fill="%23FFD700" stroke="%23FFA500" stroke-width="1.8" stroke-linejoin="round" filter="url(%23shadow2)"/></svg>') 2 2, pointer;
}

/* 輸入框使用文字游標樣式（杏仁色細線） */
input, textarea {
  cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="24" viewBox="0 0 20 24"><rect x="8" y="2" width="4" height="20" fill="%23D2B48C" rx="2"/><rect x="4" y="0" width="12" height="3" fill="%23D2B48C" rx="1"/><rect x="4" y="21" width="12" height="3" fill="%23D2B48C" rx="1"/></svg>') 10 12, text;
}

/* ===== Canvas 背景層 ===== */
#mainCanvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

/* ===== 動畫角色（骨架動畫 GIF） ===== */
.character-animation {
  position: fixed;
  bottom: 0;
  left: 50px;
  width: 33vw;
  max-width: 500px;
  height: 33vw;
  max-height: 500px;
  z-index: 5;
  pointer-events: auto;
  cursor: pointer;
  transition: transform 0.2s ease;
  background-image: url('../images/character_running.gif?v=7');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center bottom;
  image-rendering: pixelated; /* 保持像素風格 */
  image-rendering: -moz-crisp-edges;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
}

/* GIF 自帶動畫，不需要 CSS 動畫控制 */
.character-animation:hover {
  transform: scale(1.05);
}

/* ===== 容器 ===== */
.container {
  position: relative;
  z-index: 10;
  width: 100%;
  max-width: 900px; /* 變寬以容納長矩形 */
  margin: 0 auto;
  padding: 60px 20px 20px 20px; /* 上方留60px空間 */
  min-height: 100vh;
  display: flex;
  align-items: flex-start; /* 改為上方對齊 */
  justify-content: center;
  animation: fadeInUp 0.8s ease-out;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ===== 卡片設計 ===== */
.card {
  background: linear-gradient(135deg, rgba(64, 224, 208, 0.08), rgba(0, 191, 255, 0.08)); /* 青綠色到青藍色（更透明） */
  backdrop-filter: none; /* 移除模糊效果 */
  padding: 35px 60px; /* 減少垂直空間，水平空間也略減 */
  border-radius: 25px;
  box-shadow: 0 20px 60px rgba(0, 191, 255, 0.2), 0 0 30px rgba(64, 224, 208, 0.15);
  text-align: center;
  transition: all 0.3s ease;
  border: 2px solid rgba(100, 255, 218, 0.25); /* 邊框適度透明 */
  position: relative;
  overflow: hidden;
  width: 100%; /* 佔滿容器寬度 */
  max-width: 800px; /* 長矩形最大寬度 */
}

/* 科技光效背景（更透明） */
.card::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(100, 255, 218, 0.05) 0%, transparent 70%);
  animation: techGlow 4s ease-in-out infinite;
  pointer-events: none;
}

@keyframes techGlow {
  0%, 100% { transform: translate(0, 0); opacity: 0.2; }
  50% { transform: translate(10px, 10px); opacity: 0.4; }
}

.card:hover {
  transform: translateY(-5px);
  box-shadow: 0 25px 80px rgba(0, 191, 255, 0.3), 0 0 40px rgba(64, 224, 208, 0.25);
  border-color: rgba(100, 255, 218, 0.35);
}

/* ===== Emoji 裝飾 ===== */
.emoji-decoration {
  font-size: 50px; /* 略微縮小 */
  margin-bottom: 15px; /* 減少間距 */
  animation: float 3s ease-in-out infinite;
  position: relative;
  z-index: 1;
}

@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-15px); }
}

/* ===== 標題 ===== */
.title {
  font-size: 48px; /* 略微縮小但仍然比歡迎文字大很多 */
  font-weight: 700;
  color: #000000; /* 黑色文字 */
  margin-bottom: 20px; /* 增加與下方文字的間距 */
  animation: titlePulse 2s ease-in-out infinite;
  letter-spacing: 8px; /* 拉長字距 */
  text-shadow: 0 0 20px rgba(100, 255, 218, 0.5), 0 2px 4px rgba(0, 0, 0, 0.2);
  position: relative;
  z-index: 1;
}

@keyframes titlePulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.02); }
}

/* ===== 副標題 ===== */
.subtitle {
  font-size: 22px;
  background: linear-gradient(180deg, #000000, #1a1a1a); /* 漸層黑 */
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 10px;
  font-weight: 700; /* 加粗 */
  letter-spacing: 2px;
  position: relative;
  z-index: 1;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* ===== 描述文字 ===== */
.description {
  font-size: 16px;
  background: linear-gradient(180deg, #0a0a0a, #2d2d2d); /* 漸層深黑 */
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 35px;
  line-height: 1.6;
  letter-spacing: 1px;
  position: relative;
  z-index: 1;
  font-weight: 600; /* 加粗 */
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* ===== 按鈕設計 ===== */
.btn {
  padding: 16px 48px;
  font-size: 18px;
  font-weight: 600;
  color: white;
  background: linear-gradient(135deg, var(--primary-pink), var(--primary-purple));
  border: none;
  border-radius: 50px;
  cursor: pointer;
  box-shadow: 0 10px 30px rgba(255, 107, 157, 0.4);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  z-index: 1;
}

.btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, var(--primary-purple), var(--secondary-pink));
  transition: left 0.3s ease;
  z-index: 0;
}

.btn:hover::before {
  left: 0;
}

.btn span {
  position: relative;
  z-index: 2;
}

.btn:hover {
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 15px 40px rgba(255, 107, 157, 0.5);
}

.btn:active {
  transform: translateY(-1px) scale(1.02);
  box-shadow: 0 8px 20px rgba(255, 107, 157, 0.4);
}

/* ===== 左上角時段顯示器 ===== */
.time-period-display {
  position: fixed;
  top: 25px;
  left: 25px;
  background: rgba(40, 40, 50, 0.5); /* 更黯淡的深灰色，透明度降低 */
  backdrop-filter: blur(10px);
  padding: 15px 25px;
  border-radius: 15px;
  color: rgba(200, 200, 210, 0.9); /* 黯淡的淺灰色文字 */
  font-size: 18px;
  font-weight: 600;
  font-family: Arial, sans-serif;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
  z-index: 999;
  border: 2px solid rgba(255, 255, 255, 0.15); /* 更透明的邊框 */
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
  transition: all 0.3s ease;
}

.time-period-display:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
  background: rgba(50, 50, 60, 0.6); /* hover 時稍微亮一點 */
}

/* 手機版：時段顯示器 */
body.mobile-mode .time-period-display {
  top: 15px;
  left: 15px;
  padding: 10px 20px;
  font-size: 14px;
  border-radius: 12px;
}

@media (max-width: 600px) {
  .time-period-display {
    top: 15px;
    left: 15px;
    padding: 10px 20px;
    font-size: 14px;
    border-radius: 12px;
  }
}

/* ===== 左側縱向排行榜 ===== */
.side-leaderboard {
  position: fixed;
  top: 150px;
  left: 25px;
  width: 280px;
  max-height: calc(100vh - 180px);
  background: rgba(40, 40, 50, 0.90); /* 稍微加深背景避免遮擋時難以閱讀 */
  backdrop-filter: blur(15px);
  border-radius: 20px;
  border: 2px solid rgba(255, 255, 255, 0.15);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
  z-index: 998; /* 確保在主內容上方,但在對話框下方 */
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: all 0.3s ease; /* 平滑過渡 */
}

.side-leaderboard-header {
  background: linear-gradient(135deg, rgba(102, 126, 234, 0.9), rgba(118, 75, 162, 0.9));
  padding: 15px 20px;
  border-bottom: 2px solid rgba(255, 255, 255, 0.2);
}

.side-leaderboard-header h3 {
  margin: 0;
  font-size: 18px;
  color: white;
  text-align: center;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.side-leaderboard-list {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 10px;
  max-height: 400px;
  min-height: 200px; /* 確保有最小高度 */
  transition: max-height 0.3s ease;
}

/* 展開狀態時增加最大高度 */
.side-leaderboard.expanded .side-leaderboard-list {
  max-height: calc(100vh - 320px);
}

.side-leaderboard-list::-webkit-scrollbar {
  width: 8px;
}

.side-leaderboard-list::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 4px;
}

.side-leaderboard-list::-webkit-scrollbar-thumb {
  background: rgba(102, 126, 234, 0.5);
  border-radius: 4px;
}

.side-leaderboard-list::-webkit-scrollbar-thumb:hover {
  background: rgba(102, 126, 234, 0.7);
}

.side-leaderboard-loading {
  text-align: center;
  color: rgba(255, 255, 255, 0.6);
  padding: 20px;
  font-size: 14px;
}

.side-leaderboard-item {
  background: rgba(255, 255, 255, 0.08);
  margin-bottom: 8px;
  padding: 10px 12px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  gap: 10px;
  transition: all 0.3s ease;
  border: 1px solid transparent;
}

.side-leaderboard-item:hover {
  background: rgba(255, 255, 255, 0.12);
  transform: translateX(5px);
}

.side-leaderboard-item.current-user {
  background: linear-gradient(135deg, rgba(255, 107, 157, 0.3), rgba(196, 77, 255, 0.3));
  border: 1px solid rgba(255, 107, 157, 0.5);
  box-shadow: 0 0 15px rgba(255, 107, 157, 0.3);
}

.rank-badge {
  font-size: 20px;
  font-weight: bold;
  min-width: 35px;
  text-align: center;
  color: rgba(255, 255, 255, 0.9);
}

.rank-trophy {
  font-size: 28px;
  min-width: 35px;
  text-align: center;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
  animation: trophy-glow 2s ease-in-out infinite;
}

/* 獎盃特效 */
.rank-trophy.gold-trophy {
  font-size: 32px;
  filter: drop-shadow(0 0 8px rgba(255, 215, 0, 0.8));
}

.rank-trophy.silver-trophy {
  filter: drop-shadow(0 0 6px rgba(192, 192, 192, 0.8));
}

.rank-trophy.bronze-trophy {
  filter: drop-shadow(0 0 6px rgba(205, 127, 50, 0.8));
}

@keyframes trophy-glow {
  0%, 100% {
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
  }
  50% {
    filter: drop-shadow(0 0 10px rgba(255, 215, 0, 0.6));
  }
}

/* 前三名項目特殊樣式 */
.side-leaderboard-item.top-three {
  position: relative;
  overflow: hidden;
}

.side-leaderboard-item.top-three::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  animation: shine 3s infinite;
}

@keyframes shine {
  0% {
    left: -100%;
  }
  50%, 100% {
    left: 100%;
  }
}

.player-info {
  text-align: center;
  flex: 1;
  min-width: 0;
}

.player-name {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.95);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.player-loves {
  font-size: 12px;
  color: rgba(255, 107, 157, 0.9);
  margin-top: 2px;
}

.side-leaderboard-user {
  background: rgba(30, 30, 40, 0.9);
  padding: 15px 20px;
  border-top: 2px solid rgba(255, 255, 255, 0.1);
}

.user-rank-display {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.user-rank-label {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.7);
}

.user-rank-value {
  font-size: 18px;
  font-weight: bold;
  color: #FFD700;
  text-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
}

.user-name-display {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(255, 255, 255, 0.05);
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.user-name-text {
  flex: 1;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.9);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.user-name-edit-btn {
  background: transparent;
  border: none;
  font-size: 16px;
  cursor: pointer;
  padding: 4px;
  opacity: 0.6;
  transition: all 0.3s ease;
}

.user-name-edit-btn:hover {
  opacity: 1;
  transform: scale(1.2);
}

/* 展開/收起按鈕 */
/* 手機版：隱藏左側排行榜 */
body.mobile-mode .side-leaderboard {
  display: none;
}

@media (max-width: 600px) {
  .side-leaderboard {
    display: none;
  }
}

/* ===== 右上角可愛月亮鬧鐘 ===== */
.info-panel {
  position: fixed !important;
  top: 25px;
  right: 25px;
  background: radial-gradient(circle at 35% 35%, #FFF8DC 0%, #F0E68C 30%, #E6D98A 60%, #D4C48A 100%) !important; /* 月亮漸層 */
  backdrop-filter: blur(10px);
  padding: 0;
  border-radius: 50%; /* 圓形 */
  box-shadow: 0 15px 50px rgba(240, 230, 140, 0.6), 0 0 30px rgba(255, 248, 220, 0.8), inset -10px -10px 30px rgba(212, 196, 138, 0.4);
  z-index: 9999 !important;
  width: 220px;
  height: 220px;
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 6px solid #FFFACD; /* 淡黃色邊框 */
  animation: clockFloat 3s ease-in-out infinite, moonGlow 4s ease-in-out infinite;
  visibility: visible !important;
  opacity: 1 !important;
  overflow: visible; /* 允許裝飾超出邊界 */
  cursor: grab; /* 可拖動游標 */
  touch-action: none; /* 防止觸控滾動 */
  user-select: none; /* 防止選擇文字 */
  -webkit-user-select: none; /* Safari */
  -webkit-touch-callout: none; /* iOS Safari */
}

/* 月亮浮動動畫 */
@keyframes clockFloat {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  50% { transform: translateY(-8px) rotate(2deg); }
}

/* 月亮發光動畫 */
@keyframes moonGlow {
  0%, 100% {
    box-shadow: 0 15px 50px rgba(240, 230, 140, 0.6),
                0 0 30px rgba(255, 248, 220, 0.8),
                inset -10px -10px 30px rgba(212, 196, 138, 0.4);
  }
  50% {
    box-shadow: 0 15px 50px rgba(240, 230, 140, 0.8),
                0 0 40px rgba(255, 248, 220, 1),
                inset -10px -10px 30px rgba(212, 196, 138, 0.5);
  }
}

/* 頂部星星裝飾 */
.info-panel::before {
  content: '⭐';
  position: absolute;
  top: -25px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 28px;
  filter: drop-shadow(0 0 8px rgba(255, 248, 220, 0.8));
  animation: starTwinkle 2s ease-in-out infinite;
  z-index: 1;
}

/* 兩側小星星裝飾 */
.info-panel::after {
  content: '✨';
  position: absolute;
  top: -8px;
  left: -20px;
  font-size: 20px;
  filter: drop-shadow(0 0 5px rgba(255, 248, 220, 0.6));
  animation: starTwinkle 2.5s ease-in-out infinite;
  z-index: 1;
  text-shadow: 220px 0 0 currentColor; /* 右側星星 */
}

/* 星星閃爍動畫 */
@keyframes starTwinkle {
  0%, 100% {
    opacity: 0.7;
    transform: translateX(-50%) scale(1);
  }
  50% {
    opacity: 1;
    transform: translateX(-50%) scale(1.1);
  }
}

/* 星空粒子動畫 */
@keyframes starsAnimation {
  0%, 100% {
    opacity: 0.6;
    transform: scale(1);
  }
  25% {
    opacity: 1;
    transform: scale(1.1);
  }
  50% {
    opacity: 0.7;
    transform: scale(0.9);
  }
  75% {
    opacity: 0.9;
    transform: scale(1.05);
  }
}

/* 拖動時的樣式 */
.info-panel.dragging {
  cursor: grabbing;
  box-shadow: 0 20px 60px rgba(240, 230, 140, 0.8), 0 0 40px rgba(255, 248, 220, 1) !important;
}

/* ===== 月球坑洞裝飾 ===== */
.moon-crater {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(212, 196, 138, 0.3), rgba(160, 140, 100, 0.5));
  box-shadow: inset 2px 2px 4px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

.crater-1 {
  width: 25px;
  height: 25px;
  top: 40px;
  left: 35px;
}

.crater-2 {
  width: 18px;
  height: 18px;
  top: 80px;
  right: 45px;
}

.crater-3 {
  width: 15px;
  height: 15px;
  bottom: 50px;
  left: 50px;
}

.crater-4 {
  width: 20px;
  height: 20px;
  top: 120px;
  left: 70px;
}

/* ===== 時鐘顯示 ===== */
.clock-display {
  font-size: 28px;
  font-weight: 700;
  color: #6B5D4F; /* 溫暖的深褐色 */
  text-align: center;
  margin-bottom: 12px;
  font-family: 'Courier New', monospace;
  letter-spacing: 2px;
  text-shadow: 1px 1px 3px rgba(255, 248, 220, 0.8), 0 0 5px rgba(240, 230, 140, 0.3);
  position: relative;
  z-index: 2;
}

/* ===== 計數器顯示 ===== */
.counter-display {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0;
  position: relative;
  z-index: 2;
}

.counter-label {
  font-size: 16px;
  color: #8B7355; /* 溫暖的咖啡色 */
  margin-bottom: 5px;
  font-weight: 600;
  text-shadow: 1px 1px 2px rgba(255, 248, 220, 0.6);
}

.counter-value {
  font-size: 38px;
  font-weight: 700;
  color: #FFD700; /* 更明亮的金黃色 */
  font-family: 'Courier New', monospace;
  text-shadow:
    0 0 10px rgba(255, 215, 0, 0.8),
    0 0 20px rgba(255, 215, 0, 0.6),
    0 0 30px rgba(255, 215, 0, 0.4),
    2px 2px 4px rgba(0, 0, 0, 0.5);
}

/* ===== 歡迎文字區域 ===== */
.welcome-text {
  margin-top: 0;
  margin-bottom: 28px; /* 略微增加與按鈕的間距 */
  text-align: center;
  background: transparent; /* 隱形背景 */
  padding: 0;
}

.welcome-line1 {
  font-size: 18px; /* 比標題小很多 */
  font-weight: 600;
  background: linear-gradient(180deg, #000000, #1a1a1a); /* 漸層黑 */
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 10px; /* 增加行距 */
  letter-spacing: 1px;
  position: relative;
  z-index: 1;
}

.welcome-line2 {
  font-size: 16px; /* 更小的字體 */
  font-weight: 700; /* 加粗讓文字更清晰 */
  color: #000000; /* 改用純黑色，不用漸層 */
  margin-bottom: 0;
  letter-spacing: 0.5px;
  position: relative;
  z-index: 1;
  line-height: 1.6;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); /* 添加陰影增加清晰度 */
}

/* ===== 星星發射按鈕 ===== */
.hint-text {
  position: fixed;
  bottom: 40px;
  left: 50%;
  transform: translate3d(-50%, 0, 0); /* 使用 translate3d 觸發硬體加速 */
  background: rgba(205, 170, 125, 0.9); /* 土色 #CDAA7D */
  backdrop-filter: blur(10px);
  padding: 20px 40px; /* 變大 */
  border-radius: 30px;
  font-size: 22px; /* 從 16px 增大到 22px */
  color: #2c2416; /* 深棕色文字，清楚顯示 */
  font-weight: 700; /* 加粗 */
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
  z-index: 1000;
  animation: fadeIn 1s ease-out;
  border: 2px solid rgba(139, 115, 85, 0.5);
  cursor: pointer; /* 顯示可點擊 */
  transition: all 0.3s ease;
  user-select: none;
  /* 文字渲染優化 */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  will-change: transform;
  backface-visibility: hidden;
  transform-style: preserve-3d;
}

.hint-text:hover {
  transform: translate3d(-50%, 0, 0) scale(1.05);
  background: rgba(205, 170, 125, 1);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4);
  border-color: rgba(139, 115, 85, 0.8);
}

.hint-text:active {
  transform: translate3d(-50%, 0, 0) scale(0.98);
}

/* 戰鬥模式時，發射器固定不動 */
body.boss-battle .hint-text {
  animation: none !important;
}

body.boss-battle .hint-text:hover {
  transform: translate3d(-50%, 0, 0) !important;
}

body.boss-battle .hint-text:active {
  transform: translate3d(-50%, 0, 0) !important;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* ===== 計數器動畫效果 ===== */
.counter-value.pulse {
  animation: counterPulse 0.3s ease;
}

@keyframes counterPulse {
  0% {
    transform: scale(1) rotate(0deg);
  }
  25% {
    transform: scale(1.15) rotate(-3deg);
    color: #FF6347;
  }
  50% {
    transform: scale(1.3) rotate(3deg);
    color: #FF4500;
    text-shadow:
      0 0 15px rgba(255, 69, 0, 1),
      0 0 30px rgba(255, 69, 0, 0.8),
      0 0 45px rgba(255, 69, 0, 0.6);
  }
  75% {
    transform: scale(1.15) rotate(-3deg);
    color: #FF6347;
  }
  100% {
    transform: scale(1) rotate(0deg);
  }
}

/* ===== 手機版模式樣式 ===== */
body.mobile-mode .container {
  padding: 20px 10px 100px 10px; /* 頂部減少，底部增加空間 */
  align-items: center;
  min-height: auto;
}

body.mobile-mode .card {
  width: 100%;
  max-width: 100%;
  padding: 30px 20px;
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(64, 224, 208, 0.06), rgba(0, 191, 255, 0.06)); /* 手機版更透明 */
}

body.mobile-mode .title {
  font-size: 36px;
  letter-spacing: 4px;
  margin-bottom: 15px;
}

body.mobile-mode .emoji-decoration {
  font-size: 45px;
  margin-bottom: 12px;
}

body.mobile-mode .welcome-line1 {
  font-size: 20px;
}

body.mobile-mode .welcome-line2 {
  font-size: 18px;
}

body.mobile-mode .btn {
  padding: 20px 60px;
  font-size: 20px;
  border-radius: 60px;
}

/* 手機版：月亮鬧鐘移到左上角（縮小並可拖動） */
/* 手機版 Boss 戰模式：隱藏背景文字強調戰鬥 */
body.mobile-mode.boss-battle .container {
  display: none !important;
}

body.mobile-mode.boss-battle .hint-text {
  display: none !important;
}

body.mobile-mode.boss-battle .time-period-display {
  display: none !important;
}

body.mobile-mode .info-panel {
  top: 15px;
  left: 15px;
  right: auto !important;
  width: 100px !important;
  height: 100px !important;
  cursor: grab;
  touch-action: none; /* 防止觸控滾動 */
  user-select: none;
  -webkit-user-select: none; /* Safari */
  -webkit-touch-callout: none; /* iOS Safari */
}

body.mobile-mode .info-panel.dragging {
  cursor: grabbing;
  box-shadow: 0 20px 60px rgba(240, 230, 140, 0.8), 0 0 40px rgba(255, 248, 220, 1) !important;
}

body.mobile-mode .info-panel::before {
  top: -14px;
  font-size: 16px;
}

body.mobile-mode .info-panel::after {
  top: -5px;
  left: -10px;
  font-size: 12px;
  text-shadow: 100px 0 0 currentColor;
}

body.mobile-mode .clock-display {
  font-size: 14px;
  margin-bottom: 4px;
}

body.mobile-mode .counter-label {
  font-size: 9px;
}

body.mobile-mode .counter-value {
  font-size: 18px;
}

body.mobile-mode .moon-crater {
  display: none; /* 簡化效果：隱藏月球坑洞 */
}

/* 手機版：星星發射按鈕（移到右下角） */
body.mobile-mode .hint-text {
  bottom: 15px;
  right: 15px;
  left: auto;
  transform: none;
  padding: 12px 24px;
  font-size: 16px;
  border-radius: 25px;
}

/* 手機版：簡化動畫效果 */
body.mobile-mode .card::before {
  animation: none; /* 移除科技光效動畫 */
}

body.mobile-mode .info-panel {
  animation: none !important; /* 移除浮動和發光動畫 */
}

/* ===== 音樂控制按鈕 ===== */
.music-btn {
  position: fixed;
  bottom: 40px;
  right: 40px;
  background: linear-gradient(135deg, #9b59b6, #8e44ad);
  backdrop-filter: blur(10px);
  padding: 16px 32px;
  border-radius: 30px;
  font-size: 18px;
  color: white;
  font-weight: 700;
  box-shadow: 0 6px 20px rgba(155, 89, 182, 0.4);
  z-index: 1000;
  border: 2px solid rgba(142, 68, 173, 0.5);
  cursor: pointer;
  transition: all 0.3s ease;
  user-select: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.music-btn:hover {
  transform: scale(1.05);
  background: linear-gradient(135deg, #8e44ad, #7d3c98);
  box-shadow: 0 8px 25px rgba(155, 89, 182, 0.6);
  border-color: rgba(142, 68, 173, 0.8);
}

.music-btn:active {
  transform: scale(0.98);
}

/* 手機版：音樂按鈕 */
body.mobile-mode .music-btn {
  bottom: 15px;
  right: auto;
  left: 15px;
  padding: 12px 24px;
  font-size: 16px;
  border-radius: 25px;
}

/* ===== 音量控制器 ===== */
.volume-control-panel {
  position: fixed;
  bottom: 15px; /* 最右下角 */
  right: 15px; /* 最右下角 */
  background: rgba(40, 40, 45, 0.7); /* 重黑色低調背景 */
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  padding: 8px 15px; /* 縮小 padding */
  border-radius: 50px;
  display: flex;
  align-items: center;
  gap: 8px; /* 縮小間距 */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
  z-index: 1000;
  border: 2px solid rgba(255, 255, 255, 0.1); /* 極淡的邊框 */
  transition: all 0.3s ease;
}

.volume-control-panel:hover {
  transform: translateY(-2px);
  background: rgba(50, 50, 55, 0.75); /* hover 時稍微亮一點 */
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.5);
}

.volume-label {
  font-size: 16px; /* 縮小圖標 */
  cursor: default;
  user-select: none;
}

.volume-slider {
  width: 80px; /* 縮小滑桿長度 */
  height: 5px; /* 縮小高度 */
  border-radius: 5px;
  outline: none;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.5));
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}

.volume-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: white;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  transition: all 0.2s ease;
}

.volume-slider::-webkit-slider-thumb:hover {
  transform: scale(1.2);
  box-shadow: 0 3px 12px rgba(255, 255, 255, 0.5);
}

.volume-slider::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: white;
  cursor: pointer;
  border: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  transition: all 0.2s ease;
}

.volume-slider::-moz-range-thumb:hover {
  transform: scale(1.2);
  box-shadow: 0 3px 12px rgba(255, 255, 255, 0.5);
}

.volume-percentage {
  font-size: 14px;
  font-weight: 700;
  color: white;
  min-width: 40px;
  text-align: right;
  user-select: none;
}

/* 手機版：音量控制器 */
body.mobile-mode .volume-control-panel {
  bottom: 15px;
  right: 15px;
  padding: 10px 16px;
  border-radius: 40px;
  gap: 8px;
}

body.mobile-mode .volume-label {
  font-size: 18px;
}

body.mobile-mode .volume-slider {
  width: 80px;
  height: 5px;
}

body.mobile-mode .volume-slider::-webkit-slider-thumb {
  width: 16px;
  height: 16px;
}

body.mobile-mode .volume-slider::-moz-range-thumb {
  width: 16px;
  height: 16px;
}

body.mobile-mode .volume-percentage {
  font-size: 12px;
  min-width: 35px;
}

/* ===== 返回魔王城按鈕 ===== */
.return-btn {
  position: fixed;
  bottom: 75px; /* 在音量調節器上方 */
  right: 15px;
  background: linear-gradient(135deg, #e74c3c, #c0392b);
  color: white;
  border: none;
  padding: 14px 28px;
  font-size: 16px;
  font-weight: 700;
  border-radius: 50px;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(231, 76, 60, 0.4);
  z-index: 10001;
  transition: all 0.3s ease;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 2px solid rgba(255, 255, 255, 0.2);
}

.return-btn:hover {
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 12px 30px rgba(231, 76, 60, 0.6);
  background: linear-gradient(135deg, #ff6b6b, #e74c3c);
}

.return-btn:active {
  transform: translateY(-1px) scale(1.02);
}

body.mobile-mode .return-btn {
  bottom: 70px;
  right: 15px;
  padding: 12px 24px;
  font-size: 14px;
}

/* ===== 社交媒體連結面板 ===== */
.social-links-panel {
  position: fixed;
  right: 40px; /* 改為右側 */
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 15px;
  z-index: 1000;
}

.social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(155, 89, 182, 0.9), rgba(142, 68, 173, 0.9));
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: white;
  text-decoration: none;
  box-shadow: 0 4px 15px rgba(155, 89, 182, 0.3);
  transition: all 0.3s ease;
  border: 2px solid rgba(255, 255, 255, 0.2);
}

.social-link:hover:not(:disabled) {
  transform: translateX(-5px) scale(1.1); /* 向左移動 */
  box-shadow: 0 6px 20px rgba(155, 89, 182, 0.5);
}

.social-link:disabled {
  background: linear-gradient(135deg, rgba(150, 150, 150, 0.5), rgba(120, 120, 120, 0.5));
  cursor: not-allowed;
  opacity: 0.6;
}

.social-link svg {
  width: 24px;
  height: 24px;
}

.github-link:hover {
  background: linear-gradient(135deg, #333, #24292e);
}

.instagram-link:hover {
  background: linear-gradient(135deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
}

.discord-link:hover {
  background: linear-gradient(135deg, #5865F2, #4752C4);
}

/* 手機版：社交媒體連結 */
body.mobile-mode .social-links-panel {
  right: 15px; /* 手機版也在右側 */
  left: auto;
  top: auto;
  bottom: 120px;
  transform: none;
  flex-direction: row;
  gap: 10px;
}

body.mobile-mode .social-link {
  width: 45px;
  height: 45px;
}

body.mobile-mode .social-link svg {
  width: 22px;
  height: 22px;
}

body.mobile-mode .social-link:hover {
  transform: translateY(-5px) scale(1.1);
}

/* ===== 意見回饋系統 ===== */
.feedback-btn {
  position: fixed;
  top: 280px;
  right: 25px;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: linear-gradient(135deg, #667eea, #764ba2);
  border: 3px solid rgba(255, 255, 255, 0.3);
  font-size: 28px;
  color: white;
  cursor: pointer;
  z-index: 10000;
  box-shadow: 0 6px 20px rgba(118, 75, 162, 0.4);
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.feedback-btn:hover {
  transform: scale(1.1);
  box-shadow: 0 8px 25px rgba(118, 75, 162, 0.6);
}

.feedback-panel {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  animation: fadeIn 0.3s ease forwards;
}

.feedback-content {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(240, 235, 255, 0.95));
  border-radius: 30px;
  padding: 40px;
  max-width: 600px;
  width: 90%;
  max-height: 85vh;
  overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  border: 3px solid rgba(255, 255, 255, 0.5);
}

.feedback-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
  border-bottom: 3px solid rgba(118, 75, 162, 0.3);
  padding-bottom: 15px;
}

.feedback-header h2 {
  font-size: 28px;
  background: linear-gradient(135deg, #667eea, #764ba2);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin: 0;
  font-weight: 800;
}

.feedback-close {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ff6b6b, #ee5a6f);
  border: none;
  color: white;
  font-size: 24px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.feedback-close:hover {
  transform: rotate(90deg) scale(1.1);
}

.feedback-form {
  margin-bottom: 30px;
}

.feedback-category-section,
.feedback-input-section {
  margin-bottom: 20px;
}

.feedback-label {
  display: block;
  font-size: 16px;
  font-weight: 700;
  color: #333;
  margin-bottom: 8px;
}

.feedback-category {
  width: 100%;
  padding: 12px 15px;
  border: 2px solid rgba(118, 75, 162, 0.3);
  border-radius: 15px;
  font-size: 16px;
  outline: none;
  background: white;
  cursor: pointer;
  transition: all 0.3s ease;
}

.feedback-category:focus {
  border-color: #764ba2;
  box-shadow: 0 0 0 3px rgba(118, 75, 162, 0.1);
}

.feedback-textarea {
  width: 100%;
  min-height: 150px;
  padding: 15px;
  border: 2px solid rgba(118, 75, 162, 0.3);
  border-radius: 15px;
  font-size: 15px;
  font-family: inherit;
  outline: none;
  resize: vertical;
  transition: all 0.3s ease;
  box-sizing: border-box;
}

.feedback-textarea:focus {
  border-color: #764ba2;
  box-shadow: 0 0 0 3px rgba(118, 75, 162, 0.1);
}

.feedback-char-count {
  text-align: right;
  font-size: 14px;
  color: #666;
  margin-top: 5px;
}

.feedback-submit-btn {
  width: 100%;
  padding: 15px;
  background: linear-gradient(135deg, #667eea, #764ba2);
  border: none;
  border-radius: 15px;
  color: white;
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s ease;
}

.feedback-submit-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(118, 75, 162, 0.4);
}

.feedback-submit-btn:active {
  transform: translateY(0);
}

.feedback-history-section {
  border-top: 2px solid rgba(118, 75, 162, 0.2);
  padding-top: 25px;
}

.feedback-history-title {
  font-size: 20px;
  font-weight: 800;
  color: #333;
  margin: 0 0 15px 0;
}

.feedback-history {
  max-height: 300px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.feedback-item {
  background: rgba(255, 255, 255, 0.8);
  border: 2px solid rgba(118, 75, 162, 0.2);
  border-radius: 15px;
  padding: 15px;
  transition: all 0.3s ease;
}

.feedback-item:hover {
  border-color: rgba(118, 75, 162, 0.4);
  box-shadow: 0 3px 10px rgba(118, 75, 162, 0.1);
}

.feedback-item-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.feedback-item-category {
  font-size: 14px;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(102, 126, 234, 0.2), rgba(118, 75, 162, 0.2));
  color: #764ba2;
}

.feedback-item-date {
  font-size: 12px;
  color: #999;
}

.feedback-item-message {
  font-size: 14px;
  color: #555;
  line-height: 1.5;
  word-wrap: break-word;
}

.feedback-empty {
  text-align: center;
  padding: 30px;
  color: #999;
  font-size: 15px;
}

body.mobile-mode .feedback-btn {
  top: 210px;
  right: 15px;
  width: 50px;
  height: 50px;
  font-size: 24px;
}

body.mobile-mode .feedback-content {
  padding: 25px;
  max-width: 95%;
}

body.mobile-mode .feedback-header h2 {
  font-size: 22px;
}

body.mobile-mode .feedback-textarea {
  min-height: 120px;
  font-size: 14px;
}

body.mobile-mode .feedback-submit-btn {
  font-size: 16px;
}

/* ===== 許願池系統 ===== */
.wish-btn {
  position: fixed;
  bottom: 180px;
  right: 25px;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: linear-gradient(135deg, #f093fb, #f5576c, #ffd700);
  border: 3px solid rgba(255, 255, 255, 0.3);
  font-size: 28px;
  color: white;
  cursor: pointer;
  z-index: 10000;
  box-shadow: 0 6px 20px rgba(255, 215, 0, 0.4);
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: wishGlow 2s infinite;
}

@keyframes wishGlow {
  0%, 100% {
    box-shadow: 0 6px 20px rgba(255, 215, 0, 0.4);
  }
  50% {
    box-shadow: 0 6px 30px rgba(255, 215, 0, 0.8), 0 0 20px rgba(255, 215, 0, 0.5);
  }
}

.wish-btn:hover {
  transform: scale(1.1) rotate(10deg);
  box-shadow: 0 8px 25px rgba(255, 215, 0, 0.6);
}

.wish-panel {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(10px);
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  animation: fadeIn 0.3s ease forwards;
}

.wish-content {
  background: linear-gradient(135deg, rgba(255, 240, 245, 0.95), rgba(240, 230, 255, 0.95));
  border-radius: 30px;
  padding: 40px;
  max-width: 500px;
  width: 90%;
  max-height: 80vh;
  overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  border: 3px solid rgba(255, 215, 0, 0.3);
}

.wish-header, .wish-close {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  border-bottom: 3px solid rgba(240, 147, 251, 0.3);
  padding-bottom: 15px;
}

.wish-header h2 {
  font-size: 28px;
  background: linear-gradient(135deg, #f093fb, #ffd700);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin: 0;
  font-weight: 800;
}

.wish-close {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ff6b6b, #ee5a6f);
  border: none;
  color: white;
  font-size: 24px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.wish-close:hover {
  transform: rotate(90deg) scale(1.1);
}

.wish-description {
  text-align: center;
  color: #666;
  margin-bottom: 20px;
  font-size: 15px;
}

.wish-textarea {
  width: 100%;
  min-height: 120px;
  padding: 15px;
  border: 2px solid rgba(240, 147, 251, 0.3);
  border-radius: 15px;
  font-size: 15px;
  font-family: inherit;
  outline: none;
  resize: vertical;
  transition: all 0.3s ease;
  box-sizing: border-box;
  margin-bottom: 8px;
}

.wish-textarea:focus {
  border-color: #f093fb;
  box-shadow: 0 0 0 3px rgba(240, 147, 251, 0.1);
}

.wish-char-count {
  text-align: right;
  font-size: 14px;
  color: #666;
  margin-bottom: 15px;
}

.wish-submit-btn {
  width: 100%;
  padding: 15px;
  background: linear-gradient(135deg, #f093fb, #ffd700);
  border: none;
  border-radius: 15px;
  color: white;
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s ease;
}

.wish-submit-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(240, 147, 251, 0.4);
}

.wish-list-section {
  margin-top: 25px;
  border-top: 2px solid rgba(240, 147, 251, 0.2);
  padding-top: 20px;
}

.wish-list-title {
  font-size: 18px;
  font-weight: 800;
  color: #333;
  margin: 0 0 15px 0;
}

.wish-list {
  max-height: 250px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.wish-item {
  background: rgba(255, 255, 255, 0.8);
  border: 2px solid rgba(240, 147, 251, 0.2);
  border-radius: 15px;
  padding: 12px;
  transition: all 0.3s ease;
}

.wish-item:hover {
  border-color: rgba(240, 147, 251, 0.4);
  box-shadow: 0 3px 10px rgba(240, 147, 251, 0.1);
}

.wish-item-date {
  font-size: 12px;
  color: #999;
  margin-bottom: 5px;
}

.wish-item-text {
  font-size: 14px;
  color: #555;
  line-height: 1.5;
}

/* ===== 鬧鐘系統 ===== */
.alarm-btn {
  position: fixed;
  top: 360px;
  right: 25px;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: linear-gradient(135deg, #FFB6C1, #FFC0CB); /* 淺粉色 */
  border: 3px solid rgba(255, 255, 255, 0.5);
  font-size: 28px;
  color: white;
  cursor: pointer;
  z-index: 10000;
  box-shadow: 0 6px 20px rgba(241, 39, 17, 0.4);
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.alarm-btn:hover {
  transform: scale(1.1);
  box-shadow: 0 8px 25px rgba(241, 39, 17, 0.6);
}

.alarm-panel {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(10px);
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  animation: fadeIn 0.3s ease forwards;
}

.alarm-content {
  background: linear-gradient(135deg, rgba(255, 245, 235, 0.95), rgba(255, 235, 220, 0.95));
  border-radius: 30px;
  padding: 40px;
  max-width: 500px;
  width: 90%;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  border: 3px solid rgba(245, 175, 25, 0.3);
}

.alarm-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  border-bottom: 3px solid rgba(245, 175, 25, 0.3);
  padding-bottom: 15px;
}

.alarm-header h2 {
  font-size: 28px;
  background: linear-gradient(135deg, #f5af19, #f12711);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin: 0;
  font-weight: 800;
}

.alarm-close {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ff6b6b, #ee5a6f);
  border: none;
  color: white;
  font-size: 24px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.alarm-close:hover {
  transform: rotate(90deg) scale(1.1);
}

.alarm-description {
  text-align: center;
  color: #666;
  margin-bottom: 25px;
  font-size: 15px;
}

.alarm-input-group {
  margin-bottom: 20px;
}

.alarm-label {
  display: block;
  font-size: 16px;
  font-weight: 700;
  color: #333;
  margin-bottom: 8px;
}

.alarm-select, .alarm-task-input {
  width: 100%;
  padding: 12px 15px;
  border: 2px solid rgba(245, 175, 25, 0.3);
  border-radius: 15px;
  font-size: 16px;
  outline: none;
  background: white;
  transition: all 0.3s ease;
  box-sizing: border-box;
}

.alarm-select:focus, .alarm-task-input:focus {
  border-color: #f5af19;
  box-shadow: 0 0 0 3px rgba(245, 175, 25, 0.1);
}

.alarm-start-btn, .alarm-stop-btn {
  width: 100%;
  padding: 15px;
  border: none;
  border-radius: 15px;
  color: white;
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s ease;
}

.alarm-start-btn {
  background: linear-gradient(135deg, #f5af19, #f12711);
}

.alarm-start-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(245, 175, 25, 0.4);
}

.alarm-stop-btn {
  background: linear-gradient(135deg, #ff6b6b, #c92a2a);
  margin-top: 10px;
}

.alarm-stop-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(255, 107, 107, 0.4);
}

.alarm-display {
  margin-top: 30px;
  text-align: center;
}

.alarm-timer {
  font-size: 64px;
  font-weight: 800;
  background: linear-gradient(135deg, #f5af19, #f12711);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 15px;
  font-family: monospace;
}

.alarm-task-display {
  font-size: 20px;
  color: #555;
  margin-bottom: 20px;
  font-weight: 600;
}

.alarm-progress-bar {
  width: 100%;
  height: 20px;
  background: rgba(245, 175, 25, 0.2);
  border-radius: 10px;
  overflow: hidden;
}

.alarm-progress-fill {
  height: 100%;
  background: linear-gradient(135deg, #f5af19, #f12711);
  border-radius: 10px;
  transition: width 1s linear;
  width: 0%;
}

/* 手機版：許願池和鬧鐘 */
body.mobile-mode .wish-btn {
  display: none !important; /* 隱藏 */
  bottom: 135px;
  right: 15px;
  width: 50px;
  height: 50px;
  font-size: 24px;
}

body.mobile-mode .alarm-btn {
  top: 270px;
  right: 15px;
  width: 50px;
  height: 50px;
  font-size: 24px;
}

body.mobile-mode .wish-content,
body.mobile-mode .alarm-content {
  padding: 25px;
  max-width: 95%;
}

body.mobile-mode .alarm-timer {
  font-size: 48px;
}

/* ===== 戰鬥確認對話框 ===== */
.battle-dialog {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(8px);
  z-index: 10000;
  display: flex;
  align-items: flex-end; /* 戰鬥對話框在底部 */
  justify-content: center;
  padding-bottom: 120px; /* 在發射器上方留出空間 */
  opacity: 0;
  transition: opacity 0.3s ease;
}

/* 月球相關對話框置中往下 */
.battle-dialog.moon-confirm-dialog,
.battle-dialog.moon-portal-dialog,
.battle-dialog.name-edit-dialog {
  align-items: center;
  padding-top: 10vh; /* 往下偏移一點點 */
  padding-bottom: 0;
}

/* 名稱編輯對話框專用樣式 */
.name-edit-form {
  margin: 20px 0;
}

.name-edit-input {
  width: 100%;
  padding: 15px 20px;
  font-size: 16px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.1);
  color: white;
  outline: none;
  transition: all 0.3s ease;
}

.name-edit-input:focus {
  border-color: rgba(102, 126, 234, 0.8);
  background: rgba(255, 255, 255, 0.15);
  box-shadow: 0 0 20px rgba(102, 126, 234, 0.3);
}

.name-edit-input::placeholder {
  color: rgba(255, 255, 255, 0.5);
}

.name-edit-hint {
  margin-top: 10px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.6);
  text-align: center;
}

.battle-dialog.show {
  opacity: 1;
}

.battle-dialog-content {
  background: linear-gradient(135deg, rgba(255, 107, 157, 0.95), rgba(196, 77, 255, 0.95));
  padding: 40px 50px;
  border-radius: 30px;
  box-shadow: 0 20px 60px rgba(255, 107, 157, 0.5), 0 0 40px rgba(196, 77, 255, 0.3);
  text-align: center;
  transform: scale(0.8);
  transition: transform 0.3s ease;
  border: 3px solid rgba(255, 255, 255, 0.3);
  max-width: 90%;
}

.battle-dialog.show .battle-dialog-content {
  transform: scale(1);
}

/* 藍色未知風格彈窗 */
.battle-dialog.mystery-theme {
  background: rgba(0, 10, 30, 0.85);
  backdrop-filter: blur(12px);
}

.battle-dialog.mystery-theme .battle-dialog-content {
  background: linear-gradient(135deg, rgba(13, 71, 161, 0.95), rgba(21, 101, 192, 0.95), rgba(25, 118, 210, 0.9));
  box-shadow:
    0 20px 60px rgba(33, 150, 243, 0.4),
    0 0 40px rgba(21, 101, 192, 0.3),
    inset 0 0 60px rgba(100, 181, 246, 0.1);
  border: 3px solid rgba(100, 181, 246, 0.4);
  animation: mysteryGlow 3s ease-in-out infinite;
}

@keyframes mysteryGlow {
  0%, 100% {
    box-shadow:
      0 20px 60px rgba(33, 150, 243, 0.4),
      0 0 40px rgba(21, 101, 192, 0.3),
      inset 0 0 60px rgba(100, 181, 246, 0.1);
  }
  50% {
    box-shadow:
      0 25px 70px rgba(33, 150, 243, 0.6),
      0 0 50px rgba(21, 101, 192, 0.5),
      inset 0 0 80px rgba(100, 181, 246, 0.2);
  }
}

.battle-dialog.mystery-theme .battle-title {
  color: #e3f2fd;
  text-shadow:
    0 0 10px rgba(100, 181, 246, 0.8),
    0 0 20px rgba(33, 150, 243, 0.6),
    0 4px 8px rgba(0, 0, 0, 0.5);
  animation: mysteryTitlePulse 2s ease-in-out infinite;
}

@keyframes mysteryTitlePulse {
  0%, 100% {
    text-shadow:
      0 0 10px rgba(100, 181, 246, 0.8),
      0 0 20px rgba(33, 150, 243, 0.6),
      0 4px 8px rgba(0, 0, 0, 0.5);
  }
  50% {
    text-shadow:
      0 0 15px rgba(100, 181, 246, 1),
      0 0 30px rgba(33, 150, 243, 0.8),
      0 4px 8px rgba(0, 0, 0, 0.5);
  }
}

.battle-dialog.mystery-theme .dialog-message,
.battle-dialog.mystery-theme .victory-message {
  color: #bbdefb;
  text-shadow:
    0 2px 4px rgba(0, 0, 0, 0.5),
    0 0 10px rgba(100, 181, 246, 0.3);
}

.battle-icon {
  font-size: 60px;
  margin-bottom: 20px;
  animation: battleIconPulse 1s ease-in-out infinite;
  filter: drop-shadow(0 0 15px rgba(255, 255, 255, 0.8));
}

@keyframes battleIconPulse {
  0%, 100% {
    transform: scale(1) rotate(0deg);
  }
  50% {
    transform: scale(1.15) rotate(5deg);
  }
}

.battle-title {
  font-size: 32px;
  font-weight: 700;
  color: white;
  margin-bottom: 25px;
  text-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
  letter-spacing: 2px;
}

/* 月球確認對話框樣式 */
.dialog-icon {
  font-size: 70px;
  margin-bottom: 20px;
  animation: battleIconPulse 1s ease-in-out infinite;
  filter: drop-shadow(0 0 15px rgba(255, 255, 255, 0.8));
}

.dialog-message {
  font-size: 20px;
  font-weight: 600;
  color: white;
  margin: 15px 0;
  line-height: 1.6;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  letter-spacing: 1px;
}

.battle-icons {
  display: flex;
  justify-content: center;
  gap: 15px;
  margin-bottom: 30px;
  flex-wrap: wrap;
}

.icon-item {
  font-size: 32px;
  animation: iconFloat 2s ease-in-out infinite;
  filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.6));
}

.icon-item:nth-child(1) { animation-delay: 0s; }
.icon-item:nth-child(2) { animation-delay: 0.2s; }
.icon-item:nth-child(3) { animation-delay: 0.4s; }
.icon-item:nth-child(4) { animation-delay: 0.6s; }
.icon-item:nth-child(5) { animation-delay: 0.8s; }

@keyframes iconFloat {
  0%, 100% {
    transform: translateY(0px) rotate(0deg);
  }
  50% {
    transform: translateY(-10px) rotate(10deg);
  }
}

.battle-buttons {
  display: flex;
  gap: 20px;
  justify-content: center;
  flex-wrap: wrap;
}

.battle-btn {
  padding: 16px 40px;
  font-size: 20px;
  font-weight: 700;
  border-radius: 50px;
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
  display: flex;
  align-items: center;
  gap: 10px;
  user-select: none;
}

.battle-yes {
  background: linear-gradient(135deg, #f39c12, #e74c3c);
  color: white;
}

.battle-yes:hover {
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 12px 30px rgba(231, 76, 60, 0.5);
}

.battle-no {
  background: linear-gradient(135deg, #95a5a6, #7f8c8d);
  color: white;
}

.battle-no:hover {
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 12px 30px rgba(127, 140, 141, 0.5);
}

/* 月球彈窗按鈕樣式 */
.battle-cancel {
  background: linear-gradient(135deg, #0d0d0d, #1a1a1a);
  color: white;
  position: relative;
  overflow: hidden;
  border: 2px solid rgba(0, 0, 0, 0.5) !important; /* 深色邊框 */
}

.battle-cancel::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: transparent;
  box-shadow:
    10px 10px 2px 1px rgba(255, 255, 255, 0.8),
    25px 15px 1px 0px rgba(255, 255, 255, 0.6),
    45px 30px 2px 1px rgba(255, 255, 255, 0.7),
    60px 8px 1px 0px rgba(255, 255, 255, 0.5),
    75px 25px 2px 1px rgba(255, 255, 255, 0.9),
    90px 35px 1px 0px rgba(255, 255, 255, 0.6),
    15px 45px 1px 1px rgba(255, 255, 255, 0.7),
    35px 50px 2px 0px rgba(255, 255, 255, 0.5),
    55px 55px 1px 1px rgba(255, 255, 255, 0.8),
    70px 48px 1px 0px rgba(255, 255, 255, 0.6),
    85px 60px 2px 1px rgba(255, 255, 255, 0.7),
    20px 65px 1px 0px rgba(255, 255, 255, 0.5),
    40px 72px 1px 1px rgba(255, 255, 255, 0.6),
    65px 78px 2px 0px rgba(255, 255, 255, 0.8),
    80px 85px 1px 1px rgba(255, 255, 255, 0.7);
  animation: starsAnimation 3s ease-in-out infinite;
  pointer-events: none;
}

.battle-cancel:hover {
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 12px 30px rgba(13, 13, 13, 0.8);
}

.battle-confirm {
  background: linear-gradient(135deg, #1976d2, #2196f3); /* 更鮮豔的藍色 */
  color: white;
  position: relative;
  overflow: hidden;
  border: 2px solid rgba(0, 0, 0, 0.5) !important; /* 深色邊框 */
}

.battle-confirm::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: transparent;
  box-shadow:
    12px 8px 2px 1px rgba(255, 255, 255, 0.8),
    28px 18px 1px 0px rgba(255, 255, 255, 0.6),
    42px 28px 2px 1px rgba(255, 255, 255, 0.7),
    58px 12px 1px 0px rgba(255, 255, 255, 0.5),
    72px 22px 2px 1px rgba(255, 255, 255, 0.9),
    88px 38px 1px 0px rgba(255, 255, 255, 0.6),
    18px 42px 1px 1px rgba(255, 255, 255, 0.7),
    32px 52px 2px 0px rgba(255, 255, 255, 0.5),
    52px 58px 1px 1px rgba(255, 255, 255, 0.8),
    68px 45px 1px 0px rgba(255, 255, 255, 0.6),
    82px 62px 2px 1px rgba(255, 255, 255, 0.7),
    22px 68px 1px 0px rgba(255, 255, 255, 0.5),
    38px 75px 1px 1px rgba(255, 255, 255, 0.6),
    62px 80px 2px 0px rgba(255, 255, 255, 0.8),
    78px 88px 1px 1px rgba(255, 255, 255, 0.7);
  animation: starsAnimation 3s ease-in-out infinite;
  pointer-events: none;
}

.battle-confirm:hover {
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 12px 30px rgba(13, 71, 161, 0.6);
}

.battle-btn:active {
  transform: translateY(-1px) scale(1);
}

.btn-icon {
  font-size: 24px;
  animation: btnIconBounce 1s ease-in-out infinite;
}

@keyframes btnIconBounce {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.2);
  }
}

/* 手機版：戰鬥對話框 */
body.mobile-mode .battle-dialog {
  padding-bottom: 90px; /* 手機版發射器較小，調整間距 */
}

body.mobile-mode .battle-dialog-content {
  padding: 30px 25px;
  max-width: 90%;
}

body.mobile-mode .battle-icon {
  font-size: 50px;
  margin-bottom: 15px;
}

@media (max-width: 600px) {
  .battle-dialog {
    padding-bottom: 90px; /* 小螢幕調整間距 */
  }

  .battle-dialog-content {
    padding: 30px 25px;
    max-width: 90%;
  }

  .battle-icon {
    font-size: 50px;
    margin-bottom: 15px;
  }

  .battle-title {
    font-size: 24px;
    margin-bottom: 20px;
  }

  /* ⚠️ TODO: 待處理 - 手機版月球對話框樣式（先完成全部網頁版再處理手機版）
  .dialog-icon {
    font-size: 55px;
    margin-bottom: 15px;
  }

  .dialog-message {
    font-size: 18px;
    margin: 12px 0;
    line-height: 1.5;
  }
  */

  .battle-icons {
    gap: 10px;
    margin-bottom: 25px;
  }

  .icon-item {
    font-size: 26px;
  }

  .battle-buttons {
    gap: 15px;
    flex-direction: column;
  }

  .battle-btn {
    padding: 14px 32px;
    font-size: 18px;
    width: 100%;
    justify-content: center;
  }

  .btn-icon {
    font-size: 20px;
  }
}

/* ===== Boss 血條 UI ===== */
.boss-health-container {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  background: rgba(0, 0, 0, 0.8);
  padding: 20px 40px;
  border-radius: 20px;
  box-shadow: 0 10px 40px rgba(139, 0, 0, 0.6);
  border: 3px solid rgba(255, 0, 0, 0.5);
  min-width: 400px;
}

.boss-health-title {
  font-size: 24px;
  font-weight: 700;
  color: #ff6b6b;
  text-align: center;
  margin-bottom: 15px;
  text-shadow: 0 0 10px rgba(255, 107, 107, 0.8);
  animation: bossTitle 2s ease-in-out infinite;
}

@keyframes bossTitle {
  0%, 100% {
    transform: scale(1);
    filter: brightness(1);
  }
  50% {
    transform: scale(1.05);
    filter: brightness(1.2);
  }
}

.boss-health-bar-bg {
  position: relative;
  width: 100%;
  height: 40px;
  background: rgba(50, 50, 50, 0.9);
  border-radius: 20px;
  overflow: hidden;
  border: 2px solid rgba(255, 255, 255, 0.3);
}

.boss-health-bar-fill {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  background: linear-gradient(90deg, #f39c12, #e74c3c);
  border-radius: 20px;
  transition: width 0.3s ease, background 0.5s ease;
  box-shadow: 0 0 20px rgba(255, 107, 107, 0.8);
  animation: healthPulse 1.5s ease-in-out infinite;
}

@keyframes healthPulse {
  0%, 100% {
    box-shadow: 0 0 20px rgba(255, 107, 107, 0.8);
  }
  50% {
    box-shadow: 0 0 30px rgba(255, 107, 107, 1);
  }
}

.boss-health-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 20px;
  font-weight: 700;
  color: white;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
  z-index: 1;
  font-family: 'Courier New', monospace;
}

/* 手機版：Boss 血條 */
body.mobile-mode .boss-health-container {
  top: 10px;
  padding: 15px 20px;
  min-width: 300px;
  max-width: 90%;
}

body.mobile-mode .boss-health-title {
  font-size: 18px;
  margin-bottom: 10px;
}

body.mobile-mode .boss-health-bar-bg {
  height: 30px;
}

body.mobile-mode .boss-health-text {
  font-size: 16px;
}

@media (max-width: 600px) {
  .boss-health-container {
    top: 10px;
    padding: 15px 20px;
    min-width: 300px;
    max-width: 90%;
  }

  .boss-health-title {
    font-size: 18px;
    margin-bottom: 10px;
  }

  .boss-health-bar-bg {
    height: 30px;
  }

  .boss-health-text {
    font-size: 16px;
  }
}

/* ===== Boss 訊息框（螢幕中央顯示） ===== */
.boss-message {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(0, 0, 0, 0.95);
  color: #FFD700;
  padding: 30px 60px;
  border-radius: 25px;
  font-size: 36px;
  font-weight: 800;
  z-index: 9998;
  box-shadow:
    0 15px 50px rgba(0, 0, 0, 0.8),
    0 0 30px rgba(255, 215, 0, 0.6),
    inset 0 0 20px rgba(255, 215, 0, 0.1);
  border: 4px solid rgba(255, 215, 0, 0.9);
  opacity: 0;
  transition: opacity 0.5s ease;
  text-align: center;
  max-width: 600px;
  text-shadow:
    0 0 15px rgba(255, 215, 0, 1),
    0 0 30px rgba(255, 215, 0, 0.8),
    2px 2px 4px rgba(0, 0, 0, 0.9);
  animation: messagePulse 2s ease-in-out infinite;
  pointer-events: none;
  white-space: nowrap;
  letter-spacing: 2px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.boss-message.show {
  opacity: 1;
}

@keyframes messagePulse {
  0%, 100% {
    transform: translate(-50%, -50%) scale(1);
  }
  50% {
    transform: translate(-50%, -50%) scale(1.08);
    box-shadow:
      0 15px 60px rgba(0, 0, 0, 0.9),
      0 0 40px rgba(255, 215, 0, 0.8),
      inset 0 0 25px rgba(255, 215, 0, 0.15);
  }
}

/* 手機版：Boss 訊息 */
body.mobile-mode .boss-message {
  padding: 20px 30px;
  font-size: 24px;
  max-width: 80%;
}

@media (max-width: 600px) {
  .boss-message {
    padding: 20px 30px;
    font-size: 24px;
    max-width: 80%;
  }
}

/* ===== 應援團系統 ===== */
.support-team-container {
  position: fixed;
  bottom: 20px; /* 與音量調節器同高 */
  right: 130px; /* 更靠近發射器，取得平衡 */
  display: flex;
  gap: 15px;
  z-index: 9998;
  pointer-events: none;
}

/* 戰鬥模式時，應援團更靠近發射器 */
body.boss-battle .support-team-container {
  bottom: 20px; /* 保持同高 */
  right: 210px; /* 往左移動，更靠近發射器 */
}

/* Boss戰時強制隱藏特定UI元素 */
/* 註解掉：讓月亮上的計數器在戰鬥中也顯示 */
/* body.boss-battle .counter-display {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
} */

body.boss-battle .moon-hint-container {
  display: none !important;
}

body.boss-battle #moonHint {
  display: none !important;
}

.support-character {
  display: flex;
  flex-direction: column; /* 訊息在上，圖片在下 */
  align-items: center;
  /* 頻繁的原地彈跳動畫 */
  animation: supportBounce 0.8s ease-in-out infinite;
}

.support-char-1 { animation-delay: 0s; }
.support-char-2 { animation-delay: 0.2s; }
.support-char-3 { animation-delay: 0.4s; }
.support-char-4 { animation-delay: 0.6s; }

/* 應援團原地彈跳動畫 */
@keyframes supportBounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-15px);
  }
}

.char-image {
  width: 80px;
  height: auto;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));
  image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;
}

.char-message {
  background: linear-gradient(135deg, rgba(255, 182, 193, 0.95), rgba(255, 192, 203, 0.95)); /* 粉色漸層 */
  padding: 10px 18px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 700;
  color: #FF1493; /* 深粉紅色文字 */
  box-shadow: 0 4px 15px rgba(255, 105, 180, 0.4), 0 0 20px rgba(255, 182, 193, 0.3);
  border: 2px solid rgba(255, 105, 180, 0.5);
  margin-bottom: 12px; /* 訊息和圖片之間的間距 */
  white-space: nowrap;
  text-align: center;
  position: relative;
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.5);
}

/* 對話框小三角 */
.char-message::after {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 10px solid rgba(255, 192, 203, 0.95);
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
}

@keyframes supportBounce {
  0%, 100% {
    transform: translateY(0px) scale(1);
  }
  50% {
    transform: translateY(-15px) scale(1.1);
  }
}

@keyframes messagePulse {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  }
  50% {
    transform: scale(1.05);
    box-shadow: 0 6px 16px rgba(231, 76, 60, 0.4);
  }
}

/* 手機版應援團 */
body.mobile-mode .support-team-container {
  bottom: 80px; /* 在手機版稍微高一點 */
  right: 50%; /* 手機版置中 */
  transform: translateX(50%);
  gap: 8px;
}

body.mobile-mode .char-emoji {
  font-size: 32px;
}

body.mobile-mode .char-message {
  font-size: 12px;
  padding: 6px 12px;
}

@media (max-width: 600px) {
  .support-team-container {
    bottom: 10px;
    gap: 10px;
  }

  .char-emoji {
    font-size: 32px;
  }

  .char-message {
    font-size: 12px;
    padding: 6px 12px;
  }
}

/* ===== 勝利對話框特殊樣式 ===== */
.victory-content {
  background: linear-gradient(135deg, rgba(52, 152, 219, 0.95), rgba(46, 204, 113, 0.95)) !important;
}

.victory-icon {
  font-size: 80px;
  margin-bottom: 20px;
  animation: victoryIconSpin 2s ease-in-out infinite;
  filter: drop-shadow(0 0 20px rgba(255, 255, 255, 1));
}

@keyframes victoryIconSpin {
  0%, 100% {
    transform: scale(1) rotate(0deg);
  }
  50% {
    transform: scale(1.2) rotate(10deg);
  }
}

.victory-message {
  font-size: 18px;
  color: white;
  margin-bottom: 25px;
  font-weight: 600;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.battle-rechallenge {
  background: linear-gradient(135deg, #9b59b6, #8e44ad) !important;
}

.battle-rechallenge:hover {
  box-shadow: 0 12px 30px rgba(155, 89, 182, 0.6) !important;
}

.battle-relax {
  background: linear-gradient(135deg, #16a085, #1abc9c) !important;
}

.battle-relax:hover {
  box-shadow: 0 12px 30px rgba(26, 188, 156, 0.6) !important;
}

/* ===== 愛心放置系統 ===== */
.placed-heart {
  position: fixed;
  font-size: 32px;
  pointer-events: none;
  z-index: 9997;
  animation: heartFloat 3s ease-out forwards;
  filter: drop-shadow(0 2px 8px rgba(255, 107, 157, 0.6));
}

@keyframes heartFloat {
  0% {
    transform: translateY(0) scale(1) rotate(0deg);
    opacity: 1;
  }
  50% {
    transform: translateY(-100px) scale(1.3) rotate(15deg);
    opacity: 0.8;
  }
  100% {
    transform: translateY(-200px) scale(0.5) rotate(30deg);
    opacity: 0;
  }
}

/* ===== 響應式設計 ===== */
@media (max-width: 600px) {
  .card {
    padding: 30px 25px;
    max-width: 95%;
  }

  .title {
    font-size: 36px;
    letter-spacing: 4px;
  }

  .subtitle {
    font-size: 18px;
  }

  .emoji-decoration {
    font-size: 50px;
  }

  .btn {
    padding: 14px 36px;
    font-size: 16px;
  }

  /* 歡迎文字響應式 */
  .welcome-line1 {
    font-size: 18px;
  }

  .welcome-line2 {
    font-size: 14px;
  }

  /* 月亮鬧鐘響應式 */
  .info-panel {
    width: 180px;
    height: 180px;
    top: 15px;
    right: 15px;
  }

  .info-panel::before {
    top: -20px;
    font-size: 22px;
  }

  .info-panel::after {
    top: -6px;
    left: -18px;
    font-size: 16px;
    text-shadow: 180px 0 0 currentColor;
  }

  .crater-1 {
    width: 20px;
    height: 20px;
    top: 30px;
    left: 28px;
  }

  .crater-2 {
    width: 14px;
    height: 14px;
    top: 65px;
    right: 35px;
  }

  .crater-3 {
    width: 12px;
    height: 12px;
    bottom: 40px;
    left: 40px;
  }

  .crater-4 {
    width: 16px;
    height: 16px;
    top: 100px;
    left: 55px;
  }

  .clock-display {
    font-size: 22px;
    margin-bottom: 8px;
  }

  .counter-label {
    font-size: 14px;
  }

  .counter-value {
    font-size: 30px;
  }

  .hint-text {
    font-size: 18px;
    padding: 16px 32px;
    bottom: 30px;
  }
}


/* ===== 手機版角色樣式 ===== */
@media (max-width: 768px) {
  .character-animation {
    width: 35vw;
    max-width: 250px;
    height: 35vw;
    max-height: 250px;
    left: 10px;
  }
}

/* ===== 月球模式：隱藏排行榜相關元素 ===== */
body.moon-mode .side-leaderboard {
  display: none !important;
}