@charset "UTF-8";
@import url(https://fonts.googleapis.com/css?family=Open+Sans:300,400,700);

/* Base styles */
body {
  font-family: 'Roboto', sans-serif;
  font-weight: 300;
  line-height: 1.42em;
  color: #A7A1AE;
  background-color: #EDEDED;
  transition: background-color 0.5s ease, color 0.5s ease;
}

a {
  color: inherit;
  text-decoration: none;
  transition: color 0.3s ease;
}

/* Headings */
h1, h2 {
  font-weight: 300;
  line-height: 1em;
  text-align: center;
}

h1 {
  font-size: 3em;
  color: black;
  transition: color 0.5s ease;
}

h2 {
  font-size: 1em;
  padding-bottom: 2em;
  color: #FB667A;
  transition: color 0.5s ease;
}

h2 a {
  font-weight: 700;
  text-transform: uppercase;
}

.title2 { 
  color: #909090; 
  font-weight: bold;
}

.container th h1 {
  font-weight: bold;
  font-size: 1em;
  text-align: left;
  color: #afafaf;
}

.container td {
  font-weight: normal;
  font-size: 1em;
  -webkit-box-shadow: 0 2px 2px -2px #0E1119;
  -moz-box-shadow: 0 2px 2px -2px #0E1119;
  box-shadow: 0 2px 2px -2px #0E1119;
}

.container {
  text-align: left;
  overflow: hidden;
  width: 80%;
  margin: 0 auto;
  display: table;
  padding: 0 0 8em 0;
}

.container th {
  background-color: #ffffff;
}

.container td, .container th {
  padding-bottom: 1%;
  padding-top: 1%;
  padding-left: 2%;  
  transition: all 0.3s ease;
}

/* Zebra striping for rows */
.container tr:nth-child(odd) {
  background-color: #ffffff;
}

.container tr:nth-child(even) {
  background-color: #ffffff;
}

/* Responsive styles */
@media (max-width: 1000px) {
  .container td:nth-child(9), .container th:nth-child(9),
  .container td:nth-child(10), .container th:nth-child(10) {
    display: none;
  }
}

@media (max-width: 800px) {
  .container td:nth-child(6), .container th:nth-child(6),
  .container td:nth-child(7), .container th:nth-child(7) {
    display: none;
  }
}

@media (max-width: 600px) {
  .container td:nth-child(1), .container th:nth-child(1),
  .container td:nth-child(5), .container th:nth-child(5),
  .container td:nth-child(8), .container th:nth-child(8) {
    display: none;
  }
}

/* Footer styles */
footer {
  text-align: center;
  padding: 20px 0;
  color: #fff;
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  font-size: 0.8em;
  background-color: #2a475e;
  transition: all 0.5s ease;
}

/* Medal styles */
.gold, .silver, .bronze {
  color: black !important;
}

.gold {
  background-color: #FFD700 !important;
}

.silver {
  background-color: silver !important;
}

.bronze {
  background-color: #cd7f32 !important;
}

/* Table layout */
table {
  table-layout: fixed;
  width: 100%;
}

/* Column header styles */
.rank-header { width: 50px; text-align: center; }
.name-header { width: 150px; text-align: center; }
.points-header { width: 100px; text-align: center; }
.kills-header { width: 100px; text-align: center; }
.deaths-header { width: 100px; text-align: center; }
.kd-header { width: 80px; text-align: center; }
.wl-header { width: 80px; text-align: center; }
.rank-header { width: 120px; text-align: center; }
.playtime-header { width: 150px; text-align: center; }
.last-played-header { width: 150px; text-align: center; }

/* Icon styles */
.icon {
  color: white;
  transition: color 0.3s ease;
}

/* Utility classes */
.disabled {
  display: none;
}

.container-fluid {
  background-color: #FDFDFD;
  transition: background-color 0.5s ease;
}

.footer {
  color: black;
  transition: color 0.5s ease;
}

/* Dark mode styles */
.dark-mode {
  color: #EDEDED;
  background-color: #333333;
}

.dark-mode h1 {
  color: #EDEDED;
}

.dark-mode .container-fluid {
  background-color: #222222;
}

.dark-mode .table-light, .dark-mode .thead-light, .dark-mode .page-link {
  background-color: #333333;
  color: #EDEDED;
}

.dark-mode .thead-light th {
  background-color: #181818;
  border-color: #181818;
  color: white;
}

.dark-mode .title {
  color: white;
}

.dark-mode .footer {
  color: white;
}

.search {
  position: relative;
  box-shadow: 0 0 40px rgba(51, 51, 51, .1);
}

.search input {
  height: 60px;
  text-indent: 25px;
  border: 2px solid #d6d4d4;
  transition: all 0.3s ease;
}

.search input:focus {
  box-shadow: none;
  border: 2px solid blue;
}

.search .fa-search {
  position: absolute;
  top: 20px;
  left: 16px;
}

.search button {
  position: absolute;
  top: 5px;
  right: 13px;
  height: 50px;
  width: 110px;
  background: blue;
  transition: all 0.3s ease;
}

.search-container, .search {
  width: 30%;
  display: flex;
  align-items: center;
}

.search input[type="text"] {
  flex-grow: 1;
  margin-right: 0.5rem;
}

.search button {
  white-space: nowrap;
}

@media (max-width: 768px) {
  .search input[type="text"] {
      margin-right: 0.3rem;
  }
}

.mode {
  height: 50px;
  width: 70px;
}

a:hover {
  text-decoration: none;
}

.login {
  background-color: #2a475e;
  color: white;
  transition: all 0.5s ease;
}

.login:hover {
  text-decoration: none;
  color: white;
  font-weight: bold;
}

.profile-statistics {
  max-width: 350px;
  margin: 20px auto;
}

.dark-mode .profile-statistics ul li, .card-body {
  color: black;
}

.dark-mode .profile {
  color: black;
}

.black {
  color: black;
}

.right-card {
  height: 100%;
}

/* Table row effects */
.container tr {
  transition: all 0.3s ease;
  position: relative;
}

.container tr:hover {
  transform: scale(1.02);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.container td, .container th {
  border-radius: 8px;
  padding: 15px;
  transition: all 0.3s ease;
}

.container th {
  background-color: #2a475e;
  color: white;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* Special effects for top players */
.top-player {
  position: relative;
  overflow: hidden;
  z-index: 1;
}

/* Gold - Top 1 */
.top-1 {
  background: linear-gradient(135deg, #FFD700 0%, #FFEC80 100%) !important;
  box-shadow: 0 0 20px rgba(255, 215, 0, 0.7);
  border-left: 5px solid #FFD700;
  animation: glow-gold 2s infinite alternate;
}

/* Silver - Top 2 */
.top-2 {
  background: linear-gradient(135deg, #C0C0C0 0%, #E0E0E0 100%) !important;
  box-shadow: 0 0 15px rgba(192, 192, 192, 0.6);
  border-left: 5px solid #C0C0C0;
  animation: glow-silver 2s infinite alternate;
}

/* Bronze - Top 3 */
.top-3 {
  background: linear-gradient(135deg, #CD7F32 0%, #E6A05E 100%) !important;
  box-shadow: 0 0 10px rgba(205, 127, 50, 0.5);
  border-left: 5px solid #CD7F32;
  animation: glow-bronze 2s infinite alternate;
}

/* Glow animations */
@keyframes glow-gold {
  from {
    box-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
  }
  to {
    box-shadow: 0 0 25px rgba(255, 215, 0, 0.9);
  }
}

@keyframes glow-silver {
  from {
    box-shadow: 0 0 8px rgba(192, 192, 192, 0.4);
  }
  to {
    box-shadow: 0 0 20px rgba(192, 192, 192, 0.8);
  }
}

@keyframes glow-bronze {
  from {
    box-shadow: 0 0 5px rgba(205, 127, 50, 0.3);
  }
  to {
    box-shadow: 0 0 15px rgba(205, 127, 50, 0.7);
  }
}

/* Badges for top players */
.top-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 12px;
  font-weight: bold;
  padding: 3px 8px;
  border-radius: 10px;
  text-transform: uppercase;
}

.top-1 .top-badge {
  background-color: #FFD700;
  color: #000;
}

.top-2 .top-badge {
  background-color: #C0C0C0;
  color: #000;
}

.top-3 .top-badge {
  background-color: #CD7F32;
  color: #000;
}

/* Special hover effects */
.top-1:hover {
  transform: scale(1.02) translateY(-3px);
  box-shadow: 0 10px 25px rgba(255, 215, 0, 0.8);
}

.top-2:hover {
  transform: scale(1.015) translateY(-2px);
  box-shadow: 0 8px 20px rgba(192, 192, 192, 0.7);
}

.top-3:hover {
  transform: scale(1.01) translateY(-1px);
  box-shadow: 0 6px 15px rgba(205, 127, 50, 0.6);
}

/* Avatar effects */
.player-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  transition: all 0.3s ease;
}

.top-1 .player-avatar {
  border: 3px solid #FFD700;
  box-shadow: 0 0 15px rgba(255, 215, 0, 0.7);
}

.top-2 .player-avatar {
  border: 3px solid #C0C0C0;
  box-shadow: 0 0 12px rgba(192, 192, 192, 0.6);
}

.top-3 .player-avatar {
  border: 3px solid #CD7F32;
  box-shadow: 0 0 10px rgba(205, 127, 50, 0.5);
}

/* Celebrate animation for top 1 */
.top-1.celebrate {
  animation: celebrate 1s ease;
}

@keyframes celebrate {
  0% { transform: scale(1); }
  25% { transform: scale(1.05) rotate(2deg); }
  50% { transform: scale(1.05) rotate(-2deg); }
  75% { transform: scale(1.05) rotate(2deg); }
  100% { transform: scale(1); }
}

/* Dark mode adjustments for top players */
.dark-mode .top-1 {
  background: linear-gradient(135deg, #FFD700 0%, #B29700 100%) !important;
}

.dark-mode .top-2 {
  background: linear-gradient(135deg, #A0A0A0 0%, #707070 100%) !important;
}

.dark-mode .top-3 {
  background: linear-gradient(135deg, #8E5A2B 0%, #6B441F 100%) !important;
}

/* Rank cell styling */
.rank-cell {
  font-weight: bold;
  font-size: 1.1em;
}

/* Player name styling */
.player-name {
  position: relative;
  padding-right: 60px; /* Space for badge */
}

/* Rank image styling */
.rank-img {
  width: 100px;
  height: 40px;
  object-fit: contain;
}

/* Theme toggle button */
#theme-toggle {
  transition: all 0.3s ease;
  margin-left: 10px;
}

#theme-toggle:hover {
  background-color: #2a475e;
  color: white;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .search-container, .search {
    width: 100%;
  }
  
  .player-avatar {
    width: 30px;
    height: 30px;
  }
  
  .top-badge {
    font-size: 10px;
    padding: 2px 5px;
  }
}