html,
body {
  margin: 0;
  padding: 0;
  /* overflow: hidden; */
  width: 100%;
  /* height: 100%; */
}

#canvas-container canvas {
  width: 100% !important;
  height: 100% !important;
}

#canvas-container {
  position: absolute;
  left: 288px;
  right: 288px;
  top: 186px;
  bottom: 192px;
  overflow: hidden;
  background-color: #eeeeee;  /* Matches ground color */
  pointer-events: auto;
}

.camera-label {
  color: white;
  padding: 2px 4px;
  font-size: 12px;
  background-color: rgba(0, 0, 0, 0.7);
  border-radius: 4px;
  pointer-events: auto;
  cursor: pointer;
  z-index: 1000;
}

.cube-label {
  color: black;
  background: rgb(190, 190, 190);
  padding: 10px;
  border-radius: 50%;
  font-size: 18px;
  font-weight: bold;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
  pointer-events: auto !important;
  user-select: none;
  position: relative;
  z-index: 900;
}

.cube-label.unlocked {
  background: rgb(239, 68, 68); /* red-500 in Tailwind's color palette */
  color: white;
}

dialog[open] {
  animation: dialog-fade-in 0.3s ease-out;
}

#securityModalOverlay.active {
  display: flex;
}

/* Hide scrollbar but maintain functionality */
.hide-scrollbar::-webkit-scrollbar {
  display: none;
}
.hide-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

@keyframes dialog-fade-in {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}