/**
 * TikTok Live Studio — fix kotak hitam tanpa menghilangkan panel.
 * Penyebab: backdrop-filter + background rgba semi-transparan.
 * Solusi: body transparan, panel pakai warna SOLID (opaque).
 */

html.obs-mode,
body.obs-mode {
  background: transparent !important;
  background-color: transparent !important;
}

body.obs-mode *,
body.obs-mode *::before,
body.obs-mode *::after {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Panel utama — tampilan gelap-emas (opaque, bukan transparan) */
body.obs-mode .toplike-panel {
  background: linear-gradient(145deg, #3a3220 0%, #1e1a12 55%, #14120c 100%) !important;
  border: 1px solid #b8942e !important;
  box-shadow: none !important;
}

body.obs-mode .toplike-item {
  background: #221e16 !important;
}

body.obs-mode .toplike-item.rank-1 {
  background: linear-gradient(90deg, #4a3f24 0%, #2a2418 100%) !important;
  border-color: #c9a84a !important;
  box-shadow: none !important;
}

body.obs-mode .comment-card {
  background: linear-gradient(135deg, #352d1a 0%, #1a1610 50%, #100e08 100%) !important;
  border: 1px solid #b8942e !important;
  box-shadow:
    0 8px 24px #000000,
    0 0 20px #3d3420 !important;
}

body.obs-mode .comment-waiting {
  background: #1a1610 !important;
  border: 1px solid #8a7330 !important;
}

body.obs-mode .gift-showcase {
  background: #1a1610 !important;
  border: 1px solid #8a7330 !important;
}

body.obs-mode .platform-badge {
  background: #2a2418 !important;
}

body.obs-mode .popup-card {
  background: linear-gradient(160deg, #3d3420 0%, #2a2210 45%, #1e1a10 100%) !important;
  border: 1px solid #b8942e !important;
  box-shadow: none !important;
}

body.obs-mode .headline,
body.obs-mode .headline .word,
body.obs-mode .word.accent.is-visible {
  text-shadow: none !important;
}

body.obs-mode .popup-badge {
  background: #3d3420 !important;
  border: 1px solid #b8942e !important;
}

body.obs-mode .qr-wrap {
  background: #ffffff !important;
}

/* Jangan blur (jadi kotak hitam di TikTok) — jangan target .word Internal */
body.obs-mode .banner-wrap,
body.obs-mode .banner-line,
body.obs-mode .nfa-card,
body.obs-mode .nfa-card.is-visible,
body.obs-mode .nfa-card.is-hiding {
  filter: none !important;
}

body.obs-mode .banner-line,
body.obs-mode .nfa-card .word {
  animation: none !important;
}

body.obs-mode .banner-line {
  color: #ffffff !important;
  -webkit-text-stroke: 0.85px #000000 !important;
  text-shadow: none !important;
}

body.obs-mode .toplike-title,
body.obs-mode .user-name,
body.obs-mode .like-count,
body.obs-mode .crown {
  text-shadow: none !important;
  filter: none !important;
  animation: none !important;
}