/* ============================================
   UI 轻量增强 - 纯装饰层，不影响布局
   仅添加：背景光效、霓虹光晕、扫描线
   ============================================ */

/* 0. 全局颜色变量 */
:root {
  --neon-purple: #7C3AED;
  --neon-pink: #F43F5E;
  --neon-cyan: #00FFFF;
}

/* 1. 背景动态光晕 - 叠加层，不影响布局 */
body::before {
  content: '' !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  background: 
    radial-gradient(circle at 15% 20%, rgba(124, 58, 237, 0.15) 0%, transparent 40%),
    radial-gradient(circle at 85% 15%, rgba(244, 63, 94, 0.1) 0%, transparent 35%),
    radial-gradient(circle at 50% 90%, rgba(0, 255, 255, 0.08) 0%, transparent 40%) !important;
  pointer-events: none !important;
  z-index: 0 !important;
  animation: bgDrift 15s ease-in-out infinite alternate !important;
}

@keyframes bgDrift {
  0% {
    background-position: 15% 20%, 85% 15%, 50% 90%;
  }
  100% {
    background-position: 25% 30%, 75% 10%, 40% 80%;
  }
}

/* 2. CRT扫描线效果 - 叠加层 */
body::after {
  content: '' !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  background: repeating-linear-gradient(
    0deg,
    rgba(0, 0, 0, 0.08),
    rgba(0, 0, 0, 0.08) 1px,
    transparent 1px,
    transparent 3px
  ) !important;
  pointer-events: none !important;
  z-index: 9999 !important;
  opacity: 0.3 !important;
  mix-blend-mode: overlay !important;
}

/* 3. 标题文字霓虹渐变 */
h1, h2, h3,
.neon-text,
.page-title {
  background: linear-gradient(135deg, #A78BFA, #F472B6, #22D3EE) !important;
  background-size: 200% 200% !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  animation: textGradient 4s ease infinite !important;
}

@keyframes textGradient {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

/* 4. 按钮发光悬停 - 只加box-shadow */
button:hover,
.btn:hover {
  box-shadow: 0 0 20px rgba(124, 58, 237, 0.4), 0 4px 15px rgba(0, 0, 0, 0.3) !important;
  transition: box-shadow 0.3s ease !important;
}

/* 5. 输入框聚焦发光 */
input:focus,
input[type="text"]:focus,
input[type="tel"]:focus,
input[type="password"]:focus {
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.15), 0 0 15px rgba(124, 58, 237, 0.2) !important;
  border-color: rgba(167, 139, 250, 0.5) !important;
  transition: all 0.3s ease !important;
}

/* 6. 卡片玻璃质感增强 */
.form-container,
.modal-content,
.room-item,
.player-item,
.settings-panel {
  backdrop-filter: blur(10px) saturate(150%) !important;
  -webkit-backdrop-filter: blur(10px) saturate(150%) !important;
  border: 1px solid rgba(124, 58, 237, 0.2) !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2) !important;
  transition: border-color 0.3s ease, box-shadow 0.3s ease !important;
}

.form-container:hover,
.room-item:hover,
.player-item:hover {
  border-color: rgba(124, 58, 237, 0.4) !important;
  box-shadow: 0 8px 32px rgba(124, 58, 237, 0.15), 0 8px 32px rgba(0, 0, 0, 0.25) !important;
}

/* 7. 滚动条美化 */
::-webkit-scrollbar {
  width: 6px !important;
  height: 6px !important;
}

::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05) !important;
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(124, 58, 237, 0.5), rgba(244, 63, 94, 0.5)) !important;
  border-radius: 3px !important;
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, rgba(124, 58, 237, 0.7), rgba(244, 63, 94, 0.7)) !important;
}

/* 8. Tab激活态发光 */
.tab.active {
  box-shadow: 0 0 15px rgba(124, 58, 237, 0.4) !important;
}

/* 9. 减少动效模式兼容 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  body::after { display: none !important; }
}