/* Reset default styles for all elements */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Body styling */
body {
  height: 100vh;
  background: #15151d;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  font-family: "Lato", sans-serif;
  overflow-x: hidden;
}

/* Video background container */
.video-container {
  position: fixed; /* Always fixed behind content */
  top: 0;
  left: 0;
  width: 100vw; /* Full viewport width */
  height: 100vh; /* Full viewport height */
  overflow: hidden;
  z-index: -1; /* Behind other elements */
}

/* Video element inside container */
.video-container video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* Fill container without stretching */
  display: block;
  transition: opacity 0.5s linear; /* Smooth fade */
}

/* Wheel container */
#spin_the_wheel {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  overflow: hidden;
  width: 100%;
  max-width: 800px;
  height: 50vw;
  max-height: 280px;
}

/* Canvas where wheel is drawn */
#wheel {
  display: block;
  width: 100%;
  height: auto;
}

/* Spin button */
#spin {
  width: 100px;
  height: 100px;
  background: #ff5a10;
  font: bold 18px "Lato", sans-serif;
  border-radius: 50%;
  box-shadow: 0 0 0 8px currentColor, 0 0 15px 5px rgba(0, 0, 0, 0.6);
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding-top: 20px;
  position: absolute;
  bottom: -40px;
  left: 50%;
  transform: translateX(-50%);
  cursor: pointer;
}

/* Small arrow indicator on spin button */
#spin::after {
  content: "";
  position: absolute;
  top: -17px;
  left: 50%;
  transform: translateX(-50%);
  border: 10px solid transparent;
  border-bottom-color: currentColor;
  border-top: none;
}

/* Popup overlay */
#popup {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(216, 127, 38, 0.286); /* Semi-transparent overlay */
  backdrop-filter: blur(5px); /* Blur effect behind popup */
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 999;
}

/* Hide popup by default */
#popup.hidden {
  display: none;
}

/* Popup content styling */
.popup-content {
  background: #1b1b24;
  padding: 30px;
  border-radius: 12px;
  text-align: center;
  position: relative;
  transform: scale(0.8); /* Start smaller for animation */
  opacity: 0;
  transition: all 0.3s ease; /* Smooth show/hide */
}

/* Show popup content animation */
#popup.show .popup-content {
  transform: scale(1);
  opacity: 1;
}

/* Video background main element (controlled with JS) */
#bg-video {
  width: 100vw;
  height: 100vh;
  object-fit: cover;
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
  opacity: 0; /* Initially hidden */
  transition: opacity 0.8s ease-in-out; /* Smooth fade in/out */
}

/* Responsive adjustments for small screens */
@media screen and (max-width: 770px) {
  #spin_the_wheel {
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    overflow: hidden;
    width: 100%;
    max-width: 800px;
    height: 50vw;
    max-height: 200px;
  }

  #spin_the_wheel {
    height: 42vw;
  }

  #spin {
    width: 72px;
    height: 72px;
    padding-top: 14px;
    font-size: 12px;
    bottom: -30px;
    box-shadow: 0 0 0 5px currentColor, 0 0 15px 5px rgba(0, 0, 0, 0.6);
  }

  #spin::after {
    top: -14px;
    border-left-width: 8px;
    border-right-width: 8px;
    border-bottom-width: 12px;
  }
}