/* Import Google Font */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
/* Basic Reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
/* Ensure html & body occupy full screen height */
html, body {
  margin: 0;
  padding: 0;
  min-height: 100%;
}
/* Apply Google Font and full-screen background */
body {
  font-family: 'Roboto', sans-serif;
  background: url("images/stadium_bg.jpg") no-repeat center center fixed;
  background-size: cover;
  color: #333;
  line-height: 1.6;
}
/* Hero / Header Section */
.hero {
  position: relative;
  width: 100%;
  height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  text-align: center;
  margin-bottom: 30px;
  border-radius: 10px;
  overflow: hidden;
}
.hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.4);
  z-index: 1;
}
.hero-content {
  position: relative;
  z-index: 2;
}
.hero-content h1 {
  font-size: 2.5rem;
  margin-bottom: 10px;
}
.hero-content p {
  font-size: 1.2rem;
}
/* Main Container */
.container {
  max-width: 1200px;
  margin: auto;
  padding: 20px;
  background-color: transparent;
  border-radius: 10px;
}
/* Fade In Animation */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
.fade-in {
  animation: fadeIn 1s ease-in;
}
/* Buttons */
button, .action-btn {
  background-color: #4CAF50;
  color: #fff;
  border: none;
  padding: 10px 20px;
  margin: 10px 0;
  cursor: pointer;
  border-radius: 5px;
  transition: background-color 0.3s ease, transform 0.3s ease;
}
button:hover, .action-btn:hover {
  background-color: #45a049;
  transform: scale(1.05);
}
/* Tables */
table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 20px;
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
table th, table td {
  padding: 12px;
  text-align: center;
  font-size: 14px;
  border-bottom: 1px solid #eee;
}
table th {
  background-color: #333;
  color: #fff;
  position: sticky;
  top: 0;
  z-index: 1;
}


table tbody tr:nth-child(odd) {
  background-color: #f9f9f9;
}
table tbody tr:hover {
  background-color: #eaeaea;
  transition: background-color 0.3s ease;
}
/* Scoreboard Styling for Expert Predictions */
.scoreboard-container {
  width: 100%;
  max-width: 800px;
  margin: 40px auto;
  text-align: center;
  border-radius: 30px;
  overflow: hidden;
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}
.scoreboard-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #4b0082;
  padding: 10px 20px;
}
.scoreboard-title {
  font-size: 1.4rem;
  font-weight: bold;
  color: #fff;
}
.scoreboard-subtitle {
  font-size: 1rem;
  color: #fff;
}
.scoreboard-table {
  width: 100%;
  border-collapse: collapse;
}
.scoreboard-table thead {
  background-color: #4b0082;
}
.scoreboard-table th {
  color: #fff;
  padding: 12px;
  border: none;
  font-size: 1rem;
}
.scoreboard-table td {
  padding: 12px;
  border: none;
  font-size: 1rem;
  color: #fff;
}
.scoreboard-table tbody tr:nth-child(odd) {
  background-color: #5c0099;
}
.scoreboard-table tbody tr:nth-child(even) {
  background-color: #6a0dad;
}
/* Team Box Styling for Prediction Form */
.team-box {
  display: inline-block;
  padding: 10px 15px;
  margin: 5px;
  border-radius: 5px;
  color: #fff;
  cursor: pointer;
  text-align: center;
  font-weight: bold;
  transition: transform 0.2s;
}
.team-box:hover {
  transform: scale(1.05);
}
.team-box.selected {
  border: 4px solid #fff;
  box-shadow: 0 0 8px 2px rgba(255, 255, 255, 0.8);
}
/* Game Label Styling */
.game-label {
  display: inline-block;
  background-color: #4b0082;
  color: #fff;
  padding: 8px 12px;
  border-radius: 4px;
  margin-right: 10px;
  font-weight: bold;
}
/* Additional styling for .selected-team */
.selected-team {
  margin-left: 10px;
  font-weight: bold;
  color: #333;
}
/* Input Field for Name */
#name {
  width: 33%;
  font-size: 1rem;
  padding: 8px;
  border: 2px solid #ccc;
  border-radius: 4px;
}
/* Ticker/Acknowledgment Section */
.ticker {
  background-color: #4b0082;
  color: #fff;
  padding: 20px;
  margin-top: 20px;
  text-align: center;
  border-radius: 5px;
  font-weight: bold;
  font-size: 1.3rem;
}
.ticker .ticker-message {
  margin-bottom: 10px;
}
.ticker .action-btn {
  margin-top: 10px;
  font-size: 1rem;
}
/* Violet Headings & Labels for Prediction Form */
.violet-heading {
  display: inline-block;
  background-color: #4b0082;
  color: #fff;
  padding: 10px 15px;
  border-radius: 5px;
  font-weight: bold;
  margin-bottom: 20px;
}
.violet-heading-sub {
  display: inline-block;
  background-color: #4b0082;
  color: #fff;
  padding: 8px 12px;
  border-radius: 4px;
  font-weight: bold;
  margin: 15px 0 10px 0;
}
.violet-label {
  display: inline-block;
  background-color: #4b0082;
  color: #fff;
  padding: 8px 12px;
  border-radius: 4px;
  font-weight: bold;
  margin-bottom: 10px;
}
/* New Header Classes for Finals Prediction Table */

