body {
  background: linear-gradient(to bottom right, #100b0b, #311e1e);
  color: white;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  margin: 0;
  padding: 20px;
  height: 100%;
}

.fade-in {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s, transform 0.6s;
}
.fade-in.show {
  opacity: 1;
  transform: translateY(0);
}

.page-wrapper {
  max-width: 1350px;
  margin: 0 auto;
  padding: 0 20px;
}

    .nav-bar {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 40px;
      padding: 20px 24px;
      background-color: #0f1117;
      border-radius: 12px;
      margin-bottom: 50px;
      position: relative;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6);
    }

    .nav-bar a {
      color: #ccc;
      text-decoration: none;
      font-size: 1.15rem;
      font-weight: 600;
      display: flex;
      align-items: center;
      gap: 6px;
      transition: all 0.2s ease-in-out;
    }

    .nav-bar a:hover {
      color: #fff;
      transform: scale(1.05);
    }

    .nav-bar img {
      position: absolute;
      left: 20px;
      width: 100x;
      height: 50px;
    }

.nav-bar a.disabled {
  color: #666 !important;          
  pointer-events: none;          
  cursor: not-allowed;       
  opacity: 0.6;                
  transform: none !important;   
}
.nav-bar a.disabled:hover {
  color: #666;                    
}

    .search-form {
      position: absolute;
      right: 20px;
      display: flex;
      align-items: center;
      background-color: #10141a;
      border: 1px solid #2d323a;
      border-radius: 999px;
      padding: 3px 8px;
    }

    .search-form input {
      background: transparent;
      border: none;
      color: #fff;
      padding: 6px 12px;
      font-size: 0.95rem;
      width: 140px;
      outline: none;
      border-radius: 999px;
    }

    .search-form button {
      background: none;
      border: none;
      color: #aaa;
      cursor: pointer;
    }

    .search-form button:hover {
      color: #fff;
    }

    .search-error {
      position: absolute;
      right: 20px;
      top: 100%;
      margin-top: 8px;
      background-color: #d32f2f;
      color: white;
      padding: 6px 12px;
      border-radius: 6px;
      font-size: 0.9rem;
      display: none;
    }

    .search-error.show {
      display: block;
    }

.category-line {
  display: flex;
  justify-content: center;
  gap: 14px;
  margin: 20px auto 10px;
  flex-wrap: wrap;
}
.category-box {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  background-color: #1a1d24;
  color: #aaa;
  font-weight: 600;
  font-size: 1.2rem;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
  text-decoration: none;
}
.category-box img {
  height: 1.2em;
  width: auto;
  display: inline-block;
  vertical-align: middle;
  filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.4));
}
.category-box:hover {
  color: #fff;
  background-color: #232731;
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
}
.category-box.active {
  background: #ffb912;
  color: #111;
  border-color: #ffcc33;
  box-shadow: 0 3px 8px rgba(255, 180, 0, 0.4);
}

table {
  width: 100%;
  border-collapse: collapse;
  background: #13161c;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 0 10px #000;
}
thead th {
  background: #0f1015;
  color: #bbb;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  text-align: center;
  vertical-align: bottom;
  padding: 14px;
  font-size: 0.85rem;
}

thead th.player-header {
  text-align: left;     
  padding-left: 70px;   
}

thead th.tiers-header {
  text-align: left;     
  padding-left: 290px;   
}

thead th.region-header {
  text-align: left;        
  padding-left: 190px;     
}

tbody td {
  padding: 16px;
  text-align: center;
  border-bottom: none;
}
tr:hover {
  background: #22242e;
  cursor: pointer;
}


tbody tr {
  border-bottom: 1px solid rgba(255, 255, 255, 0.15); 
}
tbody tr:last-child {
  border-bottom: none; 
}



