/* General Styles */
body {
  font-family: 'Arial', sans-serif;
  background-color: #f4f4f9;
  color: #333;
  margin: 0;
  padding: 0;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

header {
  text-align: center;
  margin-bottom: 30px;
}

header h1 {
  font-size: 2.5rem;
  color: #444;
}

header p {
  font-size: 1.1rem;
  color: #666;
}

/* Controls */
.controls {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-bottom: 20px;
}

.controls button {
  padding: 10px 20px;
  font-size: 1rem;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  background-color: #007bff;
  color: white;
  transition: background-color 0.3s ease;
}

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

/* Character Panels */
.character-panels {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-bottom: 40px;
  justify-content: center; /* Center the panels horizontally */
}

.character-panel {
  background-color: white;
  border: 1px solid #ddd;
  border-radius: 10px;
  padding: 15px;
  width: 200px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.character-panel input,
.character-panel select {
  width: 100%;
  padding: 8px;
  margin-bottom: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  box-sizing: border-box;
}

.character-panel input[type="file"] {
  display: none;
}

.character-panel .custom-upload {
  display: inline-block;
  padding: 8px 12px;
  background-color: #007bff;
  color: white;
  border-radius: 5px;
  cursor: pointer;
  text-align: center;
  font-size: 0.9rem;
  margin-bottom: 10px;
}

.character-panel .custom-upload:hover {
  background-color: #0056b3;
}

.character-panel .remove-character {
  width: 100%;
  padding: 8px;
  background-color: #ff4d4d;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 0.9rem;
}

.character-panel .remove-character:hover {
  background-color: #cc0000;
}

/* View Container */
.view-container {
  display: flex;
  gap: 20px;
}

/* Height Legend */
.height-legend {
  width: 50px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-end;
  font-size: 0.9rem;
  color: #666;
  padding: 10px 0;
  position: relative;
}

.height-legend span {
  display: block;
}

/* Horizontal Lines */
.horizontal-line {
  position: absolute;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: rgba(0, 0, 0, 0.1);
}

/* View Panel */
.view-panel {
  background-color: white;
  border: 1px solid #ddd;
  border-radius: 10px;
  padding: 20px;
  height: 600px;
  width: 100%;
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.character-view {
  position: absolute;
  bottom: 20px;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  cursor: grab;
}

.character-view img {
  width: auto;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}

.character-view.dragging {
  cursor: grabbing;
}

/* Character Panel Buttons */
.character-panel button {
  width: 100%;
  padding: 8px;
  margin-top: 5px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 0.9rem;
}

.character-panel .bring-to-front {
  background-color: #28a745;
  color: white;
}

.character-panel .bring-to-front:hover {
  background-color: #218838;
}

.character-panel .reset-position {
  background-color: #ffc107;
  color: black;
}

.character-panel .reset-position:hover {
  background-color: #e0a800;
}

/* Responsive Design */
@media (max-width: 768px) {
  .character-panels {
    flex-direction: column; /* Stack panels vertically on small screens */
    align-items: center; /* Center panels horizontally */
  }

  .character-panel {
    width: 100%; /* Full width on small screens */
    max-width: 300px; /* Limit maximum width */
  }

  .view-container {
    flex-direction: column; /* Stack height legend and view panel vertically */
    align-items: center; /* Center the view container */
  }

  .height-legend {
    display: none; /* Hide height legend on narrow devices */
  }

  .view-panel {
    height: 400px; /* Reduce height for smaller screens */
    width: 100%; /* Full width for view panel */
  }

  /* Adjust horizontal lines for narrow devices */
  .horizontal-line {
    display: none; /* Hide horizontal lines on narrow devices */
  }
}
/* Measurement Display */
.measurement-display {
  text-align: center;
  margin-bottom: 20px;
  font-size: 1.1rem;
  color: #333;
}

/* Crosshair Cursor */
.view-panel.measure-mode {
  cursor: crosshair;
}