.rank-header {
  background-color: #FFA07A;
  color: #000;
  font-weight: bold;
  padding: 8px;
}
.finalist-header {
  background-color: #FFA07A;
  color: #000;
  font-weight: bold;
  padding: 8px;
}
.winner-header {
  background-color: #FFA07A;
  color: #000;
  font-weight: bold;
  padding: 8px;
}
.cap-header {
  background-color: #FFA07A;
  color: #000;
  font-weight: bold;
  padding: 8px;
}
/* Finals Prediction Table */
#finalsPredictionTable {
  table-layout: fixed;
  width: 100%;
}
#finalsPredictionTable th,
#finalsPredictionTable td {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* ✅ Freeze First Column Styling */
#finalsPredictionTable th:first-child,
#finalsPredictionTable td:first-child {
  position: sticky;
  left: 0;
  z-index: 2;
  background-color: #ffffff; /* Matches table background */
  color: #000;
  min-width: 150px; /* Optional: adjust width */
  box-shadow: 2px 0 5px rgba(0,0,0,0.1);
}
#finalsPredictionTable th:first-child {
  background-color: #333; /* Dark header */
  color: #fff;
  z-index: 3;
}
/* Desktop Column Widths */
#finalsPredictionTable th:nth-child(1),
#finalsPredictionTable td:nth-child(1) {
  width: 20%;
}
#finalsPredictionTable th:nth-child(2),
#finalsPredictionTable td:nth-child(2),
#finalsPredictionTable th:nth-child(3),
#finalsPredictionTable td:nth-child(3),
#finalsPredictionTable th:nth-child(4),
#finalsPredictionTable td:nth-child(4),
#finalsPredictionTable th:nth-child(5),
#finalsPredictionTable td:nth-child(5) {
  width: 8%;
}
#finalsPredictionTable th:nth-child(6),
#finalsPredictionTable td:nth-child(6),
#finalsPredictionTable th:nth-child(7),
#finalsPredictionTable td:nth-child(7),
#finalsPredictionTable th:nth-child(8),
#finalsPredictionTable td:nth-child(8) {
  width: 8%;
}
#finalsPredictionTable th:nth-child(9),
#finalsPredictionTable td:nth-child(9),
#finalsPredictionTable th:nth-child(10),
#finalsPredictionTable td:nth-child(10) {
  width: 12%;
}
.table-scroll {
  overflow-x: auto;
  overflow-y: visible;
  max-width: 100%;
  position: relative;
}


/* Rank Sections in Prediction Form */
.rank-section {
  margin-bottom: 15px;
}
.rank-header {
  width: 100%;
  background-color: #4b0082;
  color: #fff;
  padding: 8px;
  border-radius: 4px;
  font-weight: bold;
  text-align: center;
  margin-bottom: 5px;
}
.rank-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-bottom: 10px;
}
.rank-container .team-box {
  flex: 0 0 calc(20% - 10px);
  margin: 5px;
}
/* Mobile Optimization */
@media (max-width: 768px) {
  .container {
    padding: 10px;
  }
  table th, table td {
    padding: 8px;
    font-size: 12px;
  }
  #predictionRecordDiv, #leaderboardTable, #finalsPredictionTable {
    display: block;
    overflow-x: auto;
  }
  #name {
    width: 100%;
  }
  .violet-heading, .violet-heading-sub {
    display: block;
    text-align: center;
  }
  .rank-container {
    flex-wrap: wrap;
    justify-content: space-between;
    margin-bottom: 10px;
  }
  .rank-container .team-box {
    flex: 0 0 calc(20% - 10px);
    margin: 5px;
  }
  .rank-section {
    margin-bottom: 15px;
  }
  .rank-header {
    width: 100%;
    background-color: #4b0082;
    color: #fff;
    padding: 8px;
    border-radius: 4px;
    font-weight: bold;
    text-align: center;
    margin-bottom: 5px;
  }
  #finalsPredictionTable {
    table-layout: auto !important;
    width: auto !important;
  }
  #finalsPredictionTable th, #finalsPredictionTable td {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  #finalsPredictionTable th:nth-child(9),
  #finalsPredictionTable td:nth-child(9),
  #finalsPredictionTable th:nth-child(10),
  #finalsPredictionTable td:nth-child(10) {
    white-space: normal !important;
    min-width: 80px;
  }
}
@media (max-width: 480px) {
  body {
    font-size: 14px;
  }
  .team-box {
    padding: 8px 10px;
    font-size: 0.9rem;
  }
  .ticker {
    font-size: 1.1rem;
  }
  #finalsPredictionTable th, 
  #finalsPredictionTable td {
    padding: 4px;
    font-size: 10px;
  }
}
/* Rules Table */
.rules-section {
  margin-bottom: 20px;
}
.rules-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 10px;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
.rules-table caption {
  font-size: 1.2rem;
  font-weight: bold;
  padding: 10px;
  background-color: #4b0082;
  color: #fff;
}
.rules-table td {
  padding: 10px;
  border: 1px solid #4b0082;
  background-color: #e0d4f5;
  color: #333;
  font-weight: bold;
  text-align: left;
  font-size: 0.95rem;
}

