/* General Styles */
body, html {
  background-color: white;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
}



.emitter {
  visibility: hidden;
  background-color: #222;
  position: absolute;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  top: 40%;
  left: 0%;
}

.dot-container {
  position: absolute;
  left: 0;
  top: 0;
  overflow: visible;
  z-index: 5000;
  pointer-events: none;
}

.dot {
  position: absolute;
  pointer-events: none; /* Performance optimization */
}

/* Main Container */
#main-container {
    padding: 20px;
}

/* Title */
.title {
    color: #333;
    font-size: 32px;
    margin-bottom: 20px;
}

/* Game Area */
#game-area {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 300px;
    background-color: white;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    padding: 20px;
    margin-bottom: 20px;
}

/* Game Controls */
#game-controls {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-top: 20px;
}

/* Buttons */
.wide-button {
    width: 200px;
    padding: 15px;
    font-size: 18px;
    font-weight: bold;
    background-color: #001F3F;
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.3s ease;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

.wide-button:hover {
    background-color: #004080;
}

/* Exit Button */
.exit-button {
    background-color: #f44336;
}

.exit-button:hover {
    background-color: #d32f2f;
}

/* Video Styling */
video {
    width: 100%;  /* Ensures it fits the screen */
    height: auto; /* Maintains aspect ratio */
    max-width: 800px; /* Prevents excessive stretching */
    display: block; /* Ensures visibility */
    margin: auto; /* Centers the video */
}