/* Base styles */
html, body {
font-family: Arial, sans-serif;
text-align: center;
margin: 0;
padding: 20px;
background-color: #f4f4f4;
height: 100vh;
}

main {
margin: 0;
padding: 0;
}

/* Center and constrain the main app container */
#app {
max-width: 700px;       /* limits width */
margin: 0 auto;      /* centers horizontally with vertical spacing */
padding: 20px;
background: #fff;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Main heading */
#app h1 {
font-size: 3rem;
margin-bottom: 2rem;
}

/* Scoreboard layout */
#scoreboard {
display: flex;
justify-content: space-around; /* space between players */
gap: 3rem;
margin-bottom: 20px;
}

.player-container{
display: flex;
flex-direction: row;
justify-content: center;
padding-top: 2rem;
}

/* Individual player container */
.player {
text-align: center;
border: 1px solid black;
padding: 20px;
width: 300px;
border-radius: 8px;
background-color: #e0ffe0; /* subtle greenish background */
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

/* Player name */
.player h2 {
font-weight: bold;
text-decoration: underline;
margin-bottom: 1rem;
font-size: 2rem;
}

/* Player score */
.player p {
font-size: 5rem;
margin: 0 0 1rem 0;
color: #333;
}

/* Buttons */
button {
padding: 10px 20px;
margin: 0 10px 10px 10px;
font-size: 40px;
cursor: pointer;
border: none;
background-color: #4CAF50;
color: white;
border-radius: 5px;
transition: background-color 0.3s ease;
}

/* Hover effect for buttons */
button:hover {
background-color: purple;
}

/* Reset button styling */
#resetButton {
margin-top: 20px;
background-color: #f44336;
padding: 12px 40px;
font-size: 32px;
margin-bottom: 3rem;
}

#resetButton:hover {
background-color: #e6352d;
}

/* Footer credit */
.bahins p {
color: blue;
font-size: 2rem;
margin-top: -2rem;
}