/* Statistics Container */
#statisticsContainer {
  margin-bottom: 40px;
  width: 100%;
  padding: 0 10px;
  box-sizing: border-box;
  background: transparent; /* no background color */
  border-radius: 8px;
  padding: 20px;
}


/* Statistics Header */
#statisticsContainer h2 {
  text-align: center;
  margin-bottom: 20px;
  font-size: 1.5em;
  color: #333;
}

/* Statistics Table */
#statisticsTable th,
#statisticsTable td {
  padding: 8px 12px;
  text-align: center;
}

/* Chart Container */
.chart-container {
  width: 100%;
  max-width: 700px; /* Limits size on desktops */
  margin: 20px auto;
  padding: 0 10px;
  box-sizing: border-box;
}

/* Chart Header (Above each graph) */
.chart-header {
  background-color: #4b0082; /* Dark violet */
  color: #ffffff;
  padding: 12px 15px;
  font-weight: bold;
  text-align: center;
  font-size: 1.2em;
  border-radius: 8px;
  margin-bottom: 15px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15);
}

/* Chart Canvas (the actual chart) */
.chart-container canvas {
  width: 100% !important;
  height: auto !important;
  display: block;
  margin: 0 auto;
  max-height: 400px; /* Limit height for consistency */
}

/* Responsive Tweaks for Mobile */
@media (max-width: 600px) {
  .chart-container {
    padding: 0 5px;
  }

  .chart-header {
    font-size: 1em;
    padding: 10px 12px;
  }

  .chart-container canvas {
    max-height: 300px; /* Shorter height for smaller screens */
  }
}


/* Mobile Friendly Tweaks */
@media (max-width: 600px) {
  .chart-container {
    padding: 0 5px;
  }

  .chart-header {
    font-size: 1em;
    padding: 10px 12px;
  }
}


/* COMMENTS CONTAINER STYLING */
.comments-container {
  margin-top: 30px;
  padding: 20px;
  background-color: rgba(0, 0, 0, 0.7); /* Semi-transparent dark background */
  border-radius: 10px;
  color: #fff; /* White text for contrast */
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

.comments-container h2 {
  margin-bottom: 15px;
  color: #ffffff;
  font-size: 24px;
  font-weight: bold;
  text-align: center;
}

.comment-item {
  margin-bottom: 15px;
  padding: 10px;
  background-color: rgba(255, 255, 255, 0.1); /* Light transparent background */
  border-radius: 5px;
  font-size: 16px;
  line-height: 1.4;
}

.comment-item strong {
  color: #FFD700; /* Gold color for the name */
  font-weight: bold;
}

.comment-item time {
  font-size: 12px;
  color: #ccc;
  margin-left: 10px;
}

/* General fix for table text alignment */
#finalsPredictionTable td:first-child,
#finalsPredictionTable th:first-child,
#leaderboardTable td:first-child,
#leaderboardTable th:first-child {
  text-align: left;      /* Align text to the left */
  padding-left: 15px;    /* Add padding to create space from the border */
}

/* Optional: Reduce extra padding on mobile */
@media (max-width: 600px) {
  #finalsPredictionTable td:first-child,
  #finalsPredictionTable th:first-child,
  #leaderboardTable td:first-child,
  #leaderboardTable th:first-child {
    padding-left: 10px;
    font-size: 0.9em;  /* Slightly reduce font size for mobile */
  }
}



#statisticsContainer {
  display: flex;
  flex-direction: column;
  align-items: center; /* Center contents horizontally */
}

h2.statistics-title {
  background-color: #4b0082 !important;  /* Dark violet */
  color: #ffffff !important;             /* Force white text */
  padding: 12px 15px;
  font-weight: bold;
  text-align: center;
  font-size: 1.5em;
  border-radius: 8px;
  margin-bottom: 20px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15);
}

/* Glow effect for Top 3 Predictors */

/* Top Rank Styles */
.top-predictor {
  color: #ffd700;
  font-weight: bold;
  text-shadow: 0 0 8px #ffd700, 0 0 16px #ffa500;
  animation: pulseGlow 1.5s infinite;
}

.second-predictor {
  color: #c0c0c0;
  font-weight: bold;
}

.third-predictor {
  color: #cd7f32;
  font-weight: bold;
}

@keyframes pulseGlow {
  0% {
    text-shadow: 0 0 5px #ffd700, 0 0 10px #ffa500;
  }
  50% {
    text-shadow: 0 0 20px #ffd700, 0 0 40px #ffa500;
  }
  100% {
    text-shadow: 0 0 5px #ffd700, 0 0 10px #ffa500;
  }
}

