/* 赛博灵堂 - 主题样式 */

/* 默认红色大冲击主题 */
[data-theme="cyber-red"],
:root {
  --primary-color: #ff0000;
  --primary-glow: rgba(255, 0, 0, 0.5);
  --primary-rgb: 255, 0, 0;
}

/* 雪峰蓝主题 */
[data-theme="cyber-blue"] {
  --primary-color: #00aaff;
  --primary-glow: rgba(0, 170, 255, 0.5);
  --primary-rgb: 0, 170, 255;
  --bg-color: #000a1a;
  --bg-secondary: #001a2a;
  --text-color: #88ccff;
  --text-secondary: #5599cc;
  --border-color: #0a2a4a;
}

/* 赛博绿主题 */
[data-theme="cyber-green"] {
  --primary-color: #00ff88;
  --primary-glow: rgba(0, 255, 136, 0.5);
  --primary-rgb: 0, 255, 136;
  --bg-color: #001a0a;
  --bg-secondary: #002a1a;
  --text-color: #88ffcc;
  --text-secondary: #55cc99;
  --border-color: #0a4a2a;
}

/* 赛博紫主题 */
[data-theme="cyber-purple"] {
  --primary-color: #aa00ff;
  --primary-glow: rgba(170, 0, 255, 0.5);
  --primary-rgb: 170, 0, 255;
  --bg-color: #0a001a;
  --bg-secondary: #1a002a;
  --text-color: #cc88ff;
  --text-secondary: #9955cc;
  --border-color: #2a0a4a;
}

/* 赛博黄主题 */
[data-theme="cyber-yellow"] {
  --primary-color: #ffaa00;
  --primary-glow: rgba(255, 170, 0, 0.5);
  --primary-rgb: 255, 170, 0;
}

/* 赛博粉主题 */
[data-theme="cyber-pink"] {
  --primary-color: #ff00aa;
  --primary-glow: rgba(255, 0, 170, 0.5);
  --primary-rgb: 255, 0, 170;
}

/* 赛博白主题 */
[data-theme="cyber-white"] {
  --primary-color: #ffffff;
  --primary-glow: rgba(255, 255, 255, 0.5);
  --primary-rgb: 255, 255, 255;
}

/* 暗黑模式增强 */
[data-theme="dark-enhanced"] {
  --primary-color: #ff0000;
  --primary-glow: rgba(255, 0, 0, 0.7);
  --primary-rgb: 255, 0, 0;
  --bg-color: #000000;
  --bg-secondary: #0a0a0a;
  --text-color: #eeeeee;
  --text-secondary: #888888;
  --border-color: #222222;
}

/* 经典灵堂主题 - 完全灰度黑白效果 */
[data-theme="retro"] {
  /* 基础颜色变量 */
  --primary-color: #888888;
  --primary-glow: rgba(136, 136, 136, 0.4);
  --primary-rgb: 136, 136, 136;
  --bg-color: #0a0a0a;
  --bg-secondary: #1a1a1a;
  --text-color: #ffffff;
  --text-secondary: #999999;
  --border-color: #333333;
  
  /* 强制灰度滤镜 */
  filter: grayscale(100%) contrast(1.1);
  
  /* 禁用所有彩色发光效果 */
  --primary-glow: none;
}

/* 经典灵堂主题 - 覆盖所有发光元素 */
[data-theme="retro"] .title-glitch,
[data-theme="retro"] .tablet-name,
[data-theme="retro"] .tablet-dates,
[data-theme="retro"] .wreath-ascii,
[data-theme="retro"] .barrage-item,
[data-theme="retro"] .particle,
[data-theme="retro"] .firework-particle,
[data-theme="retro"] .bg-text {
  text-shadow: none !important;
  box-shadow: none !important;
  filter: grayscale(100%) !important;
}

/* 经典灵堂主题 - 禁用所有动画 */
[data-theme="retro"] *,
[data-theme="retro"] *::before,
[data-theme="retro"] *::after {
  animation-duration: 0s !important;
  animation-delay: 0s !important;
  transition-duration: 0s !important;
}

/* 经典灵堂主题 - 隐藏规则怪谈 */
[data-theme="retro"] .horror-rules {
  display: none !important;
}

/* 经典灵堂主题 - 隐藏弹幕 */
[data-theme="retro"] .barrage-container {
  display: none !important;
}

/* 经典灵堂主题 - 隐藏粒子 */
[data-theme="retro"] .particles-container {
  display: none !important;
}

