* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background: #f8f8f8;
  overflow: hidden;
  /* cursor: none; */ /* Temporarily allow cursor if header is interactive, or ensure pointer-events: none on header */
}

#app {
  width: 100vw;
  height: 100vh;
  position: relative;
}

#canvas {
  display: block;
  width: 100%;
  height: 100%;
}

#ui {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 100;
}

#crosshair {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 4px;
  height: 4px;
  background-color: white;
  border-radius: 50%;
  pointer-events: none;
  z-index: 10;
  box-shadow: 0 0 3px rgba(0,0,0,0.3);
}

#instructions {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(8px) saturate(1.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 210; /* Above header */
  transition: opacity 0.5s ease, backdrop-filter 0.5s ease, visibility 0.5s;
  opacity: 1;
  visibility: visible;
}
#instructions.hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.instructions-content {
  background: rgba(0, 0, 0, 0.9);
  color: #fff;
  padding: 60px 20px;
  border-radius: 0;
  text-align: center;
  box-shadow: none;
  max-width: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
}
.pause-title-container {
  display: flex;
  gap: 1vw; /* Responsive gap */
}
.pause-char {
  font-family: 'Creepster', system-ui;
  font-size: clamp(60px, 12vw, 200px); /* Responsive font size */
  line-height: 1;
  color: #ffffff;
  text-shadow: 
    -1px -1px 0 #000,  
     1px -1px 0 #000,
    -1px  1px 0 #000,
     1px  1px 0 #000,
     3px 3px 5px rgba(0,0,0,0.5);
  animation: rhythmic-bob 2.5s ease-in-out infinite;
}
.pause-char:nth-child(1) { --i: 1; animation-delay: 0s; }
.pause-char:nth-child(2) { --i: 2; animation-delay: 0.1s; }
.pause-char:nth-child(3) { --i: 3; animation-delay: 0.2s; }
.pause-char:nth-child(4) { --i: 4; animation-delay: 0.3s; }
.pause-char:nth-child(5) { --i: 5; animation-delay: 0.4s; }
.pause-char:nth-child(6) { --i: 6; animation-delay: 0.5s; }
@keyframes rhythmic-bob {
  0%, 100% {
    transform: translateY(0) rotate(0);
  }
  50% {
    transform: translateY(-15px) rotate(calc(var(--i, 0) * 1.5deg - 4.5deg));
  }
}
.controls-text-container {
  font-family: 'Inter', sans-serif;
  color: #eee;
  font-size: clamp(14px, 2vw, 18px);
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-align: center;
  text-shadow: 1px 1px 3px rgba(0,0,0,0.5);
}
.controls-text-container p {
  margin: 0;
  padding: 0;
}
.key-highlight {
  font-weight: 700;
  color: #fff;
}
.resume-text {
  margin-top: 15px;
  font-size: clamp(12px, 1.5vw, 16px);
  color: #ccc;
  font-style: italic;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
}
#spawn-menu {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(0,0,0,0.1);
  border-radius: 12px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 15px;
  z-index: 110; /* Above other UI elements */
  box-shadow: 0 8px 20px rgba(0,0,0,0.15);
  pointer-events: auto; /* Allow clicks on the menu */
  transition: opacity 0.3s ease, transform 0.3s ease;
  min-width: 300px; /* Ensure menu has some base width */
}
#spawn-menu.hidden {
  opacity: 0;
  transform: translate(-50%, -45%) scale(0.95); /* Slight animation for hide */
  pointer-events: none;
}
.spawn-menu-section {
  display: flex;
  flex-direction: column; /* Stack p and buttons vertically */
  gap: 8px; /* Space between p and button group */
}
.spawn-menu-section p {
  font-size: 14px;
  color: #555;
  margin-bottom: 0; /* Removed bottom margin as gap is used */
  font-weight: 600;
}
.spawn-menu-button-group { /* For horizontal button layout */
    display: flex;
    gap: 8px;
}
.spawn-menu-button {
  padding: 10px 15px;
  border: 1px solid #ddd;
  background-color: #f0f0f0;
  color: #333;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  transition: background-color 0.2s ease, border-color 0.2s ease;
  flex-grow: 1; /* Allow buttons to grow if needed, or set fixed width */
  margin-right: 0; /* Removed margin-right as gap is used */
}
.spawn-menu-button:hover {
  background-color: #e0e0e0;
  border-color: #ccc;
}
.spawn-menu-button.selected {
  background-color: #007bff;
  color: white;
  border-color: #0056b3;
}
.spawn-menu-button.exit-button {
  background-color: #f8d7da; /* Light red for warning/exit actions */
  color: #721c24;
  border-color: #f5c6cb;
}
.spawn-menu-button.exit-button:hover {
  background-color: #f1b0b7;
  border-color: #eba4ad;
}
.spawn-menu-close-button {
  position: absolute;
  top: 10px;
  right: 10px;
  background: none;
  border: none;
  font-size: 24px;
  line-height: 1;
  color: #aaa;
  cursor: pointer;
  padding: 5px;
}
.spawn-menu-close-button:hover {
  color: #333;
}
.spawn-menu-select {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #ddd;
  background-color: #f0f0f0;
  color: #333;
  border-radius: 6px;
  font-size: 14px;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2210%22%20height%3D%225%22%3E%3Cpath%20d%3D%22M0%200h10L5%205z%22%20fill%3D%22%23333%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 10px 5px;
  padding-right: 35px; /* Adjusted for arrow and padding */
}
.spawn-menu-select:hover {
  background-color: #e0e0e0;
  border-color: #ccc;
}
.spawn-menu-select:focus {
  outline: none;
  border-color: #007bff;
  box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25);
}
.exit-button-section {
  margin-top: 10px; /* Add some space above the exit button */
  display: flex; /* Enable flex for centering */
  justify-content: center; /* Center the button horizontally */
}
.exit-button-section .exit-button {
  flex-grow: 0; /* Prevent button from stretching to full width */
  min-width: 150px; /* Give it a decent minimum width */
  text-align: center;
}
.spawn-object-button {
  /* Default style */
}
.spawn-object-button[data-object="block"] {
  background-color: #add8e6; /* Light blue for block button */
  border-color: #9accdc;
}
.spawn-object-button[data-object="block"]:hover {
  background-color: #9accdc;
  border-color: #89c0d0;
}
.spawn-object-button[data-object="block"].selected {
  background-color: #007bff; /* Keep selected style consistent */
  border-color: #0056b3;
  color: white;
}
#spawn-objects-container.hidden { /* This class might not be used anymore but keep for now */
  display: none;
}
.gltf-model-button {
  /* Specific styles for GLTF model buttons if needed, otherwise they inherit from .spawn-menu-button */
  /* Example: add a slightly different base color or indicator */
  background-color: #e9ecef; /* A lighter grey to differentiate */
}
.gltf-model-button.selected {
  background-color: #28a745; /* Green for selected model */
  color: white;
  border-color: #1e7e34;
}
#gltf-model-selection-container {
  /* Styles for the container of GLTF model buttons */
}
/* --- Mobile Controls --- */
#mobile-controls {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 40%; /* Area where controls are active */
  z-index: 120;
  pointer-events: none; /* Container doesn't block, only children */
  display: none; /* Hidden by default */
}
/* Show on touch devices/small screens */
@media (hover: none) and (pointer: coarse), (max-width: 768px) {
  #mobile-controls {
    display: block;
  }
  #crosshair {
      /* Make crosshair slightly larger for mobile */
      width: 6px;
      height: 6px;
  }
  #instructions {
      /* Hide desktop-specific instructions on mobile */
      display: none;
  }
}
#joystick-container {
  position: absolute;
  bottom: 30px;
  left: 30px;
  width: 120px;
  height: 120px;
  background: rgba(128, 128, 128, 0.3);
  border-radius: 50%;
  pointer-events: auto; /* Enable touch on joystick */
  display: flex;
  justify-content: center;
  align-items: center;
}
#joystick-thumb {
  width: 60px;
  height: 60px;
  background: rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  transition: transform 0.1s ease-out;
}
#loading-screen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #000;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 220; /* Above everything else */
  transition: opacity 0.5s ease, visibility 0.5s;
  opacity: 1;
  visibility: visible;
}
#loading-screen.hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.loading-content {
  text-align: center;
}
/* Re-using pause menu character animation for LOADING text */
.loading-content .pause-char:nth-child(7) { --i: 7; animation-delay: 0.6s; }