/* Lava layer behind Element (fixed, full-viewport) */
#syncholeLavaRoot{
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  isolation: isolate;
}

/* same lava system */
#syncholeLavaRoot .lava{
  position: absolute;
  inset: -18%;
  filter: url(#goo) saturate(125%) contrast(108%);
  opacity: 0.95;
  transform: translateZ(0);
  pointer-events: auto; /* allow dragging blobs */
}

/* blobs same behavior as synchole.net */
#syncholeLavaRoot .blob{
  position: absolute;
  mix-blend-mode: screen;
  opacity: 0.85;
  filter: blur(22px);
  will-change: transform;
  transform: translate3d(0,0,0);
  cursor: grab;
  touch-action: none;
}
#syncholeLavaRoot .blob.is-dragging{ cursor: grabbing; }

/* light readability vignette (Element has no "hero" mask) */
#syncholeLavaRoot .element-vignette{
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(1200px circle at 50% 35%, rgba(0,0,0,0.08), transparent 60%),
    radial-gradient(1200px circle at 50% 70%, rgba(0,0,0,0.20), transparent 70%),
    radial-gradient(1400px circle at center, transparent 45%, rgba(0,0,0,0.55) 100%);
}

/* Put the Element app above lava */
.mx_Root,
.mx_App,
.mx_MatrixChat,
.mx_AuthPage,
.mx_SplashPage,
.mx_SplashPage_wrapper,
.mx_SplashPage_body,
.mx_WelcomePage{
  position: relative;
  z-index: 2;
}

/* Hard-kill the lake background everywhere (including after boot) */
html, body,
.mx_Root, .mx_App, .mx_MatrixChat,
.mx_AuthPage, .mx_SplashPage, .mx_WelcomePage,
.mx_WelcomePage > div{
  background: transparent !important;
  background-image: none !important;
}
.mx_RoomView_wrapper{
    background: rgba(0, 0, 0, 0.5) !important; /* 1 = fully opaque, 0 = fully transparent */
}
.mx_DisambiguatedProfile, .mx_EventTile, .mx_EventTile_bad {
    background: rgba(42, 48, 57, 0.9) !important; /* 1 = fully opaque, 0 = fully transparent */
    border-radius: 12px;
}


/* Darken welcome "card" (and remove that bright bottom/language strip look) */
.mx_Parent,
.mx_Welcome,
.mx_AuthHeader,
.mx_AuthPage_modalContent{
  background: rgba(18,22,32,0.82) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  border-radius: 16px !important;
  box-shadow: 0 20px 70px rgba(0,0,0,0.45) !important;
  backdrop-filter: blur(14px) !important;
}

/* Make text readable */
.mx_Header_title,
.mx_Header_subtitle{
  color: rgba(255,255,255,0.92) !important;
  text-shadow: 0 0 22px rgba(0,0,0,0.35);
}

/* Remove/neutralize the "white bar" section under buttons (language row area) */
.mx_Parent > *{
  background: transparent !important;
}
.mx_Parent select,
.mx_Parent option{
  color: rgba(255,255,255,0.88);
  background: rgba(0,0,0,0.25);
}
.mx_Welcome{
  background: rgba(18,22,32,0.82) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  border-radius: 16px !important;
  box-shadow: 0 20px 70px rgba(0,0,0,0.45) !important;
  backdrop-filter: blur(14px) !important;
}

/* Respect reduced-motion */
@media (prefers-reduced-motion: reduce){
  #syncholeLavaRoot .blob{ transition: none !important; }
}
/* ===== base dark canvas (what you're missing) ===== */
:root {
  --lava-bg: #070a12;
  --lava-bg2: rgba(18, 22, 36, 0.92);
}

/* Force the actual page background dark */
html, body {
  background: var(--lava-bg) !important;
  background-image: none !important;
}

/* Your injected background layer */
#syncholeLavaRoot {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;

  /* dark base + subtle depth */
  background:
    radial-gradient(1200px circle at 40% 40%, var(--lava-bg2), var(--lava-bg) 70%);
}

/* Keep Element app above the lava */
.mx_Root,
.mx_App,
.mx_MatrixChat,
.mx_SplashPage,
.mx_SplashPage_wrapper,
.mx_SplashPage_body,
.mx_AuthPage,
.mx_WelcomePage,
.mx_WelcomePage > div {
  position: relative;
  z-index: 1;
  background: transparent !important;
  background-image: none !important;
}

/* Optional: also kill any white/gray “paper” behind auth screens */
.mx_AuthPage,
.mx_WelcomePage {
  background-color: transparent !important;
}

/* Your existing vignette layer (tweak as needed) */
#syncholeLavaRoot .element-vignette{
  position:absolute;
  inset:0;
  z-index:2;
  background: radial-gradient(1200px circle at center, transparent 45%, rgba(0,0,0,0.60) 100%);
}

/* Lava layer */
#syncholeLavaRoot .lava{
  position:absolute;
  inset:-18%;
  z-index:1;
  filter:url(#goo) saturate(140%) contrast(108%);
  opacity:0.95;
  transform:translateZ(0);
}