/* ============================================================
 MCATiers - Tiers Page Styles
 ============================================================ */
i {
 font-size: 20px;
}
.page-header {
 display: flex;
 align-items: flex-start;
 justify-content: space-between;
 gap: 1rem;
 padding: 2.5rem 0 1.5rem;
 flex-wrap: wrap;
}
.page-title { font-size: 2rem; font-weight: 900; }
.page-subtitle { color: var(--text3); font-size: 0.9rem; margin-top: 0.25rem; }
.page-header-right { display: flex; gap: 0.75rem; align-items: center; flex-wrap: wrap; }

.search-box {
 display: flex;
 align-items: center;
 gap: 0.5rem;
 background: var(--bg3);
 border: 1px solid var(--border);
 border-radius: 9999px;
 padding: 0.35rem 0.875rem;
 transition: border-color 0.2s;
}
.search-box:focus-within { border-color: var(--accent); }
.search-input {
 background: none; border: none; outline: none;
 color: var(--text); font-size: 0.875rem;
 font-family: inherit; width: 160px;
}

/* ── Carousel ── */
.modes-carousel-wrapper {
 position: relative;
 margin-bottom: 1.25rem;
}
.modes-carousel {
 display: flex;
 gap: 0.625rem;
 overflow-x: auto;
 scroll-behavior: smooth;
 padding: 0.5rem 2.5rem;
 scrollbar-width: none;
 -ms-overflow-style: none;
}
.modes-carousel::-webkit-scrollbar { display: none; }

.mode-chip {
 display: flex;
 flex-direction: column;
 align-items: center;
 gap: 0.375rem;
 padding: 0.625rem 1rem;
 background: var(--bg3);
 border: 2px solid var(--border);
 border-radius: 14px;
 cursor: pointer;
 transition: all 0.2s ease;
 min-width: 100px;
 flex-shrink: 0;
 text-decoration: none;
 user-select: none;
}
.mode-chip:hover {
 border-color: var(--border2);
 transform: translateY(-2px);
}
.mode-chip.active {
 border-color: var(--accent);
 background: var(--accent-glow2);
 box-shadow: 0 0 12px var(--accent-glow2);
}
.mode-chip img {
 width: 36px; height: 36px;
 object-fit: contain;
 image-rendering: pixelated;
 transition: transform 0.2s;
}
.mode-chip:hover img, .mode-chip.active img { transform: scale(1.1); }
.mode-chip-name {
 font-size: 0.7rem;
 font-weight: 700;
 text-transform: uppercase;
 letter-spacing: 0.05em;
 color: var(--text2);
 white-space: nowrap;
}
.mode-chip.active .mode-chip-name { color: var(--accent); }

.carousel-arrow {
 position: absolute;
 top: 50%; transform: translateY(-50%);
 width: 32px; height: 32px;
 background: var(--bg3);
 border: 1px solid var(--border);
 border-radius: 50%;
 cursor: pointer;
 display: flex; align-items: center; justify-content: center;
 font-size: 1.2rem;
 color: var(--text2);
 z-index: 2;
 transition: all 0.2s;
}
.carousel-arrow.left { left: 0; }
.carousel-arrow.right { right: 0; }
.carousel-arrow:hover { border-color: var(--accent); color: var(--accent); }

/* ── Tier Filter Bar ── */
.tier-filter-bar {
 display: flex;
 flex-wrap: wrap;
 gap: 0.375rem;
 margin-bottom: 1.5rem;
 padding: 0.75rem;
 background: var(--bg2);
 border: 1px solid var(--border);
 border-radius: 14px;
}
.tier-filter-btn {
 display: inline-flex;
 align-items: center;
 gap: 0.375rem;
 padding: 0.3rem 0.75rem;
 border-radius: 9999px;
 border: 1px solid transparent;
 background: var(--bg3);
 color: var(--text3);
 font-size: 0.78rem;
 font-weight: 700;
 letter-spacing: 0.04em;
 cursor: pointer;
 transition: all 0.18s;
 font-family: inherit;
}
.tier-filter-btn:hover { color: var(--text); border-color: var(--border); }
.tier-filter-btn.active {
 background: var(--accent-glow2);
 color: var(--accent);
 border-color: var(--accent);
}

/* ── Mode Info Bar ── */
.mode-info-bar {
 display: flex;
 align-items: center;
 gap: 1rem;
 padding: 0.75rem 1.25rem;
 background: var(--bg3);
 border: 1px solid var(--border2);
 border-radius: 12px;
 margin-bottom: 1.5rem;
}
.mode-info-icon { width: 40px; height: 40px; object-fit: contain; image-rendering: pixelated; }
.mode-info-name { font-size: 1.1rem; font-weight: 800; color: var(--text); }
.mode-info-count { font-size: 0.8rem; color: var(--text3); }

/* ── Tier Groups ── */
.tiers-content { padding-bottom: 4rem; }

.tier-group {
 margin-bottom: 2rem;
}
.tier-group-header {
 display: flex;
 align-items: center;
 gap: 0.75rem;
 margin-bottom: 0.75rem;
 padding: 0.5rem 1rem;
 border-radius: 10px;
 background: var(--bg2);
 border-left: 4px solid;
}
.tier-group-label {
 font-size: 1rem;
 font-weight: 800;
 letter-spacing: 0.05em;
}
.tier-group-name { font-size: 0.8rem; color: var(--text3); }
.tier-group-count {
 margin-left: auto;
 font-size: 0.75rem;
 font-family: 'JetBrains Mono', monospace;
 color: var(--text3);
 background: var(--bg3);
 padding: 0.1rem 0.5rem;
 border-radius: 9999px;
 border: 1px solid var(--border);
}
.tier-group-cards {
 display: flex;
 flex-direction: column;
 gap: 0.5rem;
}

.empty-mode {
 text-align: center;
 padding: 4rem 2rem;
 color: var(--text3);
}
.empty-mode .empty-icon { font-size: 3rem; margin-bottom: 1rem; }

/* footer link */
.footer-link {
 font-size: 0.85rem; color: var(--text3);
 text-decoration: none; transition: color 0.2s;
}
.footer-link:hover { color: var(--accent); }

@media (max-width: 700px) {
 .page-header { flex-direction: column; }
 .page-header-right { width: 100%; }
 .search-input { width: 120px; }
 .tier-filter-bar { gap: 0.25rem; }
}

/* ── Tiers Page v2.0 ── */
.scroll-reveal{opacity:0;transform:translateY(20px);transition:opacity .6s,transform .6s;}
.scroll-reveal.visible{opacity:1;transform:translateY(0);}

/* Shiny card area */
.tier-group-cards .player-card {
 position:relative;
}
/* Mode chip active glow */
.mode-chip.active {
 box-shadow:0 0 20px var(--accent-glow);
}
/* Tier group label improvement */
.tier-group-header {
 backdrop-filter:blur(8px);
 background:var(--glass-bg);
 border:1px solid var(--glass-border);
 border-left:4px solid;
 border-radius:10px;
}