.top-rank-gold {
  background: linear-gradient(90deg, #FFD700, #FFEF8B);
}

.top-rank-silver {
  background: linear-gradient(90deg, #C0C0C0, #E0E0E0);
}

.top-rank-bronze {
  background: linear-gradient(90deg, #CD7F32, #E6B57E);
}


.scoreboard-streaks {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin-bottom: 15px;
  margin-top: 20px;  /* Add space between "EXPERT RANKINGS" and streaks */
  padding: 10px;
}

.streak-box {
  background-color: #4b0082;  /* Violet */
  color: white;
  font-weight: bold;
  padding: 12px 18px;
  border-radius: 12px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
  width: 90%;
  max-width: 500px;
  text-align: center;
  font-size: 1em;
  border: 2px solid white;

  opacity: 0;
  transform: translateY(-10px);
  animation: fadeSlideIn 0.6s ease-out forwards;
}



.streak-label {
  color: #FFD700;
  margin-right: 8px;
}

.streak-value {
  font-size: 1.1em;
  color: #fff;
}

/* 🔥 Enhanced Streak Display Styling */
#streakStats {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 15px auto 25px auto;
  text-align: center;
  font-weight: bold;
  font-size: 1.1em;
}

.streak-badge {
  display: inline-block;
  background: rgba(255, 255, 255, 0.1);
  border: 2px solid #fff;
  border-radius: 12px;
  padding: 8px 18px;
  margin: 6px 0;
  color: #fff;
  box-shadow: 0 0 10px rgba(255,255,255,0.15);
  font-family: 'Segoe UI', sans-serif;
  backdrop-filter: blur(4px);
}

.streak-badge span.emoji {
  font-size: 1.3em;
  margin-right: 8px;
  vertical-align: middle;
}

@keyframes fadeSlideIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 🔥 Pulsing glow for Longest Hit Streak */
.streak-box.hit-glow {
  box-shadow: 0 0 10px #ffd700, 0 0 20px #ff9900;
  border: 2px solid #ffd700;
  /* Run fadeSlideIn then pulseGlowHit continuously */
  animation: 
    fadeSlideIn 0.6s ease-out forwards,      /* fade in from transparent */
    pulseGlowHit 1.5s infinite ease-in-out 0.6s;  /* start pulsing after 0.6s */
}

@keyframes pulseGlowHit {
  0% {
    box-shadow: 0 0 10px #ffd700, 0 0 20px #ff9900;
  }
  50% {
    box-shadow: 0 0 30px #ffd700, 0 0 60px #ffa500;
  }
  100% {
    box-shadow: 0 0 10px #ffd700, 0 0 20px #ff9900;
  }
}

/* 💀 Pulsing red glow for Longest Miss Streak */
.streak-box.miss-glow {
  box-shadow: 0 0 10px #ff4d4d, 0 0 20px #ff1a1a;
  animation: 
    fadeSlideIn 0.6s ease-out forwards,    /* fade in */
    pulseGlowMiss 1.5s infinite ease-in-out 0.6s; /* red glow after fade */
  border: 2px solid #ff4d4d;
}

@keyframes pulseGlowMiss {
  0% {
    box-shadow: 0 0 10px #ff4d4d, 0 0 20px #ff1a1a;
  }
  50% {
    box-shadow: 0 0 30px #ff4d4d, 0 0 60px #cc0000;
  }
  100% {
    box-shadow: 0 0 10px #ff4d4d, 0 0 20px #ff1a1a;
  }
}


/* 🥇 First Place - Gold Gradient */
tr.top-predictor td:first-child {
  background: linear-gradient(90deg, #FFD700, #FFA500);
  color: #000;
  font-weight: bold;
  border-radius: 8px;
}

/* 🥈 Second Place - Silver Gradient */
tr.second-predictor td:first-child {
  background: linear-gradient(90deg, #C0C0C0, #E0E0E0);
  color: #000;
  font-weight: bold;
  border-radius: 8px;
}

/* 🥉 Third Place - Bronze Gradient */
tr.third-predictor td:first-child {
  background: linear-gradient(90deg, #CD7F32, #B87333);
  color: #fff;
  font-weight: bold;
  border-radius: 8px;
}

/* ✨ Style for regular (non-top-3) leaderboard name cells */
.leaderboard-row td:first-child {
  background: linear-gradient(to right, #f0f0f0, #e8e8ff); /* soft gray-violet gradient */
  color: #333;
  font-weight: 500;
  border-radius: 6px;
}
/* Regular (non-top3) background for leaderboard names */
.regular-predictor {
  background: #f0f0f0; /* Light neutral background */
  color: #000;
}


#upcomingPredictionsContainer {
  overflow-x: auto;
  margin-bottom: 30px;
}

#upcomingGameTable {
  border-collapse: collapse;
  width: auto;
  min-width: 100%;
  table-layout: auto;
}


#upcomingGameTable th,
#upcomingGameTable td {
  padding: 10px;
  text-align: center;
  white-space: nowrap;
  border: 1px solid #ddd;
}



/* Wrap to allow horizontal scrolling */
.scrollable-table-wrapper {
  overflow-x: auto;
  white-space: nowrap;
  max-width: 100%;
  padding-bottom: 10px;
}

/* Improve layout for the predictions table */
#upcomingPredictionTableContainer table {
  border-collapse: collapse;
  table-layout: auto;
  width: auto;
  min-width: 600px;
}

#upcomingPredictionTableContainer th,
#upcomingPredictionTableContainer td {
  padding: 10px;
  text-align: center;
  white-space: nowrap;
  border: 1px solid #ddd;
}

/* Freeze first column */
#upcomingPredictionTableContainer th:first-child,
#upcomingPredictionTableContainer td:first-child {
  position: sticky;
  left: 0;
  z-index: 2;
  background-color: #4b0082;
  color: white;
  font-weight: bold;
}

