/* QUARTRLY SCORES */

.table-quarter-scores {
  width: 100%;
  text-align: center;
  font-size: 15px;
}

.table-quarter-scores th {
 
  color: #fff;
  font-weight: bold;
}

.table-quarter-scores td {
  padding: 8px;
}



.table-quarter-scores img {
  vertical-align: middle;
  margin-right: 8px;
  border-radius: 50%;
}


.table-custom-responsive {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch; /* smooth scroll on mobile */
  width: 100%;
}

/* QUARTRLY SCORES END */


.table-roster {
  border-collapse: collapse;
  width: 100%;
}

.table-roster th,
.table-roster td {
  padding: 8px;
  text-align: center;
  white-space: nowrap;
}

/* Sticky NAME column */
.table-roster td:nth-child(2),
.table-roster th:nth-child(2) {
  position: sticky;
  left: 0px; /* adjust based on N0 column width */
  background: #fff;
  z-index: 2;
  text-align: left;
}

/* Sticky header row (stats only, not team heading) */
.table-roster thead tr:not(.team-heading) th {
  position: sticky;
  top: 0;
  background: #eee;
  z-index: 3;
}

/* Team heading row should not be sticky */
.table-roster thead .team-heading th {
  position: static;
  background: rgb(129, 9, 204);
  color: #fff;
  text-align: left;
  font-weight: bold;
}

@media (max-width: 991.98px) {
	.table-roster tbody td:nth-child(1) {
		min-width: 0px;
    text-align: left;
    padding-left: 5px;
	}
	.table-roster tbody td:nth-child(2) {
		min-width: 120px;
	}
	.table-roster tbody td:nth-child(3) {
		min-width: 10px;
	}
}


 /* Sticky logic for T-HEADS */
.sticky-cols{
    position: sticky;
    top: -0;
    z-index: 10;
    min-width: 100px;
    background-color: #fff !important;

}


/* TOP PERFORMERS */

/* Card container */
.stat-card {
    max-width: 1140px;
    margin: 0 auto 40px auto;
    width: 100%;
    padding: clamp(8px, 2vw, 20px);   /* responsive padding */
    transform-origin: top center;
}

.stats-wrapper {
    background: linear-gradient(135deg, #1a1a2e, #16213e);
    padding: clamp(10px, 3vw, 20px);
    border-radius: clamp(8px, 1.5vw, 12px);
    box-shadow: 0 4px 20px rgba(0,0,0,0.05);
    font-size: clamp(0.65rem, 1.2vw, 1rem); /* global scaling */
}

/* Rows for each stat category */
.leader-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: clamp(10px, 2vw, 15px) 0;
    margin: 0;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    gap: clamp(6px, 1vw, 12px);
}

