/* Hide analogue sticks by default */
#analog-stick-left,
#analog-stick-right {
  display: none;
}

/* Landscape orientation on touch-only devices */
@media (pointer: coarse) and (hover: none) and (orientation: landscape) {
  #analog-stick-left,
  #analog-stick-right {
    position: fixed;
    width: 12vw;
    height: 12vw;
    border-radius: 50%;
    background-color: rgba(200, 200, 200, 0.2);
    box-shadow: inset 0px 2px 6px rgba(0, 0, 0, 0.1),
                inset 0px -2px 4px rgba(255, 255, 255, 0.3);
    display: block; /* shown only in this scenario */
  }

  #analog-stick-left {
    left: 10vw;
    bottom: 8vw;
  }

  #analog-stick-right {
    right: 10vw;
    bottom: 8vw;
  }

  #analog-stick-handle-left,
  #analog-stick-handle-right {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 7vw;
    height: 7vw;
    background-image: radial-gradient(circle at 35% 35%, rgba(255, 255, 255, 0.6),
                                                       rgba(245, 245, 245, 0.6),
                                                       rgba(230, 230, 230, 0.6));
    border-radius: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.3),
                0px -2px 6px rgba(255, 255, 255, 0.9);
  }
}

/* Portrait orientation on touch-only devices */
@media (pointer: coarse) and (hover: none) and (orientation: portrait) {
  #analog-stick-left,
  #analog-stick-right {
    position: fixed;
    width: 12vh;
    height: 12vh;
    border-radius: 50%;
    background-color: rgba(200, 200, 200, 0.2);
    box-shadow: inset 0px 2px 6px rgba(0, 0, 0, 0.1),
                inset 0px -2px 4px rgba(255, 255, 255, 0.3);
    display: block; /* shown only in this scenario */
  }

  #analog-stick-left {
    left: 10vw;
    bottom: 10vw;
  }

  #analog-stick-right {
    right: 10vw;
    bottom: 10vw;
  }

  #analog-stick-handle-left,
  #analog-stick-handle-right {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 7vh;
    height: 7vh;
    background-image: radial-gradient(circle at 35% 35%, rgba(255, 255, 255, 0.6),
                                                       rgba(245, 245, 245, 0.6),
                                                       rgba(230, 230, 230, 0.6));
    border-radius: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.3),
                0px -2px 6px rgba(255, 255, 255, 0.9);
  }
}
#fullscreen-btn {
  position: fixed;
  top: 10px;
  right: 10px;
  z-index: 100000; /* Above other elements */
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

#fullscreen-btn svg {
  width: 32px;
  height: 32px;
  stroke: #ffffff;
  fill: none;
  transition: stroke 0.3s;
}

#fullscreen-btn:hover svg {
  stroke: #cccccc;
  z-index:1600;
}

/* Dialogue box styling */
#dialogue-box {
  position: fixed;
  top: 50%;
  left: 50%;
  visibility: hidden;
  transform: translate(-50%, -50%);
  background-color: #2c3e50;  /* A dark blue-grey background */
  color: #ecf0f1;             /* Light text colour */
  padding: 20px 30px;
  border-radius: 4px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  font-family: Arial, sans-serif;
  text-align: center;
  z-index: 1500;  /* High z-index so it appears above other elements */
}

#instructions {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #2c3e50;  /* A dark blue-grey background */
  color: #ecf0f1;             /* Light text colour */
  padding: 20px 30px;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  font-family: Arial, sans-serif;
  text-align: center;
  z-index: 1500;  /* High z-index so it appears above other elements */
  width: 80%;     /* Make it responsive */
  max-width: 300px; /* Prevent it from getting too large */
  max-height: 100px; /* Limit height */
  overflow-y: auto; /* Allow scrolling if content overflows */
}