#upcomingGameTable .sticky-left-col {
  position: sticky;
  left: 0;
  background-color: #4b0082; /* or white if preferred */
  color: white;
  z-index: 2;
  font-weight: bold;
}

.countdown-box {
  font-size: 13px;
  font-weight: bold;
  color: #ffd700;
  margin-left: 12px;
  white-space: nowrap;
}

.predictions-header-with-timer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 5px;
}

.predictions-title {
  background-color: #5e239d; /* Violet */
  color: white;
  padding: 8px 16px;
  border-radius: 6px;
  font-size: 18px;
  font-weight: bold;
}

.prediction-title-wrapper {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  margin-bottom: 10px;
}

@media (max-width: 600px) {
  .prediction-title-wrapper {
    flex-direction: column;
    align-items: center;
  }
}

.countdown-violet-box {
  background-color: #5e239d;
  color: white;
  padding: 8px 14px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: bold;
  white-space: nowrap;
  margin-left: 12px;
  display: inline-block;
}

.actual-cap-highlight {
  background: #ffedb5;
  color: #222;
  padding: 8px 12px;
  margin-top: 8px;
  font-size: 14px;
  border-left: 5px solid #ffc107;
  border-radius: 4px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);

  word-wrap: break-word;
  overflow-wrap: break-word;
  white-space: normal;
}


.sparkline-chart {
  width: 60px;
  height: 20px;
  display: block;
  margin-top: 4px;
}


.emoji-trend {
  font-size: 16px;
  margin-top: 4px;
  letter-spacing: 2px;
}

.accuracy-badge {
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-left: 6px;
  border-radius: 50%;
}

.green-badge {
  background-color: #00cc66;
}

.yellow-badge {
  background-color: #ffcc00;
}

.red-badge {
  background-color: #ff3333;
}

.accuracy-badge {
  position: relative;
  cursor: pointer;
}

.accuracy-tooltip {
  position: absolute;
  top: -25px;
  left: 50%;
  transform: translateX(-50%);
  background-color: #222;
  color: #fff;
  padding: 4px 8px;
  font-size: 12px;
  border-radius: 4px;
  white-space: nowrap;
  z-index: 100;
  display: none;
}

@media (hover: none) and (pointer: coarse) {
  .accuracy-tooltip {
    top: 20px; /* Show below the dot on mobile */
  }
}


/* 🌟 Glow effect on hover */
#leaderboardTable tbody tr:hover {
  background-color: rgba(255, 255, 255, 0.07);
  box-shadow: 0 0 14px 4px rgba(255, 255, 255, 0.5);
  transform: scale(1.01);
  transition: all 0.25s ease-in-out;
}

/* 👑 Stronger pulsing crown for Rank 1 */
.top-predictor::before {
  content: "👑";
  margin-right: 4px;
  animation: crownPulse 0.9s infinite ease-in-out;
  display: inline-block;
}

@keyframes crownPulse {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.4);
    opacity: 0.4;
  }
}