/* Player image */
.leader-img {
    flex-shrink: 0;
    width: clamp(40px, 6vw, 80px);
    height: clamp(40px, 6vw, 80px);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.leader-img img {
    width: 100%;
    height: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 50%;
    border: 2px solid #fff;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Hover effect */
.leader-img:hover img {
    transform: scale(1.08);
    box-shadow: 0 0 12px rgba(227, 169, 10, 0.6);
}

.leader-team {
    display: flex;
    align-items: center;
    flex: 1;
    min-width: 0;
    gap: clamp(4px, 1vw, 10px);
}

.team-left { flex-direction: row-reverse; text-align: right; }
.team-right { flex-direction: row; text-align: left; }

/* Player info */
.stat-card .leader-info {
    flex: 1;
    min-width: 0;
    padding: 0 clamp(6px, 1vw, 15px);
}

/* Player name and stats — NO TRUNCATION */
.stat-card .leader-name,
.stat-card .leader-stat,
.stat-card .stat-detail {
    white-space: nowrap;             /* keep on one line */
    overflow: visible;               /* no cutting */
    text-overflow: clip;             /* no ellipsis */
}

/* Responsive font scaling */
.stat-card .leader-name {
    font-size: clamp(0.65rem, 1.2vw, 1rem);
    font-weight: 600;
}

.stat-card .leader-stat {
    font-size: clamp(0.7rem, 1.5vw, 1.2rem);
    font-weight: bold;
}

.stat-card .stat-detail {
    font-size: clamp(0.6rem, 1vw, 0.9rem);
}

/* Category pill */
.stat-card .leader-category {
    flex: 0 0 clamp(50px, 10vw, 120px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 0 clamp(6px, 2vw, 20px);
}

.stat-card .category-icon {
    font-size: clamp(1.2rem, 3vw, 2.2rem);
    line-height: 1;
    margin-bottom: clamp(4px, 1vw, 8px);
    display: flex;
    align-items: center;
    justify-content: center;
}

.stat-card .category-pill h6 {
    margin: 0;
    font-size: clamp(0.65rem, 1.5vw, 1rem);
    text-transform: uppercase;
    text-align: center;
}

/* Team names header */
.stat-card .teams-header {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: clamp(60px, 15vw, 200px);
    margin-bottom: clamp(15px, 2vw, 25px);
}

.stat-card .team-name {
    font-weight: bold;
    font-size: clamp(0.9rem, 2vw, 1.4rem);
    color: aliceblue;
    text-transform: uppercase;
}

/* Responsive mobile tweaks */
@media (max-width: 768px) {
  .stat-card .leader-row {
    gap: 2px;
    padding: 8px 0;
  }

  .stat-card .leader-header {
   gap: 50px;
  }

  .stat-card .leader-img {
    flex: 0 0 60px;
    width: 60px;
    height: 60px;
  }

  .stat-card .leader-name {
    font-size: 0.7rem;
  }

  .stat-card .leader-stat {
    font-size: 0.75rem;
  }

  .stat-card .stat-detail {
    font-size: 0.6rem;
  }

  .stat-card .leader-category {
    flex: 0 0 35px;
  }

  .stat-card .category-icon {
    font-size: 1.2rem;
  }
}

/* Final score cell highlight */


.table-quarter-scores h6 {
  font-size: 1rem; /* same as normal table text */
      /* green highlight */
  margin: 0;         /* remove heading spacing */
}





  /* Apply to the standings table */
.table-standings {
    table-layout: auto;
    font-family: "Arial Narrow", sans-serif; /* Condensed font saves 20% space */
    font-size: 11px;
}

/* Force numeric columns to be thin */
.table-standings th:nth-child(n+3), 
.table-standings td:nth-child(n+3) {
    width: 35px !important;
    min-width: 30px;
    padding: 8px 2px !important; /* Extremely tight side padding */
    text-align: center;
}

/* Ensure the Team Name column takes up the remaining space */
.team-inline {
    min-width: 120px;
    text-align: left !important;
}

/* Make headers wrap if they are long */
.table-standings thead th {
    white-space: normal;
    line-height: 1;
    vertical-align: bottom;
    padding-bottom: 5px;
}

/* Responsive fix: If screen is too small, allow horizontal scroll */
.table-custom-responsive {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Progress Bar*/

.progress-circle-fg-new {
  fill: none;
  stroke: #35ad79; /* Your Green */
  stroke-width: 8;
  stroke-linecap: round;
  /* Circumference = 2 * pi * 70 (approx 440) */
  stroke-dasharray: 440; 
  /* This calculation moves the line based on the --percent variable */
  stroke-dashoffset: calc(440 - (440 * var(--percent)) / 100);
  transform: rotate(-90deg);
  transform-origin: center;
  transition: stroke-dashoffset 0.8s ease-out;
}

.progress-circle-fg-new-opponent {
  fill: none;
  stroke: #3B7CC0; /* Your Green */
  stroke-width: 8;
  stroke-linecap: round;
  /* Circumference = 2 * pi * 70 (approx 440) */
  stroke-dasharray: 440; 
  /* This calculation moves the line based on the --percent variable */
  stroke-dashoffset: calc(440 - (440 * var(--percent)) / 100);
  transform: rotate(-90deg);
  transform-origin: center;
  transition: stroke-dashoffset 0.8s ease-out;
}

.progress-circle-bg {
  fill: none;
  stroke: #e6e6e6;
  stroke-width: 8;
}





/* 1. Add a transition to the container for a smooth lift */
.progress-bar-radial {
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    cursor: pointer;
}

/* 2. Scale up and brighten on hover */
.progress-bar-radial:hover {
    transform: scale(1.1); /* Slight "pop" effect */
}

/* 3. Make the progress line glow on hover */
.progress-bar-radial:hover .progress-circle-fg-new {
    stroke: #42d392; /* A slightly brighter version of your green */
    filter: drop-shadow(0 0 5px rgba(66, 211, 146, 0.6));
    stroke-width: 10; /* Make the bar thicker on hover */
}

/* 4. Optional: Make the percentage text bold on hover */
.progress-bar-radial:hover .progress-circle-counter {
    color: #f4f4f4;
    font-weight: 800;
    text-shadow: 0px 0px 10px rgba(53, 173, 121, 0.2);
}






/* Game Schedule for International Game*/
@media (max-width: 768px) {
  .game-info-middle {
    display: flex !important;
    flex-direction: column !important;   /* stack neatly */
    align-items: center !important;
    gap: 12px !important;                /* spacing between buttons */
  }

  .button-share-outline,
  .button-primary {
    display: inline-flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;             /* equal width for both */
    text-align: center !important;
    padding: 8px 12px !important;
    margin: 10 auto !important;
  }

  .game-info-share {
    display: flex !important;
    justify-content: center !important;
    gap: 6px !important;
    margin-top: 6px !important;
    padding: 0 !important;
  }

  .game-info-share-item {
    list-style: none !important;
  }
}