/* --- TIER LIST STYLES --- */

/* Filter Buttons */
.tier-controls {
  text-align: center; margin-bottom: 30px; background: #fff; padding: 20px;
  border-radius: 16px; border-bottom: 4px solid #bdc3c7;
}
.filter-row { display: flex; justify-content: center; gap: 10px; margin-top: 15px; flex-wrap: wrap; }

.tier-filter {
  padding: 8px 16px; border: none; border-radius: 20px; font-weight: bold; cursor: pointer;
  transition: 0.2s; opacity: 0.7; color: white; font-family: 'Fredoka One'; letter-spacing: 1px;
}
.tier-filter:hover, .tier-filter.active { opacity: 1; transform: scale(1.05); }

/* Rank Colors */
.tier-filter.active { background: #333; }
.btn-s, .rank-label.rank-S { background: #ff7f7f; /* Red */ }
.btn-a, .rank-label.rank-A { background: #ffbf7f; /* Orange */ }
.btn-b, .rank-label.rank-B { background: #ffdf7f; /* Yellow */ }
.btn-c, .rank-label.rank-C { background: #ffff7f; color: #555; /* Pale Yellow */ }
.btn-d, .rank-label.rank-D { background: #bfff7f; color: #555; /* Green */ }

/* THE TIER ROWS */
.tier-list-wrapper { display: flex; flex-direction: column; gap: 15px; }

.tier-row {
  display: flex;
  background: #2c3e50; /* Dark Background for items */
  border-radius: 10px;
  overflow: hidden;
  min-height: 100px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

/* Left Side: The Big Letter */
.rank-label {
  width: 100px;
  display: flex; align-items: center; justify-content: center;
  font-size: 40px; font-family: 'Fredoka One'; color: #333;
  text-shadow: 1px 1px 0 rgba(255,255,255,0.4);
  flex-shrink: 0;
}

/* Right Side: The Grid of Items */
.rank-items {
  flex: 1;
  display: flex; flex-wrap: wrap; gap: 10px;
  padding: 15px;
}

/* Individual Item Card */
.tier-card {
  background: #34495e;
  width: 80px; height: 90px;
  border-radius: 8px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  cursor: pointer;
  transition: 0.2s;
  position: relative;
  border: 2px solid transparent;
}
.tier-card:hover { transform: translateY(-5px); background: #46637f; border-color: #fff; }

.tier-img { font-size: 35px; margin-bottom: 5px; } /* Emoji size (Replace with img tag later) */
.tier-name { font-size: 10px; color: white; text-align: center; font-weight: bold; line-height: 1.2; }
.tier-val { 
  font-size: 9px; color: #f1c40f; margin-top: 2px; background: rgba(0,0,0,0.5); 
  padding: 2px 5px; border-radius: 4px; 
}

/* Bottom SEO Guide */
.tier-guide {
  margin-top: 40px; background: #fff; padding: 30px; border-radius: 16px;
  border-bottom: 5px solid #bdc3c7;
}
.tier-guide li { margin-bottom: 10px; line-height: 1.6; }

/* Responsive */
@media (max-width: 768px) {
  .tier-row { flex-direction: column; }
  .rank-label { width: 100%; height: 50px; font-size: 24px; }
  .rank-items { min-height: 80px; }
  .tier-card { width: 70px; height: 80px; }
}