/* Glowing Rank Effects for Mobile */
@media (max-width: 768px) {
  .top-rank-gold {
    animation: gold-glow 2s infinite ease-in-out;
    transform: scale(1.02);
  }

  .top-rank-silver {
    animation: silver-glow 2s infinite ease-in-out;
    transform: scale(1.02);
  }

  .top-rank-bronze {
    animation: bronze-glow 2s infinite ease-in-out;
    transform: scale(1.02);
  }

  @keyframes gold-glow {
    0%, 100% { box-shadow: 0 0 8px gold; }
    50% { box-shadow: 0 0 16px gold; }
  }

  @keyframes silver-glow {
    0%, 100% { box-shadow: 0 0 8px silver; }
    50% { box-shadow: 0 0 16px silver; }
  }

  @keyframes bronze-glow {
    0%, 100% { box-shadow: 0 0 8px #cd7f32; }
    50% { box-shadow: 0 0 16px #cd7f32; }
  }

  /* Touch feedback on leaderboard rows */
  .scoreboard-table tr:active {
    background-color: rgba(255, 255, 255, 0.1);
    transform: scale(0.98);
    transition: transform 0.1s ease-in-out;
  }
}
.podium-wrapper {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 20px;
  margin: 20px auto 10px;
  padding-top: 10px;
  flex-wrap: wrap;
  text-align: center;
  position: relative;
  z-index: 1;
}


.podium {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 20px;
  max-width: 600px;
  margin: 0 auto 20px auto;
}

.podium-item {
  background: linear-gradient(to top, #4b0082, #7a3fd0);
  border-radius: 10px 10px 0 0;
  padding: 12px 10px 0 10px;
  color: white;
  font-weight: bold;
  width: 80px;
  min-height: 100px;
  position: relative;
  animation: popIn 1s ease;
  box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}

.podium-item .emoji {
  font-size: 24px;
  margin-bottom: 6px;
}

.podium-item .name {
  font-size: 0.9em;
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.podium-item .points {
  font-size: 0.8em;
  opacity: 0.9;
}

/* Vary heights */
/* Vary heights with more contrast */
.podium-item.gold {
  height: 200px !important;
}

.podium-item.silver {
  height: 160px !important;
}

.podium-item.bronze {
  height: 130px !important;
}


@keyframes popIn {
  0% { transform: translateY(20px); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}

@media (max-width: 600px) {
  .podium {
    gap: 10px;
  }
  .podium-item {
    width: 70px;
    font-size: 13px;
  }
}


#podiumContainer {
  background: url("https://media4.giphy.com/media/v1.Y2lkPTc5MGI3NjExbTVweXc4MG12NDJqYml2emUxcGJteGw4c3hvdmYwdHRkMDdua3p3diZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/iiDd7XoA8G8u6l9FtH/giphy.gif") center/cover no-repeat;
  border-radius: 10px;
  padding: 40px 0 20px;
  margin: 20px auto;
  text-align: center;
  position: relative;
}


/* Podium wrapper */
.podium {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 20px;
  margin-bottom: 10px;
  flex-wrap: wrap;
  flex-direction: row;
}

/* Each podium item */
.podium-item {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  width: 120px;
  min-height: 140px;
  padding: 10px;
  border-radius: 10px;
  font-weight: bold;
  box-shadow: 0 6px 10px rgba(0, 0, 0, 0.4);
  position: relative;
  background-color: #ddd;
  color: #000; /* all names/points in black */
  text-align: center;
  margin: 10px 5px;
}

/* Medal color classes */
.podium-item.gold {
  background: gold;
}
.podium-item.silver {
  background: silver;
}
.podium-item.bronze {
  background: #cd7f32;
}

/* Medal emoji */
.podium-item .emoji {
  font-size: 1.6rem;
  margin-bottom: 4px;
}

/* Podium user names - multiple lines supported */
.podium-item .name {
  font-size: 0.9rem;
  line-height: 1.2;
  margin: 2px 0;
  max-width: 100%;
  word-break: break-word;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
  white-space: normal;
}

/* Points below names */
.podium-item .points {
  font-weight: bold;
  margin-top: 2px;
}

/* Vary font sizes for points */
.podium-item.gold .points {
  font-size: 1.2rem;
}

.podium-item.silver .points {
  font-size: 1rem;
}

.podium-item.bronze .points {
  font-size: 0.95rem;
}

/* Responsive behavior for mobile */
@media (max-width: 600px) {
  .podium {
    display: flex;
    flex-direction: row !important; /* force horizontal layout */
    justify-content: flex-start;
    overflow-x: auto;
    padding: 10px;
    gap: 12px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap !important; /* prevent wrapping */
  }

  .podium-item {
    min-width: 130px;
    flex-shrink: 0;
    scroll-snap-align: center;
    transform: scale(0.95);
  }
}


/* Ensure leaderboard names are always black */
#leaderboardTable td:first-child {
  color: #000 !important;
}

.top-predictor,
.second-predictor,
.third-predictor,
.regular-predictor {
  color: #000 !important;
}



/* Force black text in name cells of leaderboard */
#leaderboardTable tbody td:first-child {
  color: #000 !important;
}


/* For completed games */
.completed-game {
  border: 2px solid rgba(255, 255, 255, 0.4);
  box-shadow: inset 0 0 5px rgba(255,255,255,0.3);
}

/* For ongoing game - green border with pulse */
.ongoing-game {
  position: relative;
  border: 3px solid #00ff00;
  animation: pulse-border 1.2s infinite ease-in-out;
}

@keyframes pulse-border {
  0% {
    box-shadow: 0 0 0 0 rgba(0, 255, 0, 0.5);
  }
  70% {
    box-shadow: 0 0 0 6px rgba(0, 255, 0, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(0, 255, 0, 0);
  }
}


/* LIVE label inside header */
.live-label {
  display: inline-block;
  background: #ff004f;
  color: #fff;
  font-size: 0.7rem;
  font-weight: bold;
  padding: 2px 6px;
  border-radius: 12px;
  margin-top: 4px;
  animation: pulseLive 1s infinite ease-in-out;
}

@keyframes pulseLive {
  0% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.1); opacity: 0.8; }
  100% { transform: scale(1); opacity: 1; }
}




/* === All Predictions Table (Sticky Column Support) === */

/* Prediction Table Base Setup */
#predictionTable {
  table-layout: fixed;
  width: max-content;
  min-width: 1200px;
  border-collapse: collapse;
}

