/* src/css/themes.css */

/* 主題樣式 */

/* 深海藍主題 */
body.deepsea-theme {
  background: linear-gradient(135deg, #1a2980 0%, #26d0ce 100%) !important;
}

.deepsea-theme .container {
  background: rgb(255 255 255 / 8%);
  backdrop-filter: blur(20px);
  border: 1px solid rgb(255 255 255 / 15%);
  box-shadow: 0 25px 50px rgb(0 0 0 / 20%);
}

.deepsea-theme .countdown {
  color: #4facfe;
  text-shadow: 0 0 25px rgb(79 172 254 / 70%);
}

.deepsea-theme .countdown::after {
  background: linear-gradient(90deg, transparent, #4facfe, transparent);
}

.deepsea-theme .progress-bar {
  background: linear-gradient(90deg, #1a2980, #26d0ce);
}

.deepsea-theme .guide-box {
  background: linear-gradient(145deg, #1a2980, #26d0ce);
}

.deepsea-theme .popup-btn {
  background: linear-gradient(45deg, #1a2980, #26d0ce);
  box-shadow: 0 5px 15px rgb(26 41 128 / 40%);
}

/* 日落橙主題 */
body.sunset-theme {
  background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%) !important;
}

.sunset-theme .container {
  background: rgb(255 255 255 / 20%);
  backdrop-filter: blur(20px);
  border: 1px solid rgb(255 255 255 / 30%);
  box-shadow: 0 25px 50px rgb(0 0 0 / 10%);
}

.sunset-theme .countdown {
  color: #ff6b6b;
  text-shadow: 0 0 25px rgb(255 107 107 / 70%);
}

.sunset-theme .countdown::after {
  background: linear-gradient(90deg, transparent, #ff6b6b, transparent);
}

.sunset-theme .progress-bar {
  background: linear-gradient(90deg, #ff9a9e, #ff6b6b);
}

.sunset-theme .guide-box {
  background: linear-gradient(145deg, #ff9a9e, #fecfef);
}

.sunset-theme .popup-btn {
  background: linear-gradient(45deg, #ff9a9e, #ff6b6b);
  box-shadow: 0 5px 15px rgb(255 107 107 / 40%);
}

/* 森林綠主題 */
body.forest-theme {
  background: linear-gradient(135deg, #1d976c 0%, #93f9b9 100%) !important;
}

.forest-theme .container {
  background: rgb(255 255 255 / 15%);
  backdrop-filter: blur(20px);
  border: 1px solid rgb(255 255 255 / 20%);
  box-shadow: 0 25px 50px rgb(0 0 0 / 15%);
}

.forest-theme .countdown {
  color: #1d976c;
  text-shadow: 0 0 25px rgb(29 151 108 / 70%);
}

.forest-theme .countdown::after {
  background: linear-gradient(90deg, transparent, #1d976c, transparent);
}

.forest-theme .progress-bar {
  background: linear-gradient(90deg, #1d976c, #93f9b9);
}

.forest-theme .guide-box {
  background: linear-gradient(145deg, #1d976c, #93f9b9);
}

.forest-theme .popup-btn {
  background: linear-gradient(45deg, #1d976c, #93f9b9);
  box-shadow: 0 5px 15px rgb(29 151 108 / 40%);
}

/* 紫羅蘭主題 */
body.violet-theme {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
}

.violet-theme .container {
  background: rgb(255 255 255 / 10%);
  backdrop-filter: blur(20px);
  border: 1px solid rgb(255 255 255 / 20%);
  box-shadow: 0 25px 50px rgb(0 0 0 / 15%);
}

.violet-theme .countdown {
  color: #b860f7;
  text-shadow: 0 0 25px rgb(184 96 247 / 70%);
}

.violet-theme .countdown::after {
  background: linear-gradient(90deg, transparent, #b860f7, transparent);
}

.violet-theme .progress-bar {
  background: linear-gradient(90deg, #667eea, #b860f7);
}

.violet-theme .guide-box {
  background: linear-gradient(145deg, #667eea, #764ba2);
}

.violet-theme .popup-btn {
  background: linear-gradient(45deg, #667eea, #b860f7);
  box-shadow: 0 5px 15px rgb(102 126 234 / 40%);
}

/* 櫻花粉主題 */
body.sakura-theme {
  background: linear-gradient(135deg, #ff9a9e 0%, #fad0c4 100%) !important;
}

.sakura-theme .container {
  background: rgb(255 255 255 / 20%);
  backdrop-filter: blur(20px);
  border: 1px solid rgb(255 255 255 / 30%);
  box-shadow: 0 25px 50px rgb(0 0 0 / 10%);
}

.sakura-theme .countdown {
  color: #ff9a9e;
  text-shadow: 0 0 25px rgb(255 154 158 / 70%);
}

.sakura-theme .countdown::after {
  background: linear-gradient(90deg, transparent, #ff9a9e, transparent);
}

.sakura-theme .progress-bar {
  background: linear-gradient(90deg, #ff9a9e, #fad0c4);
}

.sakura-theme .guide-box {
  background: linear-gradient(145deg, #ff9a9e, #fad0c4);
}

.sakura-theme .popup-btn {
  background: linear-gradient(45deg, #ff9a9e, #fad0c4);
  box-shadow: 0 5px 15px rgb(255 154 158 / 40%);
}

/* 統一風格藍色主題 (Unified Blue) */
body.unified-theme {
  background: linear-gradient(135deg, #4481eb 0%, #04befe 100%) !important;
}

.unified-theme .container {
  background: rgb(255 255 255 / 10%);
  backdrop-filter: blur(20px);
  border: 1px solid rgb(255 255 255 / 20%);
  box-shadow: 0 25px 50px rgb(0 0 0 / 15%);
}

.unified-theme .countdown {
  color: #04befe;
  text-shadow: 0 0 25px rgb(4 190 254 / 70%);
}

.unified-theme .countdown::after {
  background: linear-gradient(90deg, transparent, #04befe, transparent);
}

.unified-theme .progress-bar {
  background: linear-gradient(90deg, #4481eb, #04befe);
}

.unified-theme .guide-box {
  background: linear-gradient(145deg, #4481eb, #04befe);
}

.unified-theme .popup-btn {
  background: linear-gradient(45deg, #4481eb, #04befe);
  box-shadow: 0 5px 15px rgb(68 129 235 / 40%);
}