/* =============================================
   CookieTune 动态四大高对比度主题系统 (themes.css)
   ============================================= */

/* 自定义壁纸激活时的专属全屏渲染层 */
[data-has-custom-bg="true"] .bg-image-layer {
  background-image: var(--custom-bg-url) !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  opacity: 1 !important;
  filter: blur(var(--custom-bg-blur, 0px)) brightness(var(--custom-bg-brightness, 0.95)) !important;
}

[data-has-custom-bg="true"] .bg-gradient-overlay {
  background: rgba(10, 6, 16, 0.28) !important;
  backdrop-filter: blur(2px) !important;
}

/* 1. 🌸 诗词歌曲主题 (国风水墨 · 桃花微雨 · 雅致) */
[data-theme="poetry"] {
  --primary-color: #ff9a9e;
  --primary-gradient: linear-gradient(135deg, #ff758c 0%, #ff9a9e 50%, #fecfef 100%);
  --accent-color: #a8edea;
  --btn-bg: rgba(255, 154, 158, 0.28);
  --btn-border: rgba(254, 207, 239, 0.6);
  --glass-bg: rgba(32, 20, 36, 0.6);
  --glass-border: rgba(254, 207, 239, 0.35);
  --bg-overlay: rgba(18, 10, 20, 0.45);
  --theme-font: var(--font-serif);
}

[data-theme="poetry"] .bg-image-layer {
  background-image: radial-gradient(circle at 15% 20%, rgba(254, 207, 239, 0.35) 0%, transparent 45%),
                    radial-gradient(circle at 85% 80%, rgba(168, 237, 234, 0.25) 0%, transparent 50%),
                    linear-gradient(to bottom, #1d0f22, #2f1730);
}

[data-theme="poetry"] .category-badge,
[data-theme="poetry"] .badge-cat {
  background: rgba(254, 207, 239, 0.25);
  border: 1px solid rgba(254, 207, 239, 0.6);
  color: #fecfef;
}

/* 2. 🎀 Cookie 原创歌曲专属主题 (甜美治愈 · 梦幻星光金粉) */
[data-theme="original"] {
  --primary-color: #ffd700;
  --primary-gradient: linear-gradient(135deg, #ff4e50 0%, #f9d423 50%, #ffd700 100%);
  --accent-color: #ff758c;
  --btn-bg: rgba(255, 215, 0, 0.28);
  --btn-border: rgba(255, 215, 0, 0.65);
  --glass-bg: rgba(40, 16, 30, 0.6);
  --glass-border: rgba(255, 215, 0, 0.45);
  --bg-overlay: rgba(22, 8, 18, 0.45);
}

[data-theme="original"] .bg-image-layer {
  background-image: radial-gradient(circle at 25% 25%, rgba(255, 78, 80, 0.4) 0%, transparent 45%),
                    radial-gradient(circle at 80% 70%, rgba(249, 212, 35, 0.35) 0%, transparent 50%),
                    linear-gradient(to bottom, #2b0f20, #180612);
}

[data-theme="original"] .original-badge {
  background: linear-gradient(135deg, #ffd700, #ff4e50);
  color: #2b0800;
  box-shadow: 0 0 20px rgba(255, 215, 0, 0.8);
  animation: badge-glow 1.8s infinite alternate;
}

/* 3. 🍡 日语歌曲主题 (日漫风 · 霓虹落樱 · 梦幻二次元) */
[data-theme="japanese"] {
  --primary-color: #c471ed;
  --primary-gradient: linear-gradient(135deg, #f64f59 0%, #c471ed 50%, #12c2e9 100%);
  --accent-color: #fbc2eb;
  --btn-bg: rgba(196, 113, 237, 0.28);
  --btn-border: rgba(251, 194, 235, 0.6);
  --glass-bg: rgba(28, 16, 44, 0.6);
  --glass-border: rgba(251, 194, 235, 0.4);
  --bg-overlay: rgba(14, 8, 26, 0.45);
}

[data-theme="japanese"] .bg-image-layer {
  background-image: radial-gradient(circle at 75% 25%, rgba(246, 79, 89, 0.35) 0%, transparent 45%),
                    radial-gradient(circle at 20% 80%, rgba(18, 194, 233, 0.35) 0%, transparent 50%),
                    linear-gradient(to bottom, #1d0f30, #10061e);
}

[data-theme="japanese"] .category-badge,
[data-theme="japanese"] .badge-cat {
  background: rgba(196, 113, 237, 0.3);
  border: 1px solid rgba(251, 194, 235, 0.6);
  color: #fbc2eb;
}

/* 4. 🎧 英文歌曲主题 (欧美黑胶 · 微醺流光夜色) */
[data-theme="english"] {
  --primary-color: #00f2fe;
  --primary-gradient: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
  --accent-color: #f355da;
  --btn-bg: rgba(79, 172, 254, 0.28);
  --btn-border: rgba(0, 242, 254, 0.6);
  --glass-bg: rgba(14, 20, 38, 0.65);
  --glass-border: rgba(79, 172, 254, 0.4);
  --bg-overlay: rgba(8, 12, 24, 0.45);
}

[data-theme="english"] .bg-image-layer {
  background-image: radial-gradient(circle at 80% 20%, rgba(0, 242, 254, 0.35) 0%, transparent 40%),
                    radial-gradient(circle at 20% 70%, rgba(243, 85, 218, 0.3) 0%, transparent 50%),
                    linear-gradient(to bottom, #0d1426, #060914);
}

[data-theme="english"] .category-badge,
[data-theme="english"] .badge-cat {
  background: rgba(79, 172, 254, 0.25);
  border: 1px solid rgba(0, 242, 254, 0.6);
  color: #00f2fe;
}

/* 预设壁纸预览格样式 */
.preset-wallpapers-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-top: 10px;
}

.wp-preset-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 12px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--radius-md);
  color: #fff;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  transition: var(--transition-smooth);
}

.wp-preset-card:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: translateY(-2px);
}

.wp-preset-card.active {
  border-color: var(--primary-color);
  box-shadow: 0 0 20px rgba(255, 117, 140, 0.5);
  background: rgba(255, 255, 255, 0.25);
}

.wp-preview {
  width: 100%;
  height: 70px;
  border-radius: var(--radius-sm);
}

.wp-poetry {
  background: linear-gradient(135deg, #ff758c 0%, #ff9a9e 50%, #2f1730 100%);
}

.wp-sakura {
  background: linear-gradient(135deg, #f64f59 0%, #c471ed 50%, #10061e 100%);
}

.wp-starry {
  background: linear-gradient(135deg, #ff4e50 0%, #ffd700 50%, #180612 100%);
}

.wp-noir {
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 50%, #060914 100%);
}

/* 飘落花瓣与心动动效 */
.particles-container {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.petal-particle {
  position: absolute;
  top: -20px;
  border-radius: 150% 0 150% 0;
  background: linear-gradient(45deg, rgba(255, 182, 193, 0.7), rgba(255, 192, 203, 0.3));
  pointer-events: none;
  animation: fall-sway linear infinite;
}

.floating-hearts-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 999;
}

.floating-heart {
  position: absolute;
  font-size: 24px;
  animation: float-up-fade 1.5s cubic-bezier(0.25, 1, 0.5, 1) forwards;
  pointer-events: none;
}

@keyframes fall-sway {
  0% {
    transform: translate(0, 0) rotate(0deg);
    opacity: 0.9;
  }
  50% {
    transform: translate(60px, 50vh) rotate(180deg);
    opacity: 0.7;
  }
  100% {
    transform: translate(-30px, 105vh) rotate(360deg);
    opacity: 0;
  }
}

@keyframes float-up-fade {
  0% {
    opacity: 1;
    transform: translate(-50%, 0) scale(0.6);
  }
  50% {
    transform: translate(-50%, -60px) scale(1.3) rotate(-10deg);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -120px) scale(1.6) rotate(15deg);
  }
}

@keyframes badge-glow {
  0% { box-shadow: 0 0 10px rgba(255, 215, 0, 0.5); }
  100% { box-shadow: 0 0 25px rgba(255, 215, 0, 0.9); }
}