/* General Cell Styling */
#predictionTable th,
#predictionTable td {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 6px;
}

/* Sticky first column - header */
#predictionTable thead th:first-child {
  position: sticky;
  left: 0;
  z-index: 5;
  background-color: #4b0082;
  color: white;
  font-weight: bold;
  min-width: 120px;
  white-space: nowrap;
  /* ✅ Force stacking context */
  will-change: transform;
  backface-visibility: hidden;
}

/* Sticky first column - body */
#predictionTable tbody td:first-child {
  position: sticky;
  left: 0;
  z-index: 4;
  background-color: #e0d4f5;
  color: #000;
  font-weight: bold;
  white-space: nowrap;
  min-width: 120px;
  box-shadow: 2px 0 5px rgba(0, 0, 0, 0.15);
  will-change: transform;
  backface-visibility: hidden;
}


/* Make the table wrapper scroll horizontally */
.table-scroll {
  overflow-x: auto;
  overflow-y: visible;
  position: relative;
  max-width: 100%;
  min-width: 100%;
}

.table-scroll {
  overflow-x: auto !important;
  overflow-y: visible;
  position: relative;
  display: block;
  max-width: 100vw;
  white-space: nowrap;      /* ✅ Prevent wrapping of inline content */
  scrollbar-width: thin;    /* ✅ Firefox-specific */
  -webkit-overflow-scrolling: touch; /* ✅ Smooth scroll on iOS */
}


#predictionTable {
  width: max-content;
  min-width: 1800px;
  table-layout: fixed;
  border-collapse: collapse;
   /* ✅ Add this to force GPU layer & improve sticky rendering */
   transform: translateZ(0);
}

.compare-selector {
  background-color: #4b0082; /* Violet box */
  border: 2px solid #fff;
  border-radius: 12px;
  padding: 20px;
  margin: 20px auto;
  max-width: 850px;
  text-align: center;
  color: white;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

.compare-instructions {
  font-weight: bold;
  margin-bottom: 16px;
  font-size: 1.2rem;
  color: #fff;
}

.chip-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-bottom: 20px;
}

.name-chip {
  background-color: #4CAF50; /* Green base */
  color: #fff;
  padding: 10px 18px;
  font-size: 14px;
  font-weight: bold;
  border-radius: 20px;
  cursor: pointer;
  border: 3px solid transparent;
  transition: all 0.25s ease-in-out;
  box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.2);
}

.name-chip:hover {
  background-color: #43a047;
  transform: scale(1.05);
}

.name-chip.selected {
  background-color: #6B00A8; /* Deep violet */
  border-color: #fff;
}


.upcoming-heading-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.prediction-summary {
  font-weight: bold;
  font-size: 16px;
  color: #fff;
  padding: 6px 12px;
  background-color: #4b0082;
  border-radius: 8px;
}

.summary-box {
  display: inline-block;
  margin-left: 12px;
  font-weight: bold;
  background-color: #fff7cc;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 14px;
}

.sticky-left-col {
  position: sticky;
  left: 0;
  z-index: 1;
  background-color: #e0d4f5; /* Same as name cell bg */
  color: #000;
  font-weight: bold;
  white-space: nowrap;
}

.pick-circle {
  display: inline-block;
  width: 22px;
  height: 22px;
  line-height: 22px;
  font-size: 12px;
  font-weight: bold;
  color: #fff;
  text-align: center;
  border-radius: 50%;
  margin: 2px;
}
.game-pick-summary {
  margin-top: 4px;
}


.button-group-wrapper {
  background: rgba(75, 0, 130, 0.9);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 20px;
  padding: 22px 16px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin: 20px auto;
  max-width: 700px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.button-group-wrapper .action-btn {
  background: linear-gradient(145deg, #34c759, #2ca84f);
  color: white;
  padding: 12px 20px;
  border: none;
  border-radius: 10px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(76, 255, 160, 0.25);
  transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
}
.button-group-wrapper .action-btn:hover {
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 8px 18px rgba(76, 255, 160, 0.35);
  opacity: 0.98;
}
/* Ripple Container */
.action-btn {
  position: relative;
  overflow: hidden;
}

/* Ripple Circle */
.action-btn::after {
  content: "";
  position: absolute;
  background: rgba(255, 255, 255, 0.6);
  border-radius: 50%;
  pointer-events: none;
  width: 0;
  height: 0;
  transform: scale(0);
  opacity: 1;
  animation: rippleEffect 0.6s ease-out;
}

@keyframes rippleEffect {
  to {
    width: 200%;
    height: 200%;
    transform: scale(1);
    opacity: 0;
  }
}

.ripple {
  position: absolute;
  width: 0;
  height: 0;
  background: rgba(255, 255, 255, 0.6);
  border-radius: 50%;
  transform: scale(0);
  animation: rippleEffect 0.6s ease-out;
  pointer-events: none;
}


#heatmapTable {
  border-collapse: collapse;
  width: max-content;
  min-width: 100%;
  table-layout: fixed;
}

#heatmapTable th,
#heatmapTable td {
  padding: 6px;
  text-align: center;
  border: 1px solid #ddd;
  font-weight: bold;
  white-space: nowrap;
}

