body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  /* A soft, modern diagonal gradient */
  background: linear-gradient(135deg, #a18cd1 0%, #fbc2eb 100%);
  display: flex;
  justify-content: center;
  padding-top: 50px;
  min-height: 100vh; /* Ensures the background covers the whole screen */
  margin: 0;
}

.app-container {
  background-color: white;
  padding: 30px;
  border-radius: 15px;
  box-shadow: 0px 4px 10px rgba(0,0,0,0.1);
  text-align: center;
  width: 300px;
}

.poop-button {
  font-size: 50px; /* Made the emoji huge */
  padding: 15px 40px;
  background-color: #8b5a2b;
  color: white;
  border: none;
  border-radius: 50px; /* Makes it a smooth pill shape */
  cursor: pointer;
  margin-bottom: 30px;
  /* This creates a chunky 3D shadow under the button */
  box-shadow: 0px 10px 0px #5c3a1a; 
  transition: all 0.1s ease; /* Makes the movement smooth */
}

/* :active tells it what to do exactly when clicked */
.poop-button:active {
  transform: translateY(10px); /* Pushes the button down */
  box-shadow: 0px 0px 0px #5c3a1a; /* Removes the shadow to complete the illusion */
}

.poop-button:hover {
  background-color: #6b4423; /* Darker brown when hovered */
}

.leaderboard-list {
  list-style-type: none; /* Removes the bullet points */
  padding: 0;
  text-align: left;
  font-size: 18px;
}

/* This styles the individual list items (the <li> tags) */
.leaderboard-list li {
  background-color: #f8f9fa;
  margin-bottom: 12px;
  padding: 15px 20px;
  border-radius: 12px;
  font-weight: bold;
  color: #333;
  /* Adds a subtle shadow to make them pop off the screen slightly */
  box-shadow: 0px 3px 6px rgba(0,0,0,0.05); 
  border-left: 5px solid #8b5a2b; /* Adds a cool color accent on the left */
}

.user-dropdown {
  width: 100%;
  padding: 15px;
  font-size: 18px;
  font-weight: bold;
  border-radius: 10px;
  border: 2px solid #e0e0e0;
  margin-bottom: 20px;
  background-color: #f8f9fa;
  color: #333;
  cursor: pointer;
  outline: none;
  /* Adds a subtle transition for when you click it */
  transition: border-color 0.2s ease;
}

.user-dropdown:focus {
  border-color: #8b5a2b; /* Brown outline when clicked */
}

/* Makes the name look like a clickable link */
.profile-name {
  color: #8b5a2b;
  text-decoration: underline;
  cursor: pointer;
  font-weight: 900;
}

.profile-name:hover {
  color: #5c3a1a;
}

/* Styles the "Back" button but keeps it hidden by default */
.hidden-btn {
  display: none; /* Hidden normally */
  background-color: #e0e0e0;
  color: #333;
  border: none;
  padding: 8px 15px;
  border-radius: 8px;
  cursor: pointer;
  margin-bottom: 15px;
  font-weight: bold;
}

.hidden-btn:hover {
  background-color: #ccc;
}

/* The Scoreboard Box */
.scoreboard-container {
  display: flex;
  justify-content: space-around;
  background-color: #f0e6d2; /* Light tan background */
  padding: 15px;
  border-radius: 12px;
  margin-bottom: 20px;
  border: 2px dashed #8b5a2b;
}

/* Individual Score Cards */
.score-card {
  text-align: center;
  font-weight: bold;
  color: #5c3a1a;
  font-size: 16px;
  cursor: pointer;
  transition: transform 0.2s ease, background-color 0.2s ease;
  padding: 8px 15px;
  border-radius: 8px;
  /* Flexbox keeps the image and text stacked perfectly centered */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px; 
}

.score-card:hover {
  transform: translateY(-3px);
  background-color: #eaddc5; 
}

.score-card span {
  display: block;
  font-size: 28px; 
  margin-top: 2px;
}

/* --- NEW: Scoreboard Avatars --- */
.scoreboard-avatar {
  width: 45px;
  height: 45px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #8b5a2b; /* A nice brown ring around the picture */
}

/* Makes the card pop up slightly when hovered */
.score-card:hover {
  transform: translateY(-3px);
  background-color: #eaddc5; 
}

.score-card span {
  display: block;
  font-size: 28px; 
  margin-top: 5px;
}

/* The Delete Button */
.delete-btn {
  background-color: #ff4d4d;
  color: white;
  border: none;
  border-radius: 6px;
  padding: 6px 12px;
  cursor: pointer;
  float: right; /* Pushes it to the right side of the row */
  font-weight: bold;
  font-size: 12px;
  transition: background-color 0.2s;
}

