/* Use Roboto as the default font for body text */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden; /* Hide scrollbars */
  background-color: #f0f0f0;
}
div {
}
/* Use flexbox on the body to center the image */
body {
  font-family: 'Roboto', sans-serif;
  margin: 0;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #f0f0f0;
  overflow: hidden;
  position: relative;
}
h1, h2, h3 {
  font-family: 'Roboto', sans-serif;
  font-weight: 900;
}

#logo {
  width: 120px;
  height: 120px;
  background-image: url('../images/logo-480x480.png'); /* Path to logo in images folder */
  background-size: cover;
  background-position: center;
  position: absolute;
  border-radius: 60px;
  user-select: none;
  z-index: 10;

}

/* Orientation Labels */
#orientationValues {
  position: absolute;
  top: 24px;
  left: 24px;
  font-size: 16px;
  color: white;
  display: none;
}

#orientationValues div {
  background-color: rgba(0, 0, 0, 0.5);
  padding: 5px;
  border-radius: 3px;
  margin-bottom: 5px;
}

#orientationValues div:last-child {
  margin-bottom: 0;
}

/* Permission Modal */
.modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  justify-content: center;
  align-items: center;
  z-index: 2000; /* Ensure the modal is on top of other elements */
}

.modal-content {
  background-color: white;
  padding: 20px;
  border-radius: 10px;
  text-align: center;
  margin: 0 24px; /* Minimum 24px margin on left and right */
}

/* Permission Modal Button */
.modal-content button, #startGameBtn {
  padding: 10px 20px;
  font-size: 16px;
  margin-top: 10px;
  background-color: #007BFF; /* A nice blue */
  color: #ffffff; /* Accessible white text */
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.modal-content button:hover {
  background-color: #0056b3;
}

/* --------------------------
   New CSS for the Game
   -------------------------- */

/* 160x160 Ring centered on the screen */
#ring {
  position: absolute;
  width: 180px;
  height: 180px;
  border: 4px solid #999999;
  border-radius: 50%;
  z-index: 1;
}

/* --------------------------
   Pulse Animation for the Ring
   -------------------------- */
.pulse {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 180px;               /* Use the updated ring size */
  height: 180px;
  border: 4px solid rgba(153, 153, 153, 0.5); /* Faint version of #999999 */
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(1);
  z-index: 0;                 /* Behind the main ring */
  pointer-events: none;       /* So it doesn't interfere with user interactions */
  animation: pulseAnimation 1s ease-out forwards;
}

@keyframes pulseAnimation {
  0% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0.8;
  }
  100% {
    transform: translate(-50%, -50%) scale(2);
    opacity: 0;
  }
}

/* --------------------------
   Current Time Score
   -------------------------- */
   /* Position the user-info container 24px below the ring */
   #user-info {
     position: absolute;
     /* Calculate top: 50% (center) + ring radius (90px) + 24px offset */
     top: calc(50% + 90px + 24px);
     left: 50%;
     transform: translateX(-50%);
     text-align: center;
     color: #666666;         /* Using your chosen color for text */
     font-family: Arial, sans-serif;
     z-index: 5;             /* Adjust as needed relative to other elements */
   }

   /* Current username display styling */
   #current-username {
     font-size: 16px;        /* Multiple of 4 */
     margin-bottom: 8px;     /* 8px margin below username */
   }

   /* Current time score display styling */
   #current-time {
     font-size: 24px;        /* 24px font size */
     font-weight: 900;
   }

   #startGameBtn {
     padding: 10px 20px;
     font-size: 16px;
     margin-top: 8px;
     background-color: #007BFF; /* A nice blue */
     color: #ffffff; /* Accessible white text */
     border: none;
     border-radius: 4px;
     cursor: pointer;
   }


/* --------------------------
   Leaderboard Container
   -------------------------- */
   /* Leaderboard Container: Positioned 24px from the top and centered horizontally */
   #leaderboard-container {
     position: absolute;
     top: 24px;         /* 24px from the top */
     left: 0;
     right: 0;
     margin: 0 auto;
     display: flex;
     justify-content: center;
     touch-action: none;
   }

   /* Leaderboard: a vertical flex container with a max-width */
   #leaderboard {
     display: flex;
     flex-direction: column;
     align-items: center; /* Center entries horizontally within this container */
     width: 100%;
     max-width: 320px;    /* Maximum width (a multiple of 4) */
     color: #666666;
     touch-action: none;
   }

   /* Each leaderboard entry as a horizontal flex row */
   .leaderboard-entry {
     display: flex;
     align-items: center;
     justify-content: space-between;
     width: 100%;         /* Fill the container's width */
     line-height: 20px;
     touch-action: none;
   }

   /* Leaderboard position (rank) */
   .leaderboard-entry .position {
     flex: 0 0 auto;
     width: 32px;         /* 32px fixed width */
     text-align: left;
     touch-action: none;
   }

   /* Leaderboard username: flexible container with ellipsis, left aligned */
   .leaderboard-entry .username {
     flex: 1;
     max-width: 248px;    /* Maximum width to prevent overflow */
     text-align: left;
     margin: 0;       /* 8px horizontal margin */
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
     touch-action: none;
   }

   /* Leaderboard time: fixed width, right aligned */
   .leaderboard-entry .time {
     flex: 0 0 auto;
     width: 80px;         /* 80px fixed width */
     text-align: right;
     touch-action: none;
   }

   /* Styling for remote players' logos */
.remote-player-logo {
  position: absolute;    /* We position these via JavaScript */
  width: 120px;          /* Assuming each logo is 120x120 */
  height: 120px;
  opacity: 0.2;          /* Low opacity gives a ghosted look */
  pointer-events: none;  /* Allow clicks to pass through */
  border-radius: 50%;    /* Make them circular; adjust if necessary */
  background-image: url('../images/logo-480x480.png'); /* Path to logo in images folder */
  background-size: cover;
  filter: grayscale(100%);
  background-position: center;
  /* Optionally, you can set a background image or color here */
}