/* InfoBoard Styles */
.infoboard-container {
  position: absolute;
  bottom: 33%;
  left: 50%;
  transform: translateX(-50%);
  width: 90%;
  max-width: 500px;
  background-color: rgba(255, 255, 255, 0.95); /* Match pitchboard/menuboard */
  /* backdrop-filter: blur(5px); Removed */
  border-radius: 12px 12px 0 0;
  padding: 0; /* Padding will be on title/content areas */
  z-index: 100;
  border: 2px solid rgba(173, 216, 230, 0.5); /* Light blue border */
  border-bottom: none; /* Due to 0 0 radius for bottom */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); /* Consistent shadow */
  color: #333; /* Default dark grey text */
  margin-bottom: 0;
  display: none;
  /* Hide by default */
}

.infoboard-title {
  padding: 12px 15px;
  background-color: rgba(173, 216, 230, 0.3); /* Light blue background */
  border-bottom: 2px solid rgba(40, 197, 250, 0.7); /* Darker blue border */
  color: #222; /* Darker text for title */
  text-align: center;
  margin-bottom: 10px; /* Spacing before items */
  font-size: 1.3rem; /* Consistent font size */
  font-weight: 700; /* Consistent font weight */
  letter-spacing: normal; /* Reset letter spacing */
  text-transform: none; /* Reset text transform */
}

.infoboard-content { /* Added a content wrapper for padding */
  padding: 0 15px 15px; /* Padding for items */
  max-height: calc(70vh - 100px); /* Adjust based on title height */
  overflow-y: auto;
}

.infoboard-item {
  background: transparent; /* Transparent background */
  border-radius: 6px;
  padding: 8px 12px;
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: none; /* Remove individual border */
  border-bottom: 1px solid rgba(173, 216, 230, 0.3); /* Separator line */
  transition: all 0.2s ease;
}

/* Add these new style rules for child elements */
.infoboard-item .rank {
  background-color: #ADD8E6; /* Light blue accent */
  color: #333; /* Dark text for contrast */
  border-radius: 50%;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 0.9em;
  margin-right: 10px;
}

.infoboard-item .name {
  color: #555; /* Dark grey for name */
  flex-grow: 1;
}

.infoboard-item .score {
  color: #87CEEB; /* Sky blue for score */
  font-weight: bold;
  margin-left: 10px;
}

/* Enhance hover effect for items */
.infoboard-item:hover {
  background: rgba(173, 216, 230, 0.1); /* Very light blue on hover */
  transform: translateY(-2px);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); /* Subtle shadow */
}