.delete-btn:hover {
  background-color: #cc0000;
}

/* Keeps the input and button side-by-side */
.new-user-container {
  display: flex;
  gap: 10px;
  margin-bottom: 15px;
}

/* Styles the text box */
#new-name-input {
  flex-grow: 1; /* Makes the text box take up the remaining space */
  padding: 12px;
  border-radius: 10px;
  border: 2px solid #e0e0e0;
  font-size: 16px;
  outline: none;
  transition: border-color 0.2s ease;
}

#new-name-input:focus {
  border-color: #8b5a2b; /* Brown outline when typing */
}

/* Styles the Add button */
.add-btn {
  background-color: #8b5a2b;
  color: white;
  border: none;
  padding: 0 20px;
  border-radius: 10px;
  cursor: pointer;
  font-weight: bold;
  font-size: 16px;
}

.add-btn:hover {
  background-color: #6b4423;
}

/* Stacks the rating and note box neatly */
.log-details-container {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 20px;
}

/* Styles both the dropdown and the text box */
.detail-input {
  padding: 12px;
  border-radius: 10px;
  border: 2px solid #e0e0e0;
  font-size: 16px;
  outline: none;
  font-family: inherit;
  transition: border-color 0.2s ease;
}

.detail-input:focus {
  border-color: #8b5a2b;
}

/* --- Feed Upgrades --- */
/* Forces the delete button to stay perfectly on the right */
.leaderboard-list li {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.log-content {
  flex-grow: 1; /* Gives the text room to breathe */
}

/* Styles the stars in the feed */
.log-rating {
  color: #d4af37; /* Gold color */
  font-weight: 900;
}

/* Styles the text note in the feed */
.log-note {
  display: block;
  font-size: 15px;
  color: #666;
  font-style: italic;
  margin-top: 8px;
  padding-left: 10px;
  border-left: 3px solid #d3c4b7; /* Adds a nice quote-line next to the text */
  font-weight: normal;
}

/* --- Social Reactions --- */
.reactions-bar {
  display: flex;
  gap: 10px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #eee; /* Adds a subtle line above the reactions */
}

.reaction-btn {
  background-color: transparent;
  border: 1px solid #ddd;
  border-radius: 20px;
  padding: 4px 12px;
  font-size: 14px;
  cursor: pointer;
  color: #555;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 5px;
}

.reaction-btn:hover {
  background-color: #f8f9fa;
  transform: scale(1.05); /* Slight pop effect on hover */
}

/* This is the class we will add when a user has clicked it */
.reaction-btn.active {
  background-color: #f0e6d2;
  border-color: #8b5a2b;
  color: #8b5a2b;
  font-weight: bold;
}

/* --- Time Tabs --- */
.tabs-container {
  display: flex;
  justify-content: space-between;
  background-color: #f8f9fa;
  border-radius: 10px;
  padding: 5px;
  margin-bottom: 20px;
  border: 1px solid #e0e0e0;
}

.time-tab {
  flex-grow: 1;
  background: none;
  border: none;
  padding: 8px 0;
  font-size: 14px;
  font-weight: bold;
  color: #666;
  cursor: pointer;
  border-radius: 8px;
  transition: all 0.2s ease;
}

/* This styles the tab when it is clicked/active */
.time-tab.active {
  background-color: #8b5a2b;
  color: white;
  box-shadow: 0px 2px 5px rgba(0,0,0,0.2);
}

/* --- Profile Popup Styles --- */
.modal-overlay {
  position: fixed;
  top: 0; left: 0; width: 100%; height: 100%;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.modal-content {
  background: white;
  padding: 20px;
  border-radius: 12px;
  width: 90%;
  max-width: 400px;
  box-shadow: 0px 5px 15px rgba(0,0,0,0.3);
}

/* --- Feed Avatar Styles --- */
.log-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 5px;
}

.feed-avatar {
  width: 35px;
  height: 35px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #eaddc5;
}

/* --- Edit Log Button --- */
.action-buttons {
  display: flex;
  align-items: center;
  gap: 5px;
}

.edit-btn {
  background-color: #f0e6d2;
  color: #8b5a2b;
  border: 1px solid #8b5a2b;
  border-radius: 6px;
  padding: 6px 12px;
  cursor: pointer;
  font-weight: bold;
  font-size: 12px;
  transition: all 0.2s;
}

.edit-btn:hover {
  background-color: #8b5a2b;
  color: white;
}

/* --- Streak Badge --- */
.streak-badge {
  font-size: 12px;
  background-color: #ffefc2;
  color: #d97706;
  padding: 2px 6px;
  border-radius: 12px;
  border: 1px solid #f59e0b;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-top: 5px;
  font-weight: bold;
}