* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: 'Roboto', sans-serif;
  background: radial-gradient(circle at top, #0d0d0d, #1a0000 70%);
  color: #e8e8e8;
  line-height: 1.6;
}

header {
  background: linear-gradient(90deg, #b30000, #ff3300);
  text-align: center;
  padding: 25px 10px;
  box-shadow: 0 0 25px #ff3300;
}
header h1 {
  font-family: 'Orbitron', sans-serif;
  font-size: 40px;
  color: #fff;
  text-shadow: 0 0 20px #ff6600;
}
header p {
  color: #ffd5b0;
  letter-spacing: 1px;
}

nav {
  display: flex;
  justify-content: center;
  background: #111;
  box-shadow: 0 0 10px #ff3300 inset;
}
nav a {
  font-family: 'Orbitron', sans-serif;
  color: #ff9933;
  text-decoration: none;
  padding: 15px 20px;
  display: block;
  transition: 0.3s;
}
nav a:hover {
  background: #ff3300;
  color: #fff;
  box-shadow: 0 0 15px #ff3300;
}

.banner {
  background: url('../images/banner.jpg') no-repeat center/cover;
  height: 350px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #fff;
  text-shadow: 0 0 15px #ff6600;
}
.banner h2 {
  font-family: 'Orbitron', sans-serif;
  font-size: 36px;
}

main {
  padding: 40px 10%;
  text-align: center;
}

section {
  margin-bottom: 60px;
}
section h2 {
  font-family: 'Orbitron', sans-serif;
  color: #ff6600;
  margin-bottom: 15px;
  font-size: 28px;
  text-shadow: 0 0 10px #ff3300;
}
section p {
  color: #ddd;
  font-size: 17px;
}

.download-btn {
  display: inline-block;
  background: linear-gradient(90deg, #ff3300, #ff6600);
  color: #fff;
  padding: 15px 30px;
  margin: 20px 10px;
  border-radius: 8px;
  font-family: 'Orbitron', sans-serif;
  font-size: 18px;
  text-decoration: none;
  transition: 0.3s;
  box-shadow: 0 0 15px #ff6600;
}
.download-btn:hover {
  transform: scale(1.05);
  box-shadow: 0 0 25px #ff6600;
}

footer {
  background: #111;
  text-align: center;
  padding: 20px;
  color: #aaa;
  font-size: 14px;
  border-top: 1px solid #333;
}
footer a {
  color: #ff6600;
  text-decoration: none;
}
.stats .allchars {
    border-color: #9c27b0;
    color: #e1bee7;
}
/* Mob row */
.mob-row {
    background:#2b0000;
    font-weight:bold;
    cursor:pointer;
}
.mob-row:hover {
    background:#400000;
}

/* Drop row */
.drop-row {
    display:none;
    background:#111;
}
.drop-row td {
    padding-left:40px;
}

/* ===== ITEM GRADE COLOR ===== */
.grade-0 { color: #ffffff; }   /* Trắng */
.grade-1 { color: #66ccff; }   /* Xanh dương */
.grade-2 { color: #66ff66; }   /* Xanh lá */
.grade-3 { color: #cc66ff; }   /* Tím */
.grade-4 { color: #ffcc00; }   /* Vàng */
.grade-5 { color: #ff9933; }   /* Cam */
.grade-6 { color: #ff3333; }   /* Đỏ */