.heatmap-correct {
  background-color: #28a745;
  color: white;
}

.heatmap-wrong {
  background-color: #dc3545;
  color: white;
}

.heatmap-pending {
  background-color: #6c757d;
  color: white;
}


@keyframes pulse-border {
  0% {
    box-shadow: 0 0 0 2px rgba(0, 255, 0, 0.7);
  }
  50% {
    box-shadow: 0 0 0 6px rgba(0, 255, 0, 0.3);
  }
  100% {
    box-shadow: 0 0 0 2px rgba(0, 255, 0, 0.7);
  }
}

@keyframes pulse-border-red {
  0% {
    box-shadow: 0 0 0 2px rgba(255, 0, 0, 0.7);
  }
  50% {
    box-shadow: 0 0 0 6px rgba(255, 0, 0, 0.3);
  }
  100% {
    box-shadow: 0 0 0 2px rgba(255, 0, 0, 0.7);
  }
}

.highlight-hit-streak {
  border: 3px solid #00ff00;
  animation: pulse-border 1.2s infinite;
}

.highlight-miss-streak {
  border: 3px solid #ff0000;
  animation: pulse-border-red 1.2s infinite;
}

.buddy-circle-btn {
  background-color: #6c63ff;
  color: white;
  border: none;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  vertical-align: middle;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  transition: transform 0.2s ease;
  margin-left: 6px;
  padding: 0;
}

.buddy-circle-btn:hover {
  transform: scale(1.1);
}

.buddy-circle-btn.selected-buddy {
  background-color: #ff9800;
  box-shadow: 0 0 8px #ff9800aa;
}

.selected-buddy {
  outline: 3px solid #8e44ad;
  border-radius: 50%;
  box-shadow: 0 0 6px #8e44ad;
}


.floating-compare-btn {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 9999;
  background-color: #4b0082;
  color: white;
  font-weight: bold;
  border-radius: 50px;
  padding: 12px 20px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  transition: transform 0.2s ease-in-out;
}
.floating-compare-btn:hover {
  transform: scale(1.05);
}
.season-links {
    display: flex;
    justify-content: center;
    gap: 16px;
    margin-top: 18px;
    flex-wrap: wrap;
}

.hero-primary-btn,
.archive-btn {
    padding: 12px 22px;
    border-radius: 10px;
    text-decoration: none;
    font-weight: bold;
    font-size: 16px;
    color: white;
    box-shadow: 0 4px 10px rgba(0,0,0,0.25);
    transition: all 0.2s ease;
    border: none;
    cursor: pointer;
}

.hero-primary-btn {
    background: linear-gradient(90deg, #11a63a, #35c759);
}

.archive-btn {
    background: linear-gradient(90deg, #5c0aa3, #7b1fa2);
}

.hero-primary-btn:hover,
.archive-btn:hover {
    transform: scale(1.03);
    opacity: 0.95;
}

.archive-btn:hover {
    transform: scale(1.03);
    opacity: 0.95;
}

.season-links {
    display: flex;
    justify-content: center;
    gap: 16px;
    margin-top: 18px;
    flex-wrap: wrap;
}

.hero-primary-btn,
.archive-btn {
    padding: 12px 22px;
    border-radius: 10px;
    text-decoration: none;
    font-weight: bold;
    font-size: 16px;
    color: white;
    box-shadow: 0 4px 10px rgba(0,0,0,0.25);
    transition: all 0.2s ease;
    border: none;
    cursor: pointer;
}

.hero-primary-btn {
    background: linear-gradient(90deg, #11a63a, #35c759);
}

.archive-btn {
    background: linear-gradient(90deg, #5c0aa3, #7b1fa2);
}

.hero-primary-btn:hover,
.archive-btn:hover {
    transform: scale(1.03);
    opacity: 0.95;
}
/* === HERO MOBILE FIX (NEW) === */
@media (max-width: 768px) {

  .hero {
    height: auto;
    min-height: 48vh;
    padding-bottom: 16px;
  }

  .hero-content {
    padding: 24px 16px 16px;
  }

  .hero-content h1 {
    font-size: 1.75rem;
    line-height: 1.15;
    margin-bottom: 10px;
}
  .hero-content p {
    font-size: 1rem;
    margin-bottom: 14px;
  }

  .season-links {
    flex-direction: column;
    align-items: center;
    gap: 12px;
    margin-top: 10px;
  }

  .hero-primary-btn,
  .archive-btn {
    width: 220px;
    max-width: 90%;
    padding: 10px 18px;
    font-size: 15px;
    text-align: center;
  }

  #main-view {
    margin-top: -6px;
  }
}