/* Global */
* { box-sizing: border-box; margin:0; padding:0; }
html, body { height:100%; font-family: 'Orbitron', sans-serif; color:#fff; }
.page-wrapper { min-height:100vh; display:flex; flex-direction:column; }

/* Page backgrounds */
body.home { background: url('images/bg-home.jpg') no-repeat center center fixed; background-size: cover; }
body.fixtures { background: url('images/bg-fixtures.jpg') no-repeat center center fixed; background-size: cover; }
body.leaderboard { background: url('images/bg-leaderboard.jpg') no-repeat center center fixed; background-size: cover; }
body.knockout { background: url('images/bg-knockout.jpg') no-repeat center center fixed; background-size: cover; }

/* Overlay */
.overlay { position: fixed; top:0; left:0; width:100%; height:100%; background: rgba(0,0,0,0.6); z-index:-1; }

/* Navbar */
.navbar { display:flex; justify-content:space-between; padding:1rem 2rem; background: rgba(0,0,30,0.85); position: sticky; top:0; z-index:10; }
.navbar .logo { font-weight:700; color:#af5aff; }
.nav-links { list-style:none; display:flex; gap:1.5rem; }
.nav-links a { text-decoration:none; color:#4c0a7e; font-weight:600; transition:color 0.3s; }
.nav-links a.active, .nav-links a:hover { color:#af5aff; }

/* Header */
.page-header { text-align:center; padding:2rem 1rem; text-shadow:0 0 10px #af5aff; }

/* Main content */
.content { flex:1; width:90%; max-width:1200px; margin:2rem auto; text-align:center; }

/* Footer */
footer { text-align:center; padding:1rem; background: rgba(0,0,30,0.85); margin-top:0; }

/* Fixtures page */
/* Fixtures page simplified */
.heat {
  background: rgba(255,255,255,0.05);
  border: 1px solid #4c0a7e;
  border-radius: 15px;
  margin: 2rem auto;
  padding: 1rem;
  max-width: 800px;
  box-shadow: 0 0 20px #2b023533;
}

.heat h3 {
  font-size: 1.5rem;
  margin-bottom: 0.8rem;
  border-bottom: 1px solid #4c0a7e;
  padding-bottom: 0.3rem;
  text-shadow: 0 0 10px #af5aff;
}

.player-list {
    margin: 0.5rem 0 1rem 0; /* spacing below heat heading */
    list-style: none; /* remove bullets */
    padding: 0;
    display: flex;
    gap: 1rem; /* horizontal spacing between players */
    justify-content: center; /* center players under heat heading */
  }
  
  .player-list li {
    background: rgba(0,0,50,0.6); /* semi-transparent “card” */
    padding: 0.4rem 0.8rem;
    border-radius: 8px;
    border: 1px solid #4c0a7e;
    font-weight: 600;
    text-shadow: 0 0 5px #af5aff;
  }
  

.fixture {
  background: rgba(0,0,0,0.4);
  border: 1px solid #4c0a7e;
  border-radius: 10px;
  margin: 1rem 0;
  padding: 0.8rem 1.2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: all 0.3s ease;
  cursor: default;
}

.fixture-header {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 1.1rem;
  font-weight: bold;
}

.fixture-info {
  font-size: 0.95rem;
  opacity: 0.9;
  color: #af5aff;
}

.fixture.live {
  border-color: #00ff99;
  box-shadow: 0 0 25px #00ff99;
  animation: pulse 1.5s infinite;
}

.fixture.upcoming {
  border-color: #ffff00;
  box-shadow: 0 0 15px #ffff00aa;
}

.fixture.completed {
  opacity: 0.5;
}

@keyframes pulse {
  0% { box-shadow: 0 0 10px #00ff99; }
  50% { box-shadow: 0 0 25px #00ff99aa; }
  100% { box-shadow: 0 0 10px #00ff99; }
}


/* Leaderboard table */
.leaderboard-table { width:90%; margin:2rem auto; border-collapse:collapse; background: rgba(28, 7, 61, 0.95); border:1px solid #4c0a7e; border-radius:10px; overflow:hidden; }
.leaderboard-table th, .leaderboard-table td { padding:0.8rem 1rem; text-align:center; border-bottom:1px solid #111111; }
.leaderboard-table th { background: rgba(91, 14, 178, 0.95); font-weight:600; }
.leaderboard-table tr:nth-child(even) { background: rgba(21, 5, 47, 0.95); }
.leaderboard-table tr:hover { background: rgba(91, 14, 178, 0.95); }

/* Knockout Bracket */
.bracket { display:flex; flex-wrap:wrap; justify-content:space-around; margin:2rem auto; }
.bracket .round { background: rgba(0,0,0,0.4); border:1px solid #00bfff55; border-radius:10px; padding:1rem; width:250px; margin:1rem; }
.bracket .round h3 { text-align:center; border-bottom:1px solid #00bfff33; padding-bottom:0.5rem; }
.bracket .round ul { list-style:none; padding:0; }
.bracket .round li { padding:0.5rem 0; border-bottom:1px dashed #00bfff33; }

.sign-up-button-container {
    text-align: center;
    margin: 1rem 0 2rem 0;
  }
  
  .sign-up-button {
    background-color: #5af62b;
    color: white;
    font-weight: bold;
    padding: 0.6rem 1.2rem;
    border-radius: 8px;
    text-decoration: none;
    font-family: 'Orbitron', sans-serif;
    box-shadow: 0 0 15px #9146FF55;
    transition: all 0.3s ease;
  }
  
  .sign-up-button:hover {
    background-color: #38da13;
    box-shadow: 0 0 25px #43ba0baa;
    transform: scale(1.05);
  }

.twitch-button-container {
    text-align: center;
    margin: 1rem 0 2rem 0;
  }
  
  .twitch-button {
    background-color: #9146FF;
    color: white;
    font-weight: bold;
    padding: 0.6rem 1.2rem;
    border-radius: 8px;
    text-decoration: none;
    font-family: 'Orbitron', sans-serif;
    box-shadow: 0 0 15px #9146FF55;
    transition: all 0.3s ease;
  }
  
  .twitch-button:hover {
    background-color: #772ce8;
    box-shadow: 0 0 25px #9146FFaa;
    transform: scale(1.05);
  }

.discord-button-container {
    text-align: center;
    margin: 1rem 0 2rem 0;
  }
  
  .discord-button {
    background-color: #7c6dee;
    color: white;
    font-weight: bold;
    padding: 0.6rem 1.2rem;
    border-radius: 8px;
    text-decoration: none;
    font-family: 'Orbitron', sans-serif;
    box-shadow: 0 0 15px #49119e55;
    transition: all 0.3s ease;
  }
  
  .discord-button:hover {
    background-color: #5a46f0;
    box-shadow: 0 0 25px #3b21fb;
    transform: scale(1.05);
  }

  .top-player {
    color: #00ff00;          /* green text */
    font-weight: bold;        /* optional bold */
    text-shadow: 0 0 5px #00ff00; /* subtle glow effect */
    background-color: transparent; /* ensures background doesn’t change */
  }
   .worst-player {
    color: #ff0a16;          /* green text */
    font-weight: bold;        /* optional bold */
    text-shadow: 0 0 5px #b70811; /* subtle glow effect */
    background-color: transparent; /* ensures background doesn’t change */
  }


.round.quarterfinals .ko-races {
  display: flex;               /* horizontal layout */
  justify-content: space-between; /* evenly space races across the container */
  width: 100%;                 /* full width so spacing works */
}

.round.semifinals .ko-races {
  display: flex;
  justify-content: center;
  gap: 5%;
  
}

.round.finals .ko-races {
  display: flex;
  justify-content: center;
}

.ko-race {
  text-align: center;
  min-width: 250px;            /* ensures each race has enough space */
  border: 1px solid #4c0a7e;
  border-radius: 10px;
  background: rgba(0,0,0,0.4);
  margin: 1rem 0;
  padding: 0.8rem 1.2rem;
}

.leaderboard-table .player-link {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  color: #00ffcc;               /* fits your glowing space theme */
  text-decoration: none;
  font-weight: 600;
  transition: color 0.2s ease;
  margin-left:1%;
}

.leaderboard-table .player-link:hover {
  color: #00ffff;               /* glow a bit brighter on hover */
}

.yt-icon {
  width: 18px;
  height: 18px;
  vertical-align: middle;
  filter: drop-shadow(0 0 2px #ff0000);
  transition: transform 0.2s ease;
}

.ttv-icon {
  width: 18px;
  height: 18px;
  vertical-align: middle;
  filter: drop-shadow(0 0 2px #73069b);
  transition: transform 0.2s ease;
}