/* ══════════════════════════════════════
   lag-section.css — 咬了神一口 專屬樣式
   （版面共用樣式已移至 visual-mode.css）
   ══════════════════════════════════════ */

/* ══════════════════════════════════════
   Spoiler warning modal
   ══════════════════════════════════════ */
.spoiler-overlay {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(3, 5, 16, 0.75);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 0.4s var(--ease-smooth), visibility 0.4s;
}
.spoiler-overlay.active { opacity: 1; visibility: visible; pointer-events: auto; }
[data-theme="light"] .spoiler-overlay { background: rgba(200, 215, 240, 0.7); }

.spoiler-modal {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: 24px;
  padding: 3rem 2.5rem 2.5rem;
  max-width: 440px; width: 100%;
  text-align: center;
  box-shadow: 0 30px 100px rgba(0, 10, 40, 0.6);
  transform: translateY(20px) scale(0.96);
  transition: transform 0.5s var(--ease-pop), box-shadow 0.4s var(--ease-smooth);
  position: relative;
  overflow: hidden;
}
.spoiler-overlay.active .spoiler-modal {
  transform: translateY(0) scale(1);
}
/* Shimmer edge */
.spoiler-modal::before {
  content: ""; position: absolute; inset: 0;
  border-radius: 24px;
  background: linear-gradient(135deg, rgba(0,200,255,0.08), transparent 40%, transparent 60%, rgba(0,200,255,0.05));
  pointer-events: none;
}

.spoiler-icon {
  width: 64px; height: 64px; margin: 0 auto 1.5rem;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(0,200,255,0.12), rgba(61,142,255,0.12));
  border: 2px solid var(--accent-color);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.6rem; color: var(--accent-color);
  box-shadow: 0 0 30px rgba(0,200,255,0.2);
  animation: spoilerPulse 3s ease-in-out infinite;
}
@keyframes spoilerPulse {
  0%,100% { box-shadow: 0 0 20px rgba(0,200,255,0.15); transform: scale(1); }
  50%     { box-shadow: 0 0 40px rgba(0,200,255,0.3);  transform: scale(1.06); }
}
[data-theme="light"] .spoiler-icon {
  background: linear-gradient(135deg, rgba(26,109,204,0.1), rgba(74,154,232,0.08));
  box-shadow: 0 0 20px rgba(26,109,204,0.12);
}

.spoiler-title {
  font-family: "Orbitron"; font-size: 1.15rem; font-weight: 700;
  color: var(--accent-color); letter-spacing: 2px; margin-bottom: 1rem;
}
.spoiler-body {
  color: var(--text-sub); font-size: 0.95rem; line-height: 1.9;
  margin-bottom: 0.8rem;
}
.spoiler-sub {
  color: var(--text-main); font-size: 0.9rem; font-weight: 500;
  margin-bottom: 1.8rem; opacity: 0.85;
}

.spoiler-actions { display: flex; gap: 12px; justify-content: center; }
.spoiler-btn {
  padding: 11px 28px; border-radius: 10px;
  font-family: "Orbitron"; font-size: 0.8rem; font-weight: 600;
  letter-spacing: 1px; cursor: pointer;
  transition: all 0.3s var(--ease-pop);
  border: none; outline: none;
}

.spoiler-btn-cancel {
  background: transparent;
  border: 1.5px solid var(--glass-border);
  color: var(--text-sub);
}
.spoiler-btn-cancel:hover {
  border-color: var(--accent-color); color: var(--accent-color);
  box-shadow: 0 0 15px rgba(0,200,255,0.1);
  transform: translateY(-2px);
}

.spoiler-btn-confirm {
  background: var(--accent-color);
  color: var(--bg-color);
  border: 1.5px solid var(--accent-color);
  box-shadow: 0 4px 20px rgba(0,200,255,0.25);
}
.spoiler-btn-confirm:hover {
  box-shadow: 0 6px 30px rgba(0,200,255,0.4);
  transform: translateY(-2px) scale(1.03);
}
.spoiler-btn-confirm i { margin-right: 4px; }

/* Mobile modal */
@media (max-width: 480px) {
  .spoiler-modal { padding: 2rem 1.5rem 1.8rem; border-radius: 18px; }
  .spoiler-icon  { width: 52px; height: 52px; font-size: 1.3rem; }
  .spoiler-title { font-size: 1rem; }
  .spoiler-actions { flex-direction: column; gap: 8px; }
  .spoiler-btn { width: 100%; }
}

/* ── Dark mode text fixes ── */
[data-theme="dark"] .lag-desc { color: #a0c8e0; }
[data-theme="dark"] .quote  { color: #a0c0e0; }
[data-theme="dark"] .muted  { color: #7ea8c8; }
[data-theme="dark"] .novel-info > p[data-i18n="soil-desc"] { color: #8ab0d0; }
[data-theme="dark"] .lag-purchase span { color: #8ab4c8 !important; }