#loading-screen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: #fff; /* or any color/image */
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999; /* on top of everything */
  transition: opacity 0.5s ease;
}

#loading-screen.hidden {
  opacity: 0;
  pointer-events: none;
}

.loader-text {
  font-family: "decoy", serif;
  font-weight: 700;
  font-style: normal;
  font-size: 2em;
  color: #000000;
}

html, body {
  margin: 0;
  padding: 0;
  overflow: hidden;       /* Prevent scrollbars */
  height: 100%;
  width: 100%;
  touch-action: none;     /* Prevent touch-based scrolling (especially on mobile) */
  cursor: none !important;
}

/* The container for your buttons, images will be on top */
.image-container {
  position: relative;
  width: 100vw;
  height: 100vh;
  z-index: 5;
}

.link-image {
  position: absolute;
  width: 25vw;           /* Responsive width */
  max-width: 25vw;      /* Prevent oversized buttons */
}

@media screen and (min-width: 480px) {
  .about-btn {
    top: 2vh;
    left: 2vw;
  }

  .origin-btn {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  .play-btn {
    bottom: 2vh;
    right: 2vw;
  }

  body {
    background-image: url('index bg desktop.webp');
    background-size: cover;        
    background-position: center;    
    background-repeat: no-repeat;   
  }
}

@media screen and (max-width: 479px) {
  .link-image {
    position: static;
    display: block;
    margin: 8vh auto;
    width: 60vw;
    max-width: 300px;
    pointer-events: none;
  }

  .image-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    pointer-events: none;
  }

  body {
    background-image: url('index bg mobile.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }
}

/* Canvas container (scratch card) is behind images */
#canvas-container {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10; /* Canvas below the images */
  pointer-events: none;
}

/* Optional: Apply to the canvas if needed */
canvas {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 5;
}