@font-face {
  font-family: "ZiXinFangXuanYaTiChangGui";
  src: url("../fonts/ZiXinFangXuanYaTiChangGui/ZiXinFangXuanYaTiChangGui-2.ttf") format("truetype");
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
}

:root {
  --ss-brand-font: "ZiXinFangXuanYaTiChangGui", sans-serif;
  --ss-latin-font: "ZiXinFangXuanYaTiChangGui", sans-serif;
  --ss-cn-font: "ZiXinFangXuanYaTiChangGui", sans-serif;
}

#Stage {
  font-family: var(--ss-latin-font);
  font-size: 15px;
}

html[data-sparkshadow-lang="zh"] #Stage {
  font-family: var(--ss-cn-font);
}

#sparkshadow-brand-shell {
  position: fixed;
  top: max(21px, env(safe-area-inset-top));
  left: max(24px, env(safe-area-inset-left));
  z-index: 32;
  display: flex;
  align-items: center;
  gap: 9px;
  color: rgba(238, 247, 255, 0.9);
  font-family: var(--ss-brand-font);
  font-size: 11.5px;
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: 0;
  pointer-events: none;
  text-transform: uppercase;
}

#sparkshadow-brand-shell img {
  width: 30px;
  height: 24px;
  object-fit: contain;
  filter: drop-shadow(0 0 6px rgba(104, 203, 255, 0.42));
}

html[data-sparkshadow-lang="zh"] #Stage .NavigationUI,
html[data-sparkshadow-lang="zh"] #Stage .NavigationUI *,
html[data-sparkshadow-lang="zh"] #Stage .ChatDOM,
html[data-sparkshadow-lang="zh"] #Stage .ChatDOM *,
html[data-sparkshadow-lang="zh"] #Stage .CookieBanner,
html[data-sparkshadow-lang="zh"] #Stage .CookieBanner *,
html[data-sparkshadow-lang="zh"] #Stage .MusicPlayerDOM,
html[data-sparkshadow-lang="zh"] #Stage .MusicPlayerDOM *,
html[data-sparkshadow-lang="zh"] #Stage .VideoModal,
html[data-sparkshadow-lang="zh"] #Stage .VideoModal * {
  font-family: var(--ss-cn-font) !important;
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0;
}

html[data-sparkshadow-lang="en"] #Stage .NavigationUI,
html[data-sparkshadow-lang="en"] #Stage .NavigationUI *,
html[data-sparkshadow-lang="en"] #Stage .ChatDOM,
html[data-sparkshadow-lang="en"] #Stage .ChatDOM *,
html[data-sparkshadow-lang="en"] #Stage .CookieBanner,
html[data-sparkshadow-lang="en"] #Stage .CookieBanner *,
html[data-sparkshadow-lang="en"] #Stage .MusicPlayerDOM,
html[data-sparkshadow-lang="en"] #Stage .MusicPlayerDOM *,
html[data-sparkshadow-lang="en"] #Stage .VideoModal,
html[data-sparkshadow-lang="en"] #Stage .VideoModal * {
  font-family: var(--ss-latin-font) !important;
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0;
}

html[data-sparkshadow-lang] #Stage .NavigationUI a,
html[data-sparkshadow-lang] #Stage .NavigationUI button,
html[data-sparkshadow-lang] #Stage .MusicPlayerDOM button,
html[data-sparkshadow-lang] #Stage .MusicPlayerDOM a {
  font-weight: 700 !important;
}

#Stage .FXScroll {
  pointer-events: auto !important;
}

#Stage .FXScroll .scrollElement {
  pointer-events: none !important;
}

#Stage .NavigationUI,
#Stage .NavigationUI a,
#Stage .NavigationUI button {
  pointer-events: auto !important;
}

@media (max-width: 680px) {
  #sparkshadow-brand-shell {
    top: max(16px, env(safe-area-inset-top));
    left: max(16px, env(safe-area-inset-left));
    font-size: 11px;
  }

}