.rank {
  font-weight: bold;
  font-size: 1.2rem;
}
tr:nth-child(1) .rank { color: #f3c500; text-shadow: 0 0 4px #f3c500; }
tr:nth-child(2) .rank { color: #c0c0c0; text-shadow: 0 0 4px #c0c0c0; }
tr:nth-child(3) .rank { color: #cd7f32; text-shadow: 0 0 4px #cd7f32; }


.username {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: flex-start;
}
.avatar {
  width: 40px;
  height: 40px;
  border-radius: 6px;
}


.region-cell {
  padding-left: 200px;        
  text-align: left;        
  white-space: nowrap;
}

.region {
  padding: 3px 8px;       
  border-radius: 6px;
  font-weight: bold;
  font-size: 0.85rem;     
  color: white;
  display: inline-block;  
}

.region.NA { background: rgba(255, 60, 30, 0.6); }   
.region.EU { background: rgba(46, 204, 113, 0.6); }  
.region.AS { background: rgba(210, 130, 195, 0.6); } 
.region.AU { background: rgba(200, 160, 100, 0.6); } 



.tier {
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
  justify-content: flex-start; 
  margin-left: 50px;          
}

.tier-pill {
  display: flex;
  gap: 6px;
  align-items: center;
  background: #1f242d;
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 600;
  color: #f0c75e;
  margin: 0; 

}
.tier-pill img { width: 18px; height: 18px; }
.tier-pill.empty {
  background: transparent;
  border: 1px dashed rgba(255, 255, 255, 0.1);
  color: transparent;
  width: 60px;
  height: 28px;
  padding: 0;
  margin: 0; 
}


.player-info {
  display: flex;
  align-items: center;
  gap: 6px; 
}

.gradient-gold {
  background: linear-gradient(90deg, #F2C511, #F39C19);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.gradient-blue {
  background: linear-gradient(90deg, #3398DB, #7acaff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
}
.gradient-silver {
  background: linear-gradient(90deg, #BDC3C8, #DDE6E8);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.gradient-red {
  background: linear-gradient(90deg, #C0382B, #fe9990);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.gradient-green {
  background: linear-gradient(90deg, #1CA085, #2bee7c);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.gradient-purple-blue {
  background: linear-gradient(90deg, #8E43AD, #59ace3);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.gradient-gold-green {
  background: linear-gradient(90deg, #F39C19, #2ECC70);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.gradient-purple-red {
  background: linear-gradient(90deg, #8E43AD, #E84B3C);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.player-name {
  font-size: 1.3rem;
  font-weight: 800;
  color: #fff;
  display: inline-block; 
}

.player-points {
  font-size: 0.9rem;      
  font-weight: 600;
  color: #80aaff;          
  background: none;        
  padding: 0;              
  border-radius: 0;        
}




.footer {
  margin-top: 60px;
  padding: 20px 0;
  text-align: center;
  background-color: #0f1117;
  color: #888;
  font-size: 0.9rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}


.modal {
  display: none;                 
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0, 0, 0, 0.75);
  z-index: 1000;

  align-items: center;
  justify-content: center;
}
.modal.show {                    
  display: flex;
}
.modal-content {
  background: #11141b;
  border-radius: 20px;
  padding: 40px 30px;         
  width: 380px;               
  max-height: 90vh;            
  display: flex;             
  flex-direction: column;      
  align-items: center;         
  justify-content: flex-start; 
  position: relative;
  text-align: center;
  box-shadow: 0 8px 30px rgba(0,0,0,0.8);
  transform: scale(0.9);
  opacity: 0;
  transition: all 0.25s ease; 
  overflow-y: auto;           
}
.modal.show .modal-content {
  transform: scale(1);
  opacity: 1;
}


.close-btn {
  position: absolute;
  top: 10px;
  right: 14px;
  width: 36px;
  height: 36px;
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  color: white;
  font-size: 22px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
  padding: 0;
  cursor: pointer;
  transition: background 0.2s ease;
  font-family: Arial, sans-serif;
}
.close-btn:hover { background: rgba(255,255,255,0.18); color: #fff; }

.modal-avatar {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.15);
  display: block;
  margin: 0 auto 10px;
}


.modal-username {
  font-size: 1.5rem;
  font-weight: 700;
  color: #e7eaf1; 
  margin-bottom: 4px;
}

.modal-region {
  font-size: 0.95rem;
  color: #7a7f8c;
  background: #1e222a;
  display: inline-block;
  padding: 4px 12px;
  border-radius: 8px;
  margin-bottom: 18px;
}

.modal-position-box {
  background: #1a1d24;
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 10px;
  padding: 12px 10px;
  margin-bottom: 24px;
  display: flex;
  flex-wrap: nowrap;        
  align-items: center;
  justify-content: center;
  gap: 8px;
  white-space: nowrap;       
}
.position-number {
  font-size: 1.4rem;        
  font-weight: 800;
  color: #fff;
}
.position-overall {
  font-size: 0.95rem;
  font-weight: 700;
  color: #ffc83d;
}
.position-points {
  font-size: 0.9rem;
  color: #aaa;
}

.modal-label {
  font-size: 0.9rem;
  font-weight: 600;
  color: #999;
  text-align: left;
  margin-bottom: 8px;
}

.modal-tiers-text {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-start;
}

.modal-tier-pill {
  display: flex;
  align-items: center;
  gap: 6px;
  background: #2a2f3a;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 600;
  color: #ffc83d;
}
.modal-tier-pill img {
  width: 20px;
  height: 20px;
}

.modal-tier-pill.empty {
  background: transparent;
  border: 1px dashed rgba(255, 255, 255, 0.1);
  color: transparent;
  width: 60px;
  height: 28px;
  padding: 0;
  margin: 0; 
}


.namemc-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #1e222a;
  color: #e7eaf1;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: 8px;
  margin-bottom: 18px;
  text-decoration: none;
  transition: background 0.2s, transform 0.2s;
  font-size: 0.9rem;
}
.namemc-btn:hover {
  background: #2b303b;
  transform: translateY(-2px);
  color: #fff;
}
.namemc-btn i {
  font-size: 0.9rem;
  color: #aaa;
}

#loader {
  position: fixed; top: 0; left: 0;
  width: 100%; height: 100%;
  background: #0b0c10;
  display: flex; align-items: center; justify-content: center;
  z-index: 9999; transition: opacity 0.5s;
}
.dot-loader span {
  display: inline-block; width: 10px; height: 10px;
  background: white; border-radius: 50%; margin: 4px;
  animation: blink 1.4s infinite both;
}
.dot-loader span:nth-child(2) { animation-delay: 0.2s; }
.dot-loader span:nth-child(3) { animation-delay: 0.4s; }
@keyframes blink {
  0%, 80%, 100% { opacity: 0; }
  40% { opacity: 1; }
}


::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #1c1f26; }
::-webkit-scrollbar-thumb { background: #444c56; border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: #666f79; }