/* Basic reset and body styles */
body {
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column; /* Stack game and potentially other elements */
  justify-content: center; /* Center game container vertically */
  align-items: center; /* Center game container horizontally */
  min-height: 100vh;
  background-color: #222;
  font-family: sans-serif;
  color: #eee;
  overflow: hidden; /* Prevent scrollbars */
  /* Disable text selection and default touch actions (like pinch-zoom, scroll) */
  touch-action: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent; /* Remove tap highlight on mobile */
}

/* Container for the Pixi canvas and mobile controls */
#game-container {
  border: 1px solid #555;
  position: relative; /* Crucial for positioning children absolutely */
  /* Responsive sizing - Maintain aspect ratio */
  width: 95vw; /* Use viewport width */
  max-width: 800px; /* Max size based on game dimensions */
  aspect-ratio: 800 / 600; /* Force aspect ratio based on game dimensions */
  max-height: 95vh; /* Prevent exceeding viewport height */
  overflow: hidden; /* Hide anything sticking out */
}

/* Style the canvas itself */
canvas {
  display: block; /* Prevent extra space below canvas */
  width: 100%; /* Fill the game container */
  height: 100%; /* Fill the game container */
  background-color: #1a1a2a; /* Match Pixi background for smooth loading */
}

/* Scoreboard Styles */
#scoreboard {
  position: absolute; /* Position relative to body/viewport */
  top: 10px;
  right: 10px;
  background-color: rgba(0, 0, 0, 0.6);
  padding: 5px 10px;
  border-radius: 5px;
  min-width: 100px;
  font-size: max(1vw, 10px); /* Responsive font size */
  color: #fff;
  z-index: 10; /* Above canvas, below overlay/controls */
}

#scoreboard h2 {
  margin: 0 0 5px 0;
  text-align: center;
  font-size: 1.2em;
}

#score-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

#score-list li {
  margin-bottom: 3px;
  font-size: 1em;
  white-space: nowrap; /* Prevent score wrapping */
}

/* Message Overlay Styles (Game Over, Connecting, etc.) */
#message-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: rgba(0, 0, 0, 0.8);
  color: white;
  padding: 20px 40px;
  border-radius: 10px;
  font-size: max(3vw, 18px); /* Responsive font size */
  text-align: center;
  display: none; /* Hidden by default */
  z-index: 1000; /* Highest priority */
}

/* --- Mobile Controls Styles --- */
.mobile-control {
  display: none; /* Hide by default - shown via JS */
  position: absolute; /* Position inside #game-container */
  bottom: 2%; /* Position from bottom edge of game container */
  z-index: 50; /* Above canvas, below message overlay */
  opacity: 0.6; /* Make them semi-transparent */
  box-sizing: border-box; /* Include padding/border in element's total width/height */
}

/* Joystick Area */
#joystick-zone {
  left: 2%; /* Position from left edge */
  width: 30%; /* Relative width */
  max-width: 150px; /* Max size */
  height: 0; /* Set height via padding-bottom for aspect ratio */
  padding-bottom: 30%; /* Make it square based on width */
  max-height: 150px; /* Match max width */
  /* background-color: rgba(255, 0, 0, 0.1); */ /* Optional: for debugging */
  /* border: 1px dashed red; */ /* Optional: for debugging */
}

/* Style the nipplejs elements */
.nipple {
  opacity: 0.5;
}
.nipple .front {
  background-color: white !important; /* Override default color */
}
.nipple .back {
  background-color: gray !important; /* Override default color */
  opacity: 0.3;
}

/* Jump Button */
#jump-button {
  right: 3%; /* Position from right edge */
  width: 20%; /* Relative width */
  max-width: 90px; /* Max size */
  height: 0; /* Set height via padding-bottom */
  padding-bottom: 20%; /* Make it square based on width */
  max-height: 90px; /* Match max width */
  background-color: rgba(200, 200, 200, 0.7);
  border-radius: 50%; /* Make it round */
  /* Center text inside */
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: max(2.5vw, 14px); /* Responsive font size */
  font-weight: bold;
  color: #333;
  border: 2px solid rgba(100, 100, 100, 0.8);
  cursor: pointer; /* Indicate it's clickable */
}

/* Style for when the jump button is actively being touched */
#jump-button:active {
  background-color: rgba(255, 255, 255, 0.8);
  transform: scale(0.95); /* Slight shrink effect */
}
/* --- End Mobile Controls Styles --- */

/* Default styles for mobile controls (hidden) */
.mobile-control {
  display: none; /* Hide by default */
  position: absolute;
  z-index: 10; /* Ensure they are above the canvas */
  box-sizing: border-box;
}

/* Styles to SHOW mobile controls when the body has 'mobile-active' class */
body.mobile-active #joystick-zone,
body.mobile-active #jump-button {
  display: block; /* Show the joystick zone */
}
body.mobile-active #jump-button {
  display: flex; /* Use flex for jump button centering */
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 1.5em; /* Make jump text bigger */
  color: #333;
  text-shadow: 1px 1px 1px white;
}

/* --- Positioning and Appearance (Example - Adjust as needed!) --- */

/* Joystick Zone */
#joystick-zone {
  bottom: 10px;
  left: 10px;
  width: 150px; /* Adjust size */
  height: 150px; /* Adjust size */
  background-color: rgba(100, 100, 100, 0.3); /* Semi-transparent background */
  border-radius: 50%; /* Make it round */
  border: 2px solid rgba(255, 255, 255, 0.4);
}

/* Jump Button */
#jump-button {
  bottom: 30px; /* Adjust position */
  right: 30px; /* Adjust position */
  width: 100px; /* Adjust size */
  height: 100px; /* Adjust size */
  background-color: rgba(200, 200, 200, 0.7); /* Button color */
  border: 2px solid rgba(255, 255, 255, 0.8);
  border-radius: 50%; /* Make it round */
  cursor: pointer; /* Indicate it's clickable */
  user-select: none; /* Prevent text selection */
  -webkit-user-select: none; /* Safari */
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* IE */
}

#jump-button:active {
  /* Feedback when pressed */
  background-color: rgba(255, 255, 255, 0.7);
}

/* Ensure game container allows absolute positioning */
#game-container {
  position: relative; /* Needed for absolute positioning of children */
  /* Add other styles like width, height, margin: auto etc. */
  width: 800px; /* Match canvas width */
  height: 600px; /* Match canvas height */
  margin: 20px auto;
  overflow: hidden; /* Hide anything sticking out */
}

/* Ensure canvas doesn't overlap controls strangely */
#game-container canvas {
  display: block; /* Remove potential bottom space */
  position: relative; /* Keep it in normal flow relative to container */
  z-index: 1; /* Below controls */
}

/* Scoreboard and Message Overlay styling (keep or adjust) */
#scoreboard {
  position: absolute;
  top: 10px;
  right: 10px;
  background-color: rgba(0, 0, 0, 0.6);
  color: white;
  padding: 10px;
  border-radius: 5px;
  z-index: 20; /* Above everything */
  font-family: sans-serif;
  max-height: 200px;
  overflow-y: auto;
}
#scoreboard h2 {
  margin: 0 0 5px 0;
  font-size: 1.1em;
}
#score-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
#score-list li {
  margin-bottom: 3px;
  font-size: 0.9em;
}

#message-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: rgba(0, 0, 0, 0.8);
  color: white;
  padding: 20px 40px;
  border-radius: 10px;
  font-size: 1.5em;
  font-weight: bold;
  z-index: 30; /* Highest */
  display: none; /* Initially hidden */
  opacity: 0;
  transition: opacity 0.5s ease-out;
  text-align: center;
}