/* Fullscreen gradient background */
.background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom right, #1e3c72, #2a5298);
  z-index: -1;
}

/* Logo in the top-left */
.logo {
  position: absolute;
  top: 20px;
  left: 20px;
  width: 120px;
  height: 120px;
  background-image: url('logo.png');
  background-size: contain;
  background-repeat: no-repeat;
}

/* Splash screen in center when idle */
.splash {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 300px;
  height: 300px;
  margin-top: -150px;
  margin-left: -150px;
  background-image: url('splash.png');
  background-size: contain;
  background-repeat: no-repeat;
  display: none; /* shown only when idle */
}

/* Watermark (top-right corner) */
.watermark {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 57px;
  height: 57px;
  background-image: url('watermark.png');
  background-size: contain;
  background-repeat: no-repeat;
  opacity: 0.7;
}

/* Cast message (centered text below splash) */
.cast-message {
  position: absolute;
  top: calc(50% + 180px);
  left: 50%;
  transform: translateX(-50%);
  color: white;
  font-family: 'Roboto', sans-serif;
  font-size: 20px;
  text-align: center;
}