/* Ensure the full height is available */
html, body {
  height: 100%;
  margin: 0;
}

body {
    font-family: Arial, sans-serif;
    background-color: #000000b9;
    overscroll-behavior: none;
}

/* Styling for player cards */
.card {
  background-color: #6d6d6d;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5); /* Drop shadow */
}

.card img.rounded-circle {
  width: 100px;
  height: 100px;
  object-fit: cover; /* Ensures the image fills the given dimensions */
}

/* Styling for the score */
.score {
  font-weight: normal;
  color: rgb(0, 0, 0);
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); /* Add a subtle shadow for depth */
}

/* Styling for the match score */
.match-score {
  color: rgb(192, 192, 192);
  font-size: 1rem;
  font-style: italic;
  text-shadow: none;
}


/* Styling for the game scores section */
.game-scores-section .score-list {
  max-height: 200px;
  overflow-y: auto;
}

/* Styling for the score display in the dialer */
.score-display {
    color: rgb(192, 192, 192);
}

/* Styling for the keypad */
.keypad {
   margin-top: 0px;
}

/* Styling for the collapsible score input*/
#scoreInput {
  border: 2px solid #252525;  /* Border color and thickness */
  padding: 10px;           /* Padding inside the border */
  border-radius: 20px;      /* Rounded corners */
  margin: 10px auto;       /* Center horizontally and add vertical spacing */
  max-height: 70vh;        /* Ensure it doesn't exceed 70% of viewport height */
  font-size: 0.9rem;       /* Slightly smaller text */
  width: 80%;
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.7); /* Glow effect */
}

/* Adjust the score display */
#scoreInput .score-display {
  font-size: 2.5rem; /* Smaller than before if needed */
  padding: 0px;
  margin-bottom: 0px;
}

/* Adjust keypad buttons */
#scoreInput .keypad button {
  padding: 8px 4px;  /* reduce padding */
  font-size: 1rem;   /* smaller button text */
}

/* Optionally, use a media query for very small screens */
/* @media (max-height: 700px) {
  #scoreInput {
    max-height: 60vh;
    font-size: 0.8rem;
  }
  #scoreInput .score-display {
    font-size: 1rem;
  }
  #scoreInput .keypad button {
    padding: 6px 3px;
    font-size: 0.9rem;
  }
} */

/* Menu styling */
.menu {
  display: none;
  flex-direction: column;
  background-color: #333;
  position: absolute;
  top: 0;
  right: 0;
  width: 200px;
  height: 100%;
  padding-top: 60px;
  z-index: 1050; /* Ensure the menu is in front */
}

.menu a {
  padding: 10px;
  text-decoration: none;
  color: rgb(192, 192, 192);
  display: block;
}

.menu a:hover {
  background-color: #575757;
}

.menu-btn {
  font-size: 30px;
  cursor: pointer;
  color: rgb(128, 128, 128);
}

.menu-btn-container {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 1300; /* Updated to be above pull-container */
}

/* The hands container now simply takes up the remaining space */
.hands-container {
  flex: 1;                       /* use all remaining vertical space */
  display: flex;
  flex-direction: column;
}

/* The score section fills its container */
.hands-scores-section {
  flex: 1;                          /* fills the remaining space in the hands-container */
  background-color: #6d6d6d;
  overflow: hidden;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
  border-radius: .25rem;
  margin: 0 0 2rem;  /* 1rem margin at left, right, and bottom */
}

.hands-scores-section .score-list {
  height: 100%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch; /* smooth, native scrolling on iOS */
  padding-bottom: 30px; /* extra space so the last item is fully visible */
  box-sizing: border-box;
}

.hands-scores-section .list-group-item {
  background-color: #6d6d6d;
  border: none;
  color: rgb(192, 192, 192);
}

/* The main container gets internal padding so content never touches screen edges */
.container {
  display: flex;
  flex-direction: column;
  height: 100vh;        /* full viewport height */
  padding: 1rem;        /* 1rem padding all around */
  box-sizing: border-box;
}

/* Player section can have bottom margin to separate it from the hands section */
.player-section {
  margin-bottom: 1rem;
}

/* Hands heading style – adjust margin if needed */
.hands-container h2 {
  margin: 0;     /* No extra margin since the container gap provides spacing */
  font-size: 1.5rem;
  font-weight: normal;
  color: rgb(216, 216, 216);
  text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.5);
}

.winner-btn {
    box-shadow: 0 4px 6px rgba(0,0,0,0.3);
    border-radius: 20px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    animation: glow 1.5s infinite;
}

.winner-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 8px rgba(0,0,0,0.4);
}

h2.text-left {
    font-size: 1.5rem;              /* Increase font size */
    font-weight: normal;            /* Make the text bold */
    color: rgb(128, 128, 128);                  /* Use a white color (or another color that fits your design) */
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); /* Add a subtle shadow for depth */
    margin-bottom: 0rem;        /* Space below the heading */
}

@keyframes glow {
  0% {
    box-shadow: 0 0 5px #fff;
  }
  50% {
    box-shadow: 0 0 20px #ff0, 0 0 30px #ff0;
  }
  100% {
    box-shadow: 0 0 5px #fff;
  }
}

/* Add a new keyframe animation for the spinner glow */
@keyframes glow-spinner {
  0% {
    box-shadow: 0 0 5px #007aff;
  }
  50% {
    box-shadow: 0 0 20px #ff0;
  }
  100% {
    box-shadow: 0 0 5px #007aff;
  }
}

#pull-container {
  position: fixed; /* remains fixed */
  top: 0;
  left: 0;
  right: 0;
  height: 60px;
  display: flex;
  align-items: flex-start; /* Changed from center to flex-start */
  justify-content: center;
  transform: translateY(0); /* Changed from -60px to 0 to position at the top */
  transition: transform 0.2s ease-out;
  z-index: 1200; /* Ensure it's on top */
}

/* Updated Refresh Spinner: Larger size */
#spinner {
  position: fixed; /* Added to fix position relative to viewport */
  top: 0;
  left: 44%;
  transform: translate(-50%, 0); /* Ensure the spinner's center is at 50% */
  width: 40px;
  height: 40px;
  border: 5px solid #ccc;
  border-top: 5px solid #007aff;
  border-radius: 50%;
  animation: spin 1s linear infinite, glow-spinner 1.5s ease-in-out infinite;
  display: none;
  z-index: 1200; /* Ensure it's on top */
}

/* Existing spin animation keyframes */
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

table.table-dark {
  background-color: #6d6d6d !important;
}

table.table-dark,
table.table-dark thead,
table.table-dark tbody,
table.table-dark tr,
table.table-dark td,
table.table-dark th {
  color: rgb(228, 228, 228);
  background-color: rgb(128, 128, 128);
  border-color: rgb(192, 192, 192);
}

/* Add a border around the entire table */
table.table-dark {
  border-radius: 5px; /* Optional: Add rounded corners */
  overflow: hidden; /* Ensure rounded corners are visible */
}

.modal,
.modal-backdrop {
  z-index: 10550 !important;
}

.modal-backdrop.show {
  background-color: rgba(128, 128, 128, 0.8);
}

.modal-content {
  background-color: rgb(128, 128, 128);
  color: #fff;
  border: none;
}

/* Adjust the z-index so that the modal is on top of the backdrop */
.modal-backdrop {
  z-index: 10550 !important;
}

.modal {
  z-index: 10560 !important;
}