/* 经典灵堂主题 - 隐藏烟花 */
[data-theme="retro"] .fireworks-container {
  display: none !important;
}

/* 经典灵堂主题 - 隐藏舞池和舞者 */
[data-theme="retro"] .dance-floor {
  display: none !important;
}

[data-theme="retro"] .dancers {
  display: none !important;
}

[data-theme="retro"] .floor-lights {
  display: none !important;
}

[data-theme="retro"] .light-rays {
  display: none !important;
}

[data-theme="retro"] .laser-beams {
  display: none !important;
}

/* 经典灵堂主题 - 保持基本布局 */
[data-theme="retro"] .memorial-container {
  filter: grayscale(100%) contrast(1.1);
}

/* 经典灵堂主题 - 灰度背景文字 */
[data-theme="retro"] .bg-text-1,
[data-theme="retro"] .bg-text-2,
[data-theme="retro"] .bg-text-3,
[data-theme="retro"] .bg-text-4 {
  color: #666666 !important;
  text-shadow: none !important;
}

/* 经典灵堂主题 - 灰度蜡烛（不影响布局） */
[data-theme="retro"] .candle {
  background: linear-gradient(180deg, #aaaaaa 0%, #666666 100%) !important;
}

[data-theme="retro"] .flame {
  background: radial-gradient(ellipse at bottom, #cccccc 0%, #888888 40%, transparent 70%) !important;
}

[data-theme="retro"] .incense-base {
  background: linear-gradient(180deg, #888888 0%, #555555 100%) !important;
}

[data-theme="retro"] .incense-stick {
  background: #666666 !important;
}

[data-theme="retro"] .incense-smoke {
  background: rgba(150, 150, 150, 0.5) !important;
}

[data-theme="retro"] .candle-far-left,
[data-theme="retro"] .candle-far-right {
  background: linear-gradient(180deg, #999999 0%, #555555 100%) !important;
}

[data-theme="retro"] .candle-center-left,
[data-theme="retro"] .candle-center-right {
  background: linear-gradient(180deg, #aaaaaa 0%, #666666 100%) !important;
}

/* 霓虹主题 - RGB故障艺术 */
[data-theme="neon"] {
  --primary-color: #ff00ff;
  --primary-glow: rgba(255, 0, 255, 0.6);
  --primary-rgb: 255, 0, 255;
  --bg-color: #0a001a;
  --bg-secondary: #1a0a2a;
  --text-color: #00ffff;
  --text-secondary: #00aaaa;
  --border-color: #3a0a4a;
}

/* 霓虹主题 - 整个页面RGB故障艺术 */
[data-theme="neon"] body {
  animation: neon-rgb-glitch 0.1s infinite;
}

/* 霓虹主题 - 整个页面容器故障效果 */
[data-theme="neon"] .memorial-container {
  animation: neon-container-glitch 0.15s infinite;
}

@keyframes neon-container-glitch {
  0%, 100% {
    filter: none;
  }
  10% {
    filter: drop-shadow(3px 0 0 rgba(255, 0, 0, 0.7)) drop-shadow(-3px 0 0 rgba(0, 255, 255, 0.7));
  }
  20% {
    filter: drop-shadow(-2px 0 0 rgba(0, 255, 0, 0.7)) drop-shadow(2px 0 0 rgba(255, 0, 255, 0.7));
  }
  30% {
    filter: drop-shadow(2px 0 0 rgba(0, 0, 255, 0.7)) drop-shadow(-2px 0 0 rgba(255, 0, 0, 0.7));
  }
  40% {
    filter: drop-shadow(-3px 0 0 rgba(255, 0, 255, 0.7)) drop-shadow(3px 0 0 rgba(0, 255, 0, 0.7));
  }
  50% {
    filter: drop-shadow(2px 0 0 rgba(255, 0, 0, 0.7)) drop-shadow(-2px 0 0 rgba(0, 0, 255, 0.7));
  }
  60% {
    filter: drop-shadow(-2px 0 0 rgba(0, 255, 255, 0.7)) drop-shadow(2px 0 0 rgba(255, 0, 0, 0.7));
  }
  70% {
    filter: drop-shadow(3px 0 0 rgba(0, 255, 0, 0.7)) drop-shadow(-3px 0 0 rgba(255, 0, 255, 0.7));
  }
  80% {
    filter: drop-shadow(-3px 0 0 rgba(0, 0, 255, 0.7)) drop-shadow(3px 0 0 rgba(0, 255, 255, 0.7));
  }
  90% {
    filter: drop-shadow(2px 0 0 rgba(255, 0, 255, 0.7)) drop-shadow(-2px 0 0 rgba(0, 255, 0, 0.7));
  }
}

/* 霓虹主题 - RGB故障关键帧（全局） */
@keyframes neon-rgb-glitch {
  0% {
    filter: none;
  }
  20% {
    filter: drop-shadow(2px 0 0 #ff0000) drop-shadow(-2px 0 0 #00ff00);
  }
  40% {
    filter: drop-shadow(-2px 0 0 #ff0000) drop-shadow(2px 0 0 #0000ff);
  }
  60% {
    filter: drop-shadow(2px 0 0 #00ff00) drop-shadow(-2px 0 0 #ff0000);
  }
  80% {
    filter: drop-shadow(-2px 0 0 #0000ff) drop-shadow(2px 0 0 #ff0000);
  }
  100% {
    filter: none;
  }
}

/* 霓虹主题 - 标题RGB拖影 */
[data-theme="neon"] .title-glitch {
  animation: neon-title-glitch 0.5s infinite;
}

@keyframes neon-title-glitch {
  0%, 100% {
    text-shadow: 
      0 0 10px #ff00ff,
      0 0 20px #ff00ff,
      0 0 40px #ff00ff;
  }
  25% {
    text-shadow: 
      3px 0 0 #ff0000,
      -3px 0 0 #00ffff,
      0 0 20px #ff00ff;
  }
  50% {
    text-shadow: 
      -3px 0 0 #00ff00,
      3px 0 0 #ff00ff,
      0 0 20px #00ffff;
  }
  75% {
    text-shadow: 
      3px 0 0 #0000ff,
      -3px 0 0 #ff0000,
      0 0 20px #ff00ff;
  }
}

/* 霓虹主题 - 所有文字RGB闪烁 */
[data-theme="neon"] .tablet-name,
[data-theme="neon"] .tablet-dates,
[data-theme="neon"] .tablet-epitaph,
[data-theme="neon"] .wreath-ascii,
[data-theme="neon"] .song-title,
[data-theme="neon"] .song-artist {
  animation: neon-text-glitch 0.3s infinite;
}

@keyframes neon-text-glitch {
  0%, 100% {
    color: #00ffff;
    text-shadow: 0 0 10px #00ffff;
  }
  33% {
    color: #ff00ff;
    text-shadow: 0 0 10px #ff00ff;
  }
  66% {
    color: #00ff00;
    text-shadow: 0 0 10px #00ff00;
  }
}

/* 霓虹主题 - 背景文字RGB跳变 */
[data-theme="neon"] .bg-text-1,
[data-theme="neon"] .bg-text-2,
[data-theme="neon"] .bg-text-3,
[data-theme="neon"] .bg-text-4 {
  animation: neon-bg-glitch 0.2s infinite;
}

@keyframes neon-bg-glitch {
  0%, 100% {
    color: #ff0000;
    text-shadow: 0 0 30px rgba(255, 0, 0, 0.8);
  }
  33% {
    color: #00ff00;
    text-shadow: 0 0 30px rgba(0, 255, 0, 0.8);
  }
  66% {
    color: #0000ff;
    text-shadow: 0 0 30px rgba(0, 0, 255, 0.8);
  }
}

/* 霓虹主题 - 灵牌边框RGB闪烁 */
[data-theme="neon"] .tablet-frame {
  animation: neon-border-glitch 0.4s infinite;
}

@keyframes neon-border-glitch {
  0%, 100% {
    box-shadow: 
      0 0 20px rgba(255, 0, 255, 0.8),
      inset 0 0 20px rgba(0, 0, 0, 0.5);
  }
  33% {
    box-shadow: 
      0 0 20px rgba(255, 0, 0, 0.8),
      inset 0 0 20px rgba(0, 0, 0, 0.5);
  }
  66% {
    box-shadow: 
      0 0 20px rgba(0, 255, 0, 0.8),
      inset 0 0 20px rgba(0, 0, 0, 0.5);
  }
}

/* 霓虹主题 - 蜡烛RGB火焰（不影响布局） */
[data-theme="neon"] .flame {
  animation: neon-flame-glitch 0.15s infinite;
}

@keyframes neon-flame-glitch {
  0%, 100% {
    background: radial-gradient(ellipse at bottom, #ff00ff 0%, #ff00ff 40%, transparent 70%);
  }
  33% {
    background: radial-gradient(ellipse at bottom, #ff0000 0%, #ff0000 40%, transparent 70%);
  }
  66% {
    background: radial-gradient(ellipse at bottom, #00ff00 0%, #00ff00 40%, transparent 70%);
  }
}

[data-theme="neon"] .candle {
  background: linear-gradient(180deg, #ff00ff 0%, #ff00ff 100%) !important;
}

[data-theme="neon"] .candle-far-left,
[data-theme="neon"] .candle-far-right {
  background: linear-gradient(180deg, #ff00ff 0%, #cc00cc 100%) !important;
}

[data-theme="neon"] .candle-center-left,
[data-theme="neon"] .candle-center-right {
  background: linear-gradient(180deg, #ff00ff 0%, #dd00dd 100%) !important;
}

[data-theme="neon"] .incense-base {
  background: linear-gradient(180deg, #ff00ff 0%, #cc00cc 100%) !important;
}

[data-theme="neon"] .incense-stick {
  background: #ff00ff !important;
}

[data-theme="neon"] .incense-smoke {
  background: rgba(255, 0, 255, 0.5) !important;
}

/* 霓虹主题 - 扬声器RGB震动 */
[data-theme="neon"] .speaker-vibration {
  animation: neon-speaker-glitch 0.1s infinite;
}

@keyframes neon-speaker-glitch {
  0%, 100% {
    background: #ff00ff;
  }
  33% {
    background: #ff0000;
  }
  66% {
    background: #00ff00;
  }
}

/* 霓虹主题 - 舞者RGB动画 */
[data-theme="neon"] .dancer-body {
  animation: neon-dancer-glitch 0.2s infinite;
}

@keyframes neon-dancer-glitch {
  0%, 100% {
    background: #ff00ff;
  }
  33% {
    background: #00ffff;
  }
  66% {
    background: #00ff00;
  }
}

/* 赛博橘猫色主题 */
[data-theme="cyber-orange-cat"] {
  --primary-color: #ff8c00;
  --primary-glow: rgba(255, 140, 0, 0.5);
  --primary-rgb: 255, 140, 0;
  --bg-color: #0a0500;
  --bg-secondary: #1a1005;
  --text-color: #ffcc88;
  --text-secondary: #cc9944;
  --border-color: #4a3a2a;
}

/* 赛博妖精粉主题 */
[data-theme="cyber-fairy-pink"] {
  --primary-color: #ff69b4;
  --primary-glow: rgba(255, 105, 180, 0.5);
  --primary-rgb: 255, 105, 180;
  --bg-color: #0a000a;
  --bg-secondary: #1a0a1a;
  --text-color: #ffb6c1;
  --text-secondary: #cc8899;
  --border-color: #4a2a3a;
}

/* 主题应用样式 */

/* 标题发光效果增强 */
.title-glitch {
  text-shadow: 
    0 0 10px var(--primary-glow),
    0 0 20px var(--primary-glow),
    0 0 40px var(--primary-glow),
    0 0 80px var(--primary-glow);
}

/* 灵牌边框发光 */
.tablet-frame {
  box-shadow: 
    0 0 20px rgba(var(--primary-rgb), 0.3),
    inset 0 0 20px rgba(0, 0, 0, 0.5);
}

.tablet-frame::before {
  background: linear-gradient(90deg, transparent, var(--primary-color), transparent);
}

/* 扬声器震动效果 */
.speaker-vibration {
  background: var(--primary-color);
  box-shadow: 0 0 10px var(--primary-glow);
}

/* 舞池灯光 */
.floor-lights .floor-light-segment {
  background: var(--primary-color);
}

/* 聚光灯效果 */
.spotlight {
  background: linear-gradient(180deg, var(--primary-color) 0%, transparent 100%);
}

/* 激光效果 */
.laser-beam {
  background: var(--primary-color);
  box-shadow: 0 0 10px var(--primary-glow);
}

/* 粒子效果 */
.particle {
  background: var(--primary-color);
  box-shadow: 0 0 5px var(--primary-glow);
}

/* 按钮悬停效果 */
.config-btn:hover {
  background: var(--primary-color);
  box-shadow: 0 0 20px var(--primary-glow);
}

/* 播放器按钮 */
.btn-play {
  border-color: var(--primary-color) !important;
}

.btn-play:hover {
  background: var(--primary-color);
  box-shadow: 0 0 15px var(--primary-glow);
}

/* 进度条 */
.progress-bar::-webkit-slider-thumb {
  background: var(--primary-color);
  box-shadow: 0 0 5px var(--primary-glow);
}

.volume-bar::-webkit-slider-thumb {
  background: var(--primary-color);
}

/* 主题按钮激活状态 */
.theme-btn.active {
  background: var(--primary-color);
  color: #ffffff;
  box-shadow: 0 0 10px var(--primary-glow);
}

/* 链接颜色 */
a {
  color: var(--primary-color);
}

a:hover {
  text-shadow: 0 0 5px var(--primary-glow);
}

/* 选中文本颜色 */
::selection {
  background: rgba(var(--primary-rgb), 0.3);
  color: var(--text-color);
}

/* 滚动条样式 */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: var(--bg-color);
}

::-webkit-scrollbar-thumb {
  background: var(--primary-color);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(var(--primary-rgb), 0.8);
}

/* 焦点样式 */
*:focus {
  outline: 2px solid var(--primary-color);
  outline-offset: 2px;
}

*:focus:not(:focus-visible) {
  outline: none;
}

/* 输入框焦点 */
input:focus,
textarea:focus,
select:focus {
  border-color: var(--primary-color);
  box-shadow: 0 0 5px var(--primary-glow);
}

/* 按钮焦点 */
button:focus-visible {
  outline: 2px solid var(--primary-color);
  outline-offset: 2px;
}

/* 复选框样式 */
input[type="checkbox"] {
  accent-color: var(--primary-color);
}

/* 范围滑块样式 */
input[type="range"] {
  accent-color: var(--primary-color);
}

/* 链接按钮样式 */
.btn-apply {
  background: var(--primary-color);
  box-shadow: 0 2px 5px rgba(var(--primary-rgb), 0.3);
}

.btn-apply:hover {
  background: rgba(var(--primary-rgb), 0.9);
  box-shadow: 0 4px 10px rgba(var(--primary-rgb), 0.4);
}

/* 卡片样式增强 */
.config-section {
  background: rgba(var(--primary-rgb), 0.05);
  border: 1px solid rgba(var(--primary-rgb), 0.2);
  border-radius: 8px;
  padding: var(--spacing-lg);
}

/* 分隔线样式 */
hr {
  border: none;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--primary-color), transparent);
  margin: var(--spacing-xl) 0;
}

/* 标记样式 */
mark {
  background: rgba(var(--primary-rgb), 0.3);
  color: var(--text-color);
  padding: 2px 4px;
  border-radius: 2px;
}

/* 引用样式 */
blockquote {
  border-left: 3px solid var(--primary-color);
  padding-left: var(--spacing-md);
  color: var(--text-secondary);
  font-style: italic;
}

/* 代码样式 */
code {
  background: rgba(var(--primary-rgb), 0.1);
  color: var(--primary-color);
  padding: 2px 6px;
  border-radius: 4px;
  font-family: 'Courier New', monospace;
}

pre {
  background: var(--bg-color);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: var(--spacing-md);
  overflow-x: auto;
}

pre code {
  background: none;
  color: var(--text-color);
  padding: 0;
}

/* 表格样式 */
table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--spacing-md) 0;
}

th, td {
  padding: var(--spacing-sm) var(--spacing-md);
  border: 1px solid var(--border-color);
  text-align: left;
}

th {
  background: rgba(var(--primary-rgb), 0.1);
  color: var(--primary-color);
  font-weight: bold;
}

tr:hover {
  background: rgba(var(--primary-rgb), 0.05);
}

/* 列表样式 */
ul, ol {
  padding-left: var(--spacing-xl);
}

li {
  margin-bottom: var(--spacing-xs);
}

li::marker {
  color: var(--primary-color);
}

/* 图片样式 */
img {
  max-width: 100%;
  height: auto;
}

/* 响应式主题调整 */
@media (max-width: 767.98px) {
  .title-glitch {
    text-shadow: 
      0 0 5px var(--primary-glow),
      0 0 10px var(--primary-glow);
  }
}

/* 打印主题 */
@media print {
  :root {
    --primary-color: #000000;
    --primary-glow: none;
    --bg-color: #ffffff;
    --bg-secondary: #f5f5f5;
    --text-color: #000000;
    --text-secondary: #333333;
    --border-color: #cccccc;
  }
}