/* ═══════════════════════════════════════════
   COMPONENTS — 通用组件样式
   按钮、加载蒙层、Toast提示、粒子特效、问题建议框
   修改任何通用UI组件时改此文件
   ═══════════════════════════════════════════ */

/* ─── 按钮 ─── */
.btn-primary {
  background: linear-gradient(135deg, var(--mystic-purple), #4a1a8a);
  border: 1px solid var(--accent-gold);
  color: var(--accent-gold);
  padding: 13px 34px; border-radius:30px;
  cursor: pointer;
  font-family: 'Cinzel Decorative', serif;
  font-size: .84rem; letter-spacing:2px;
  transition: all .3s;
  box-shadow: 0 0 20px rgba(100,50,200,.28);
}
.btn-primary:hover {
  transform: translateY(-3px);
  box-shadow: 0 9px 35px rgba(100,50,200,.48), 0 0 26px var(--card-glow);
  color: var(--bright-gold);
}
.btn-primary:active { transform:scale(.97); }

.btn-secondary {
  background: transparent;
  border: 1px solid rgba(212,200,232,.3);
  color: var(--pale-lavender);
  padding: 13px 34px; border-radius:30px;
  cursor: pointer;
  font-family: 'Noto Sans SC', sans-serif;
  font-size: .84rem; letter-spacing:2px;
  transition: all .3s;
}
.btn-secondary:hover {
  border-color: var(--pale-lavender);
  background: rgba(212,200,232,.05);
  transform: translateY(-3px);
}

/* ─── 加载蒙层 ─── */
.loading-overlay {
  display: none;
  position: fixed; inset:0;
  background: rgba(5,5,8,.96);
  backdrop-filter: blur(12px);
  z-index: 3000;
  align-items: center; justify-content:center; flex-direction:column; gap:17px;
}
.loading-overlay.active { display:flex; }

/* 水晶球动画 */
.crystal-ball {
  width: 90px; height:90px; border-radius:50%;
  background: radial-gradient(circle at 35% 35%, rgba(180,150,255,.58), rgba(45,20,88,.88), rgba(10,5,30,1));
  border: 2px solid rgba(201,168,76,.38);
  box-shadow: 0 0 36px rgba(100,50,200,.58), 0 0 75px rgba(100,50,200,.28);
  animation: crystalPulse 2s ease-in-out infinite;
  position: relative;
}
.crystal-ball::after {
  content: '✦'; position:absolute; top:50%; left:50%;
  transform: translate(-50%,-50%);
  font-size: 1.75rem; color:rgba(201,168,76,.82);
  animation: spinY 3s linear infinite;
}

.loading-text {
  font-family: 'Cinzel Decorative', serif;
  color: var(--accent-gold); font-size:.88rem; letter-spacing:3px;
  animation: pulse 1.5s ease-in-out infinite;
}

.loading-dots span { color:var(--accent-gold); animation:dots 1.5s infinite; }
.loading-dots span:nth-child(2) { animation-delay:.3s; }
.loading-dots span:nth-child(3) { animation-delay:.6s; }

/* ─── Toast 通知 ─── */
.toast {
  position: fixed; bottom:24px; right:24px;
  background: linear-gradient(135deg, rgba(26,10,46,.97), rgba(13,13,31,.99));
  border: 1px solid rgba(201,168,76,.45);
  border-radius: 10px; padding:12px 19px;
  color: var(--accent-gold); font-size:.84rem;
  z-index: 4000;
  transform: translateX(120px); opacity:0;
  transition: all .4s;
  box-shadow: 0 8px 24px rgba(0,0,0,.48);
}
.toast.show { transform:translateX(0); opacity:1; }

/* ─── 粒子 / 特效 ─── */
.particle {
  position: fixed; pointer-events:none; z-index:999;
  animation: particleFly var(--dur) ease forwards;
}

.screen-flash {
  position: fixed; inset:0;
  background: rgba(201,168,76,.13);
  z-index: 2998; pointer-events:none;
  opacity: 0;
  animation: screenFlash .5s ease forwards;
}

.vibrating { animation:vibrate .35s ease !important; }

/* ─── 问题建议框 ─── */
.q-suggest-box {
  background: linear-gradient(135deg, rgba(15,6,35,.88), rgba(8,5,22,.92));
  border: 1px solid rgba(201,168,76,.16);
  border-radius: 13px; padding:18px; margin-bottom:16px; position:relative;
}
.q-suggest-header {
  display: flex; justify-content:space-between; align-items:center; margin-bottom:12px;
}
.q-suggest-header span {
  font-size: .72rem; color:rgba(201,168,76,.7); letter-spacing:1px;
  font-family: 'Cinzel Decorative', serif;
}
.q-shuffle-btn {
  background: none; border:1px solid rgba(201,168,76,.3);
  color: var(--accent-gold); border-radius:14px; padding:4px 11px;
  cursor: pointer; font-size:.68rem; transition:all .3s;
  display: flex; align-items:center; gap:5px;
}
.q-shuffle-btn:hover { background:rgba(201,168,76,.1); border-color:var(--accent-gold); }

.q-tags { display:flex; flex-direction:column; gap:7px; }
.q-tag {
  background: rgba(45,20,88,.55);
  border: 1px solid rgba(201,168,76,.22);
  border-radius: 8px; padding:9px 13px;
  cursor: pointer; font-size:.78rem; color:rgba(212,200,232,.82);
  line-height: 1.5; transition:all .25s; text-align:left;
}
.q-tag:hover {
  border-color: rgba(201,168,76,.55); color:var(--accent-gold);
  background: rgba(201,168,76,.07); transform:translateX(3px);
}
.q-tag.applied {
  border-color: var(--accent-gold); color:var(--accent-gold);
  background: rgba(201,168,76,.1);
}

.q-hint {
  font-size: .7rem; color:rgba(212,200,232,.38);
  margin-top: 10px; line-height:1.65;
  border-top: 1px solid rgba(201,168,76,.1); padding-top:10px;
}
.q-hint .bad  { color:rgba(255,120,120,.55); }
.q-hint .good { color:rgba(120,220,140,.65); }

/* ─── 通用分割线 ─── */
.divider {
  display: flex; align-items:center; gap:13px; margin:30px 0;
  color: var(--accent-gold); opacity:.4;
}
.divider::before,
.divider::after {
  content: ''; flex:1; height:1px;
  background: linear-gradient(to right, transparent, var(--accent-gold), transparent);
}

.divider-line {
  display: flex; align-items:center; gap:13px;
  color: var(--accent-gold); opacity:.35;
}
.divider-line::before,
.divider-line::after {
  content: ''; flex:1; height:1px;
  background: linear-gradient(to right, transparent, var(--accent-gold), transparent);
}