{"id":8,"date":"2026-05-17T08:11:08","date_gmt":"2026-05-17T08:11:08","guid":{"rendered":"https:\/\/ancienttiers.com\/?page_id=8"},"modified":"2026-05-17T09:40:02","modified_gmt":"2026-05-17T09:40:02","slug":"ancienttiers","status":"publish","type":"page","link":"https:\/\/ancienttiers.com\/","title":{"rendered":"AncientTiers"},"content":{"rendered":"\n

<\/p>\n\n\n\n\n\n\n\n\nAncientTiers \u2014 Minecraft PvP Tier List<\/title>\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\" \/>\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin \/>\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Cinzel:wght@500;700;900&family=Oswald:wght@400;500;600;700&family=Rajdhani:wght@400;500;600;700&display=swap\" rel=\"stylesheet\" \/>\n<style>\n :root {\n --bg-0: #0a0405;\n --bg-1: #14080a;\n --bg-2: #1d0c0f;\n --bg-card: #1a0a0d;\n --line: #2a1115;\n --line-2: #3a1820;\n --red: #d72638;\n --red-deep: #8a0f1c;\n --orange: #ff7a18;\n --orange-soft: #ff9a4a;\n --ember: #ffb347;\n --bone: #f3e9d2;\n --bone-dim: #c9bfa8;\n --muted: #9a7a7e;\n --ok: #4ade80;\n\n --r-sm: 6px;\n --r-md: 10px;\n --r-lg: 14px;\n --r-xl: 20px;\n --r-2xl: 28px;\n\n --ease-out: cubic-bezier(0.16, 1, 0.3, 1);\n --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);\n\n --shadow-md: 0 8px 24px rgba(0,0,0,0.5);\n --shadow-lg: 0 20px 50px rgba(0,0,0,0.6);\n --shadow-glow: 0 0 32px rgba(255,122,24,0.25);\n }\n\n * { box-sizing: border-box; margin: 0; padding: 0; }\n *:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; border-radius: 4px; }\n\n html, body {\n background: var(--bg-0);\n color: var(--bone);\n font-family: 'Rajdhani', sans-serif;\n font-weight: 500;\n overflow-x: hidden;\n min-height: 100vh;\n -webkit-font-smoothing: antialiased;\n }\n\n body {\n background-image:\n radial-gradient(ellipse 80% 50% at 50% -10%, rgba(255,122,24,0.18), transparent 60%),\n radial-gradient(ellipse 60% 40% at 90% 10%, rgba(215,38,56,0.12), transparent 60%),\n radial-gradient(ellipse 50% 40% at 10% 30%, rgba(255,122,24,0.08), transparent 60%);\n }\n\n body::before {\n content: '';\n position: fixed; inset: 0;\n pointer-events: none;\n z-index: 1;\n opacity: 0.04;\n background-image: url(\"data:image\/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http:\/\/www.w3.org\/2000\/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'\/%3E%3C\/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'\/%3E%3C\/svg%3E\");\n }\n\n \/* ---------- EMBERS ---------- *\/\n .embers { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }\n .ember {\n position: absolute;\n bottom: -10px;\n width: 3px; height: 3px;\n background: var(--ember);\n border-radius: 50%;\n box-shadow: 0 0 6px var(--orange);\n animation: rise linear infinite;\n opacity: 0;\n }\n @keyframes rise {\n 0% { transform: translateY(0) translateX(0); opacity: 0; }\n 10% { opacity: 0.8; }\n 90% { opacity: 0.4; }\n 100% { transform: translateY(-110vh) translateX(var(--drift,40px)); opacity: 0; }\n }\n\n \/* ---------- NAV ---------- *\/\n nav.top {\n position: sticky; top: 0; z-index: 50;\n backdrop-filter: blur(14px);\n background: rgba(10,4,5,0.72);\n border-bottom: 1px solid var(--line);\n padding: 14px 28px;\n display: flex; align-items: center; justify-content: space-between;\n }\n .brand { display: flex; align-items: center; gap: 12px; text-decoration: none; }\n .brand-mark {\n width: 40px; height: 40px;\n background: linear-gradient(135deg, #ff5a1f 0%, #d72638 100%);\n display: grid; place-items: center;\n font-family: 'Cinzel', serif; font-weight: 900;\n color: #000; font-size: 20px;\n border-radius: var(--r-md);\n box-shadow: var(--shadow-glow), inset 0 0 0 2px rgba(0,0,0,0.15);\n transform: rotate(-4deg);\n transition: transform 0.4s var(--ease-spring);\n }\n .brand:hover .brand-mark { transform: rotate(-12deg) scale(1.08); }\n .brand-text {\n font-family: 'Cinzel', serif; font-weight: 900;\n letter-spacing: 0.12em;\n font-size: 22px;\n color: var(--bone);\n }\n .brand-text .accent { color: var(--orange); }\n\n .nav-links { display: flex; gap: 6px; }\n .nav-links a {\n color: var(--muted); text-decoration: none;\n font-family: 'Oswald', sans-serif;\n text-transform: uppercase; letter-spacing: 0.15em;\n font-size: 13px;\n padding: 8px 14px;\n border-radius: var(--r-sm);\n transition: all 0.25s var(--ease-out);\n position: relative;\n }\n .nav-links a::after {\n content: '';\n position: absolute; left: 50%; bottom: 2px;\n transform: translateX(-50%);\n width: 0; height: 1px;\n background: var(--orange);\n transition: width 0.25s var(--ease-out);\n }\n .nav-links a:hover { color: var(--orange); }\n .nav-links a:hover::after { width: 60%; }\n\n \/* Kebab menu *\/\n .kebab-wrap { position: relative; }\n .kebab-btn {\n width: 40px; height: 40px;\n background: transparent;\n border: 1px solid var(--line);\n border-radius: var(--r-md);\n cursor: pointer;\n display: grid; place-items: center;\n transition: all 0.25s var(--ease-out);\n color: var(--bone);\n }\n .kebab-btn:hover {\n border-color: var(--orange);\n background: rgba(255,122,24,0.08);\n transform: rotate(90deg);\n }\n .kebab-btn .dots {\n display: flex; flex-direction: column; gap: 3px;\n }\n .kebab-btn .dots span {\n width: 4px; height: 4px;\n background: currentColor;\n border-radius: 50%;\n }\n .kebab-menu {\n position: absolute;\n top: calc(100% + 10px); right: 0;\n min-width: 240px;\n background: var(--bg-1);\n border: 1px solid var(--line-2);\n border-radius: var(--r-lg);\n box-shadow: var(--shadow-lg);\n padding: 8px;\n opacity: 0; visibility: hidden;\n transform: translateY(-8px) scale(0.96);\n transform-origin: top right;\n transition: all 0.22s var(--ease-out);\n z-index: 60;\n }\n .kebab-menu.open {\n opacity: 1; visibility: visible;\n transform: translateY(0) scale(1);\n }\n .kebab-item {\n display: flex; align-items: center; gap: 12px;\n padding: 11px 14px;\n border-radius: var(--r-md);\n color: var(--bone-dim);\n font-family: 'Oswald', sans-serif;\n text-transform: uppercase; letter-spacing: 0.16em;\n font-size: 12px;\n cursor: pointer;\n transition: all 0.18s ease;\n text-decoration: none;\n background: transparent;\n border: none;\n width: 100%;\n text-align: left;\n }\n .kebab-item .ki-icon {\n width: 18px; height: 18px;\n display: grid; place-items: center;\n color: var(--orange);\n flex-shrink: 0;\n }\n .kebab-item:hover {\n background: rgba(255,122,24,0.08);\n color: var(--bone);\n transform: translateX(2px);\n }\n .kebab-divider {\n height: 1px;\n background: var(--line);\n margin: 6px 4px;\n }\n\n \/* ---------- HERO ---------- *\/\n .hero {\n position: relative; z-index: 2;\n padding: 80px 28px 40px;\n text-align: center;\n max-width: 1400px; margin: 0 auto;\n }\n .hero-tag {\n display: inline-block;\n font-family: 'Oswald', sans-serif;\n text-transform: uppercase; letter-spacing: 0.4em;\n font-size: 11px;\n color: var(--orange);\n padding: 6px 14px;\n border: 1px solid var(--orange);\n border-radius: 999px;\n margin-bottom: 24px;\n animation: fadeUp 0.8s var(--ease-out) both;\n }\n .hero h1 {\n font-family: 'Cinzel', serif; font-weight: 900;\n font-size: clamp(48px, 8vw, 110px);\n line-height: 0.95; letter-spacing: 0.04em;\n background: linear-gradient(180deg, #fff 0%, var(--ember) 50%, var(--red) 100%);\n -webkit-background-clip: text; background-clip: text;\n -webkit-text-fill-color: transparent; color: transparent;\n margin-bottom: 18px;\n animation: fadeUp 1s var(--ease-out) 0.1s both;\n text-shadow: 0 0 80px rgba(255,122,24,0.3);\n }\n .hero h1 .slash { color: var(--red); -webkit-text-fill-color: var(--red); }\n .hero p {\n font-size: 18px; color: var(--muted);\n max-width: 620px; margin: 0 auto 36px;\n animation: fadeUp 1s var(--ease-out) 0.2s both;\n }\n @keyframes fadeUp {\n from { opacity: 0; transform: translateY(24px); }\n to { opacity: 1; transform: translateY(0); }\n }\n @keyframes fadeIn {\n from { opacity: 0; }\n to { opacity: 1; }\n }\n\n .stats {\n display: flex; gap: 36px; justify-content: center; flex-wrap: wrap;\n animation: fadeUp 1s var(--ease-out) 0.3s both;\n }\n .stat { text-align: center; }\n .stat-num {\n font-family: 'Cinzel', serif; font-weight: 900;\n font-size: 32px; color: var(--orange);\n font-variant-numeric: tabular-nums;\n }\n .stat-label {\n font-family: 'Oswald', sans-serif;\n text-transform: uppercase; letter-spacing: 0.25em;\n font-size: 10px; color: var(--muted);\n }\n\n \/* ---------- CATEGORIES ---------- *\/\n .categories-wrap {\n position: relative; z-index: 2;\n max-width: 1400px; margin: 40px auto 0; padding: 0 28px;\n }\n .categories-scroll {\n position: relative;\n }\n .categories {\n display: flex; gap: 8px;\n overflow-x: auto;\n padding: 4px 4px 14px;\n scrollbar-width: thin; scrollbar-color: var(--red) transparent;\n scroll-behavior: smooth;\n }\n .categories::-webkit-scrollbar { height: 4px; }\n .categories::-webkit-scrollbar-thumb { background: var(--red); border-radius: 4px; }\n\n .cat-btn {\n flex-shrink: 0;\n background: var(--bg-1); color: var(--muted);\n border: 1px solid var(--line);\n border-radius: var(--r-md);\n padding: 14px 22px;\n font-family: 'Oswald', sans-serif;\n text-transform: uppercase; letter-spacing: 0.18em;\n font-size: 13px;\n cursor: pointer;\n transition: all 0.3s var(--ease-out);\n display: flex; align-items: center; gap: 10px;\n }\n .cat-btn .icon { font-size: 18px; transition: transform 0.3s var(--ease-spring); }\n .cat-btn:hover { color: var(--bone); border-color: var(--orange); transform: translateY(-2px); }\n .cat-btn:hover .icon { transform: scale(1.2); }\n .cat-btn.active {\n background: linear-gradient(135deg, #ff5a1f, #d72638);\n color: #000; border-color: transparent;\n box-shadow: var(--shadow-glow); font-weight: 700;\n }\n .cat-btn.active .icon { filter: drop-shadow(0 0 4px rgba(0,0,0,0.4)); }\n\n \/* ---------- SEARCH ---------- *\/\n .search-wrap {\n position: relative; z-index: 2;\n max-width: 1400px; margin: 18px auto 0; padding: 0 28px;\n }\n .search-bar {\n position: relative;\n background: var(--bg-1);\n border: 1px solid var(--line);\n border-radius: var(--r-md);\n transition: border-color 0.25s, box-shadow 0.25s;\n }\n .search-bar:focus-within {\n border-color: var(--orange);\n box-shadow: 0 0 0 3px rgba(255,122,24,0.12);\n }\n .search-bar .search-icon {\n position: absolute; left: 16px; top: 50%;\n transform: translateY(-50%);\n color: var(--muted);\n pointer-events: none;\n }\n .search-bar input {\n width: 100%;\n background: transparent;\n border: none;\n color: var(--bone);\n padding: 14px 46px 14px 46px;\n font-family: 'Rajdhani', sans-serif;\n font-size: 15px;\n letter-spacing: 0.05em;\n }\n .search-bar input:focus { outline: none; }\n .search-bar input::placeholder { color: var(--muted); }\n .search-clear {\n position: absolute; right: 12px; top: 50%;\n transform: translateY(-50%);\n background: transparent; border: none;\n color: var(--muted); cursor: pointer;\n padding: 6px; border-radius: 4px;\n font-size: 18px; line-height: 1;\n display: none;\n }\n .search-clear:hover { color: var(--orange); }\n .search-bar.has-value .search-clear { display: block; }\n\n \/* ---------- MAIN GRID ---------- *\/\n .main {\n position: relative; z-index: 2;\n max-width: 1400px; margin: 24px auto 80px; padding: 0 28px;\n display: grid; grid-template-columns: 1fr 340px; gap: 28px;\n }\n @media (max-width: 980px) { .main { grid-template-columns: 1fr; } }\n\n \/* ---------- TIER LIST ---------- *\/\n .tier-list {\n display: flex; flex-direction: column; gap: 14px;\n transition: opacity 0.25s var(--ease-out);\n min-height: 400px;\n }\n .tier-list.fading { opacity: 0; pointer-events: none; }\n\n .tier-row {\n background: var(--bg-card);\n border: 1px solid var(--line);\n border-left: 4px solid var(--red);\n border-radius: var(--r-lg);\n display: grid; grid-template-columns: 150px 1fr;\n min-height: 110px;\n overflow: hidden;\n transition: transform 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out), border-color 0.3s ease;\n position: relative;\n will-change: transform;\n }\n .tier-row:hover {\n transform: translateX(3px);\n box-shadow: var(--shadow-md);\n }\n .tier-row.hidden { display: none; }\n\n .tier-row[data-tier=\"HT1\"] { border-left-color: #fff7c2; }\n .tier-row[data-tier=\"LT1\"] { border-left-color: #ffd700; }\n .tier-row[data-tier=\"HT2\"] { border-left-color: #ffa726; }\n .tier-row[data-tier=\"LT2\"] { border-left-color: #ff8c42; }\n .tier-row[data-tier=\"HT3\"] { border-left-color: #ff6b35; }\n .tier-row[data-tier=\"LT3\"] { border-left-color: #ef4444; }\n .tier-row[data-tier=\"HT4\"] { border-left-color: #dc2626; }\n .tier-row[data-tier=\"LT4\"] { border-left-color: #b91c1c; }\n .tier-row[data-tier=\"HT5\"] { border-left-color: #991b1b; }\n .tier-row[data-tier=\"LT5\"] { border-left-color: #c45a3a; }\n\n .tier-label {\n display: flex; flex-direction: column; align-items: center; justify-content: center;\n background: var(--bg-2);\n position: relative;\n border-right: 1px solid var(--line);\n padding: 8px;\n gap: 4px;\n }\n .tier-label::after {\n content: ''; position: absolute;\n right: -1px; top: 10%; bottom: 10%;\n width: 1px;\n background: linear-gradient(180deg, transparent, var(--orange), transparent);\n }\n .tier-rank {\n font-family: 'Cinzel', serif; font-weight: 900;\n font-size: 38px; line-height: 1;\n color: var(--bone);\n text-shadow: 0 2px 12px rgba(0,0,0,0.6);\n letter-spacing: 0.02em;\n }\n .tier-row[data-tier=\"HT1\"] .tier-rank { color: #fff7c2; text-shadow: 0 0 18px rgba(255,247,194,0.5); }\n .tier-row[data-tier=\"LT1\"] .tier-rank { color: #ffd700; text-shadow: 0 0 16px rgba(255,215,0,0.5); }\n .tier-row[data-tier=\"HT2\"] .tier-rank { color: #ffa726; text-shadow: 0 0 14px rgba(255,167,38,0.45); }\n .tier-row[data-tier=\"LT2\"] .tier-rank { color: #ff8c42; text-shadow: 0 0 14px rgba(255,140,66,0.45); }\n .tier-row[data-tier=\"HT3\"] .tier-rank { color: #ff6b35; text-shadow: 0 0 12px rgba(255,107,53,0.45); }\n .tier-row[data-tier=\"LT3\"] .tier-rank { color: #ef4444; text-shadow: 0 0 12px rgba(239,68,68,0.4); }\n .tier-row[data-tier=\"HT4\"] .tier-rank { color: #f87171; text-shadow: 0 0 10px rgba(248,113,113,0.4); }\n .tier-row[data-tier=\"LT4\"] .tier-rank { color: #fb7185; text-shadow: 0 0 10px rgba(251,113,133,0.35); }\n .tier-row[data-tier=\"HT5\"] .tier-rank { color: #fca5a5; text-shadow: 0 0 10px rgba(252,165,165,0.35); }\n .tier-row[data-tier=\"LT5\"] .tier-rank { color: #d4a373; text-shadow: 0 0 10px rgba(212,163,115,0.3); }\n\n .tier-sub {\n font-family: 'Oswald', sans-serif;\n font-size: 10px;\n text-transform: uppercase; letter-spacing: 0.3em;\n color: var(--muted);\n text-align: center;\n }\n .tier-count {\n font-family: 'Oswald', sans-serif;\n font-size: 10px; font-weight: 600;\n color: var(--orange);\n background: rgba(255,122,24,0.1);\n border: 1px solid rgba(255,122,24,0.25);\n padding: 2px 8px;\n border-radius: 999px;\n letter-spacing: 0.1em;\n margin-top: 2px;\n }\n\n .tier-players {\n display: flex; flex-wrap: wrap; gap: 10px;\n padding: 16px;\n align-items: flex-start; align-content: flex-start;\n }\n .empty-tier {\n color: var(--muted); font-style: italic;\n font-size: 13px; align-self: center;\n opacity: 0.5;\n letter-spacing: 0.05em;\n }\n\n .player-card {\n display: flex; align-items: center; gap: 10px;\n background: rgba(255,122,24,0.04);\n border: 1px solid var(--line);\n border-radius: var(--r-md);\n padding: 6px 14px 6px 6px;\n transition: transform 0.25s var(--ease-out), background 0.25s, border-color 0.25s, box-shadow 0.25s;\n cursor: pointer;\n position: relative;\n animation: cardIn 0.4s var(--ease-out) backwards;\n }\n @keyframes cardIn {\n from { opacity: 0; transform: translateY(6px) scale(0.95); }\n to { opacity: 1; transform: translateY(0) scale(1); }\n }\n .player-card:hover {\n background: rgba(255,122,24,0.12);\n border-color: var(--orange);\n transform: translateY(-3px);\n box-shadow: 0 6px 16px rgba(255,122,24,0.22);\n }\n .player-card:active { transform: translateY(-1px); }\n .player-skin {\n width: 32px; height: 32px;\n image-rendering: pixelated;\n border: 1px solid var(--line);\n border-radius: var(--r-sm);\n background: var(--bg-2);\n }\n .player-name {\n font-family: 'Oswald', sans-serif; font-weight: 500;\n letter-spacing: 0.08em; font-size: 14px;\n color: var(--bone);\n }\n .player-card.new::after {\n content: 'NEW';\n position: absolute; top: -8px; right: -8px;\n background: var(--orange); color: #000;\n font-family: 'Oswald', sans-serif;\n font-size: 9px; font-weight: 700;\n padding: 2px 6px; border-radius: 4px;\n letter-spacing: 0.1em;\n animation: pulse 1.5s ease-in-out infinite;\n }\n @keyframes pulse {\n 0%, 100% { transform: scale(1); }\n 50% { transform: scale(1.12); }\n }\n\n \/* ---------- SKELETON ---------- *\/\n .skeleton-row {\n background: var(--bg-card);\n border: 1px solid var(--line);\n border-left: 4px solid var(--line);\n border-radius: var(--r-lg);\n display: grid; grid-template-columns: 150px 1fr;\n min-height: 110px;\n overflow: hidden;\n }\n .skeleton-label, .skeleton-players { padding: 16px; }\n .skeleton-label { background: var(--bg-2); display: grid; place-items: center; }\n .skel-block {\n background: linear-gradient(90deg, var(--bg-2) 0%, var(--line-2) 50%, var(--bg-2) 100%);\n background-size: 200% 100%;\n animation: shimmer 1.4s linear infinite;\n border-radius: 6px;\n }\n @keyframes shimmer {\n 0% { background-position: 200% 0; }\n 100% { background-position: -200% 0; }\n }\n .skel-bar-1 { width: 50px; height: 28px; }\n .skel-bar-2 { width: 80px; height: 8px; margin-top: 8px; }\n .skel-pill { display: inline-block; width: 100px; height: 36px; margin: 4px 6px 4px 0; border-radius: var(--r-md); }\n\n \/* ---------- SIDEBAR ---------- *\/\n .sidebar {\n display: flex; flex-direction: column; gap: 18px;\n position: sticky; top: 80px;\n align-self: start;\n max-height: calc(100vh - 100px);\n }\n @media (max-width: 980px) {\n .sidebar { position: static; max-height: none; }\n }\n\n .panel {\n background: var(--bg-card);\n border: 1px solid var(--line);\n border-radius: var(--r-lg);\n overflow: hidden;\n }\n .panel-head {\n padding: 14px 18px;\n border-bottom: 1px solid var(--line);\n display: flex; align-items: center; justify-content: space-between;\n background: var(--bg-2);\n }\n .panel-title {\n font-family: 'Oswald', sans-serif;\n text-transform: uppercase; letter-spacing: 0.25em;\n font-size: 12px; color: var(--bone);\n display: flex; align-items: center; gap: 10px;\n }\n .legend-list { padding: 14px 18px; }\n .legend-item {\n display: flex; align-items: center; gap: 10px;\n padding: 8px 0;\n font-family: 'Rajdhani', sans-serif;\n font-size: 14px; color: var(--muted);\n }\n .legend-swatch {\n width: 24px; height: 8px;\n border-radius: 3px; flex-shrink: 0;\n }\n .legend-item b {\n color: var(--bone);\n font-family: 'Oswald', sans-serif;\n letter-spacing: 0.1em; margin-right: 6px;\n }\n\n \/* ---------- MODAL ---------- *\/\n .modal-overlay {\n position: fixed; inset: 0;\n background: rgba(0,0,0,0.85);\n backdrop-filter: blur(10px);\n z-index: 100;\n display: none;\n align-items: center; justify-content: center;\n padding: 20px;\n animation: fadeIn 0.25s var(--ease-out);\n overflow-y: auto;\n }\n .modal-overlay.show { display: flex; }\n\n .modal {\n background: var(--bg-1);\n border: 1px solid var(--line-2);\n border-radius: var(--r-xl);\n max-width: 560px; width: 100%;\n overflow: hidden;\n animation: modalIn 0.4s var(--ease-spring);\n box-shadow: var(--shadow-lg);\n position: relative;\n margin: auto;\n }\n .modal.modal-lg { max-width: 720px; }\n @keyframes modalIn {\n from { opacity: 0; transform: translateY(20px) scale(0.94); }\n to { opacity: 1; transform: translateY(0) scale(1); }\n }\n .modal-head {\n padding: 22px 26px;\n background: linear-gradient(135deg, rgba(138,15,28,0.4), transparent);\n border-bottom: 1px solid var(--line);\n display: flex; align-items: center; justify-content: space-between;\n gap: 14px;\n }\n .modal-title {\n font-family: 'Cinzel', serif; font-weight: 900;\n font-size: 22px; letter-spacing: 0.08em;\n color: var(--bone);\n display: flex; align-items: center; gap: 12px;\n }\n .modal-title .accent { color: var(--orange); }\n .modal-close {\n background: transparent; border: none; color: var(--muted);\n font-size: 26px; cursor: pointer; line-height: 1;\n padding: 0; width: 32px; height: 32px;\n border-radius: var(--r-sm);\n transition: all 0.2s;\n display: grid; place-items: center;\n flex-shrink: 0;\n }\n .modal-close:hover { color: var(--orange); background: rgba(255,122,24,0.1); transform: rotate(90deg); }\n .modal-body { padding: 26px; }\n\n \/* About modal *\/\n .about-section { margin-bottom: 28px; }\n .about-section:last-child { margin-bottom: 0; }\n .about-section h3 {\n font-family: 'Oswald', sans-serif;\n text-transform: uppercase; letter-spacing: 0.25em;\n font-size: 13px; color: var(--orange);\n margin-bottom: 12px;\n display: flex; align-items: center; gap: 10px;\n }\n .about-section h3::before {\n content: '\u25c6'; color: var(--red);\n }\n .about-section p {\n color: var(--bone-dim);\n font-size: 15px;\n line-height: 1.7;\n margin-bottom: 10px;\n }\n .about-tiers {\n display: grid; grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));\n gap: 8px;\n margin-top: 12px;\n }\n .about-tier-chip {\n padding: 10px 6px;\n text-align: center;\n background: var(--bg-2);\n border: 1px solid var(--line);\n border-radius: var(--r-md);\n font-family: 'Cinzel', serif;\n font-weight: 900;\n font-size: 14px;\n letter-spacing: 0.05em;\n }\n .about-cta {\n display: flex; gap: 10px; flex-wrap: wrap;\n margin-top: 18px;\n }\n .btn {\n flex: 1; min-width: 140px;\n background: linear-gradient(135deg, #ff5a1f, #d72638);\n color: #000; border: none;\n border-radius: var(--r-md);\n padding: 13px 18px;\n font-family: 'Oswald', sans-serif;\n text-transform: uppercase; letter-spacing: 0.2em;\n font-size: 12px; font-weight: 700;\n cursor: pointer;\n transition: all 0.25s var(--ease-out);\n text-decoration: none;\n display: inline-flex; align-items: center; justify-content: center; gap: 8px;\n }\n .btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-glow); }\n .btn-outline {\n background: transparent;\n color: var(--bone);\n border: 1px solid var(--line-2);\n }\n .btn-outline:hover {\n background: rgba(255,122,24,0.06);\n border-color: var(--orange);\n color: var(--orange);\n }\n\n \/* Player profile modal *\/\n .profile-head {\n display: flex; align-items: center; gap: 18px;\n padding: 26px;\n background: linear-gradient(135deg, rgba(138,15,28,0.4), transparent);\n border-bottom: 1px solid var(--line);\n }\n .profile-avatar {\n width: 80px; height: 80px;\n image-rendering: pixelated;\n border: 2px solid var(--orange);\n border-radius: var(--r-md);\n background: var(--bg-2);\n box-shadow: 0 0 24px rgba(255,122,24,0.3);\n }\n .profile-name {\n font-family: 'Cinzel', serif; font-weight: 900;\n font-size: 26px; letter-spacing: 0.05em;\n color: var(--bone);\n margin-bottom: 6px;\n word-break: break-word;\n }\n .profile-best {\n display: inline-flex; align-items: center; gap: 8px;\n font-family: 'Oswald', sans-serif;\n text-transform: uppercase; letter-spacing: 0.2em;\n font-size: 11px;\n color: var(--muted);\n }\n .profile-best .best-tier {\n color: #000;\n background: linear-gradient(135deg, #ffd700, #ff7a18);\n padding: 3px 10px;\n border-radius: 4px;\n font-weight: 700;\n letter-spacing: 0.08em;\n }\n .profile-info { flex: 1; min-width: 0; }\n .profile-grid {\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));\n gap: 12px;\n padding: 22px 26px 26px;\n }\n .profile-cat {\n background: var(--bg-2);\n border: 1px solid var(--line);\n border-radius: var(--r-md);\n padding: 14px;\n display: flex; flex-direction: column; gap: 6px;\n transition: border-color 0.2s, transform 0.2s;\n }\n .profile-cat.has-tier:hover {\n border-color: var(--orange);\n transform: translateY(-2px);\n }\n .profile-cat-name {\n font-family: 'Oswald', sans-serif;\n text-transform: uppercase; letter-spacing: 0.2em;\n font-size: 10px; color: var(--muted);\n }\n .profile-cat-tier {\n font-family: 'Cinzel', serif; font-weight: 900;\n font-size: 22px;\n color: var(--bone);\n }\n .profile-cat-tier.unranked {\n color: var(--muted);\n font-size: 16px;\n font-style: italic;\n font-weight: 500;\n }\n\n footer {\n border-top: 1px solid var(--line);\n padding: 30px 28px;\n text-align: center; color: var(--muted);\n font-family: 'Oswald', sans-serif;\n text-transform: uppercase; letter-spacing: 0.25em;\n font-size: 11px;\n position: relative; z-index: 2;\n }\n footer .accent { color: var(--orange); }\n\n @media (max-width: 720px) {\n .nav-links { display: none; }\n nav.top { padding: 12px 18px; }\n .hero { padding: 50px 18px 30px; }\n .main { padding: 0 18px; }\n .categories-wrap { padding: 0 18px; }\n .search-wrap { padding: 0 18px; }\n .tier-row { grid-template-columns: 108px 1fr; }\n .tier-rank { font-size: 28px; }\n .modal-head, .modal-body, .profile-head, .profile-grid { padding-left: 18px; padding-right: 18px; }\n .profile-head { flex-direction: column; align-items: flex-start; }\n }\n<\/style>\n<\/head>\n<body>\n\n<div class=\"embers\" id=\"embers\"><\/div>\n\n<nav class=\"top\">\n <a href=\"#\" class=\"brand\">\n <div class=\"brand-mark\">A<\/div>\n <div class=\"brand-text\">ANCIENT<span class=\"accent\">TIERS<\/span><\/div>\n <\/a>\n <div class=\"nav-links\">\n <a href=\"#tiers\">Tiers<\/a>\n <a href=\"#\" onclick=\"openModal('aboutModal'); return false;\">About<\/a>\n <\/div>\n <div class=\"kebab-wrap\">\n <button class=\"kebab-btn\" id=\"kebabBtn\" aria-label=\"Menu\">\n <div class=\"dots\"><span><\/span><span><\/span><span><\/span><\/div>\n <\/button>\n <div class=\"kebab-menu\" id=\"kebabMenu\">\n <button class=\"kebab-item\" onclick=\"closeKebab(); openModal('aboutModal');\">\n <span class=\"ki-icon\">\u25c6<\/span> About AncientTiers\n <\/button>\n <button class=\"kebab-item\" onclick=\"closeKebab(); openModal('howModal');\">\n <span class=\"ki-icon\">\u2692<\/span> How Testing Works\n <\/button>\n <button class=\"kebab-item\" onclick=\"closeKebab(); openModal('applyModal');\">\n <span class=\"ki-icon\">\u2694<\/span> Apply to be Tested\n <\/button>\n <div class=\"kebab-divider\"><\/div>\n <a class=\"kebab-item\" href=\"https:\/\/discord.gg\/x4Ene6FE9\" target=\"_blank\" rel=\"noopener\" onclick=\"closeKebab();\">\n <span class=\"ki-icon\">\u25c8<\/span> Join Discord\n <\/a>\n <\/div>\n <\/div>\n<\/nav>\n\n<section class=\"hero\">\n <div class=\"hero-tag\">\u2694 Minecraft PvP Tier Testing \u2694<\/div>\n <h1>FORGED <span class=\"slash\">\/<\/span> RANKED<\/h1>\n <p>The definitive tier list for Minecraft PvP. Tested. Verified. Ancient.<\/p>\n <div class=\"stats\">\n <div class=\"stat\"><div class=\"stat-num\" id=\"stat-tested\" data-target=\"0\">0<\/div><div class=\"stat-label\">Tested<\/div><\/div>\n <div class=\"stat\"><div class=\"stat-num\" id=\"stat-rankings\" data-target=\"0\">0<\/div><div class=\"stat-label\">Rankings<\/div><\/div>\n <div class=\"stat\"><div class=\"stat-num\">7<\/div><div class=\"stat-label\">Game Modes<\/div><\/div>\n <div class=\"stat\"><div class=\"stat-num\">10<\/div><div class=\"stat-label\">Tier Levels<\/div><\/div>\n <\/div>\n<\/section>\n\n<div class=\"categories-wrap\">\n <div class=\"categories-scroll\">\n <div class=\"categories\" id=\"categories\">\n <button class=\"cat-btn active\" data-cat=\"overall\"><span class=\"icon\">\ud83d\udc51<\/span>Overall<\/button>\n <button class=\"cat-btn\" data-cat=\"sword\"><span class=\"icon\">\u2694<\/span>Sword<\/button>\n <button class=\"cat-btn\" data-cat=\"axe\"><span class=\"icon\">\ud83e\ude93<\/span>Axe<\/button>\n <button class=\"cat-btn\" data-cat=\"mace\"><span class=\"icon\">\ud83d\udd28<\/span>Mace<\/button>\n <button class=\"cat-btn\" data-cat=\"uhc\"><span class=\"icon\">\u2764<\/span>UHC<\/button>\n <button class=\"cat-btn\" data-cat=\"smp\"><span class=\"icon\">\u26cf<\/span>SMP<\/button>\n <button class=\"cat-btn\" data-cat=\"pot\"><span class=\"icon\">\ud83e\uddea<\/span>Pot<\/button>\n <button class=\"cat-btn\" data-cat=\"vanilla\"><span class=\"icon\">\ud83d\udc8e<\/span>Crystal<\/button>\n <\/div>\n <\/div>\n<\/div>\n\n<div class=\"search-wrap\">\n <div class=\"search-bar\" id=\"searchBar\">\n <span class=\"search-icon\">\u2315<\/span>\n <input type=\"text\" id=\"searchInput\" placeholder=\"Search players\u2026\" autocomplete=\"off\" \/>\n <button class=\"search-clear\" id=\"searchClear\" aria-label=\"Clear\">\u00d7<\/button>\n <\/div>\n<\/div>\n\n<div class=\"main\">\n <div class=\"tier-list\" id=\"tierList\"><\/div>\n\n <aside class=\"sidebar\">\n <div class=\"panel\">\n <div class=\"panel-head\">\n <div class=\"panel-title\">Tier Legend<\/div>\n <\/div>\n <div class=\"legend-list\">\n <div class=\"legend-item\"><div class=\"legend-swatch\" style=\"background:#fff7c2\"><\/div><b>HT1<\/b> Elite \u2014 top of the pile<\/div>\n <div class=\"legend-item\"><div class=\"legend-swatch\" style=\"background:#ffd700\"><\/div><b>LT1 \u2013 HT2<\/b> Top tier<\/div>\n <div class=\"legend-item\"><div class=\"legend-swatch\" style=\"background:#ff6b35\"><\/div><b>LT2 \u2013 LT3<\/b> Strong<\/div>\n <div class=\"legend-item\"><div class=\"legend-swatch\" style=\"background:#dc2626\"><\/div><b>HT4 \u2013 HT5<\/b> Solid<\/div>\n <div class=\"legend-item\"><div class=\"legend-swatch\" style=\"background:#c45a3a\"><\/div><b>LT5<\/b> Ranked<\/div>\n <\/div>\n <\/div>\n <\/aside>\n<\/div>\n\n<footer>\n \u00a9 2026 <span class=\"accent\">AncientTiers<\/span> \u00b7 Not affiliated with Mojang\n<\/footer>\n\n<!-- ABOUT MODAL -->\n<div class=\"modal-overlay\" id=\"aboutModal\">\n <div class=\"modal modal-lg\">\n <div class=\"modal-head\">\n <div class=\"modal-title\">\u2694 About <span class=\"accent\">AncientTiers<\/span><\/div>\n <button class=\"modal-close\" onclick=\"closeModal('aboutModal')\">\u00d7<\/button>\n <\/div>\n <div class=\"modal-body\">\n <div class=\"about-section\">\n <h3>What is AncientTiers?<\/h3>\n <p>AncientTiers is a competitive Minecraft PvP tier list, ranking players across seven different combat disciplines. From sword to mace, crystal to UHC, every player on this site has been tested against the best.<\/p>\n <p>Our rankings aren’t fan votes or popularity \u2014 they’re the result of head-to-head testing by verified testers under standardised conditions.<\/p>\n <\/div>\n <div class=\"about-section\">\n <h3>The Tier System<\/h3>\n <p>Players are ranked from HT1 (the absolute elite) down to LT5 (ranked, learning). Each main tier has a High and Low subtier.<\/p>\n <div class=\"about-tiers\">\n <div class=\"about-tier-chip\" style=\"color:#fff7c2\">HT1<\/div>\n <div class=\"about-tier-chip\" style=\"color:#ffd700\">LT1<\/div>\n <div class=\"about-tier-chip\" style=\"color:#ffa726\">HT2<\/div>\n <div class=\"about-tier-chip\" style=\"color:#ff8c42\">LT2<\/div>\n <div class=\"about-tier-chip\" style=\"color:#ff6b35\">HT3<\/div>\n <div class=\"about-tier-chip\" style=\"color:#ef4444\">LT3<\/div>\n <div class=\"about-tier-chip\" style=\"color:#f87171\">HT4<\/div>\n <div class=\"about-tier-chip\" style=\"color:#fb7185\">LT4<\/div>\n <div class=\"about-tier-chip\" style=\"color:#fca5a5\">HT5<\/div>\n <div class=\"about-tier-chip\" style=\"color:#d4a373\">LT5<\/div>\n <\/div>\n <\/div>\n <div class=\"about-section\">\n <h3>Game Modes<\/h3>\n <p>We cover seven disciplines: <strong style=\"color:var(--bone)\">Sword, Axe, Mace, UHC, SMP, Pot, and Crystal<\/strong>. A player can hold a different tier in each \u2014 switch between modes using the buttons above to see the rankings for each.<\/p>\n <\/div>\n <div class=\"about-cta\">\n <button class=\"btn\" onclick=\"closeModal('aboutModal'); openModal('applyModal');\">Apply for Testing<\/button>\n <a class=\"btn btn-outline\" href=\"https:\/\/discord.gg\/x4Ene6FE9\" target=\"_blank\" rel=\"noopener\">Join Our Discord<\/a>\n <\/div>\n <\/div>\n <\/div>\n<\/div>\n\n<!-- HOW TESTING WORKS MODAL -->\n<div class=\"modal-overlay\" id=\"howModal\">\n <div class=\"modal\">\n <div class=\"modal-head\">\n <div class=\"modal-title\">\u2692 <span class=\"accent\">Testing<\/span><\/div>\n <button class=\"modal-close\" onclick=\"closeModal('howModal')\">\u00d7<\/button>\n <\/div>\n <div class=\"modal-body\">\n <div class=\"about-section\">\n <h3>Step 1 \u2014 Apply<\/h3>\n <p>Join our Discord and head to the <strong style=\"color:var(--bone)\">#queues<\/strong> channel under the <strong style=\"color:var(--bone)\">HT3<\/strong> category. Open a ticket in the <strong style=\"color:var(--bone)\">ticket<\/strong> channel with your IGN and the game mode you want to be tested in.<\/p>\n <\/div>\n <div class=\"about-section\">\n <h3>Step 2 \u2014 Get Queued<\/h3>\n <p>A verified tester will pick up your application. Wait times vary by game mode \u2014 Sword and SMP are usually fastest.<\/p>\n <\/div>\n <div class=\"about-section\">\n <h3>Step 3 \u2014 The Fight<\/h3>\n <p>You’ll fight your tester in a best-of-five on a standardised arena. They’ll observe your movement, combos, defence, and game sense. No mods, no cheats, no exceptions.<\/p>\n <\/div>\n <div class=\"about-section\">\n <h3>Step 4 \u2014 Your Tier<\/h3>\n <p>After the test, you’ll be placed in a tier from HT1 to LT5. Your placement is final until you request a re-test.<\/p>\n <\/div>\n <div class=\"about-cta\">\n <button class=\"btn\" onclick=\"closeModal('howModal'); openModal('applyModal');\">Ready to Apply<\/button>\n <\/div>\n <\/div>\n <\/div>\n<\/div>\n\n<!-- APPLY MODAL -->\n<div class=\"modal-overlay\" id=\"applyModal\">\n <div class=\"modal\">\n <div class=\"modal-head\">\n <div class=\"modal-title\">\u2694 <span class=\"accent\">Apply<\/span><\/div>\n <button class=\"modal-close\" onclick=\"closeModal('applyModal')\">\u00d7<\/button>\n <\/div>\n <div class=\"modal-body\">\n <div class=\"about-section\">\n <h3>Get Tested<\/h3>\n <p>All applications go through our Discord server. Join, head to <strong style=\"color:var(--bone)\">#queues<\/strong> under the <strong style=\"color:var(--bone)\">HT3<\/strong> category, then open a ticket in the <strong style=\"color:var(--bone)\">ticket<\/strong> channel.<\/p>\n <p>Make sure your Minecraft account is linked before applying \u2014 the bot needs your IGN to track your ranking.<\/p>\n <\/div>\n <div class=\"about-cta\">\n <a class=\"btn\" href=\"https:\/\/discord.gg\/x4Ene6FE9\" target=\"_blank\" rel=\"noopener\">Open Discord<\/a>\n <button class=\"btn btn-outline\" onclick=\"closeModal('applyModal')\">Maybe Later<\/button>\n <\/div>\n <\/div>\n <\/div>\n<\/div>\n\n<!-- PLAYER PROFILE MODAL -->\n<div class=\"modal-overlay\" id=\"profileModal\">\n <div class=\"modal\">\n <div class=\"profile-head\">\n <img decoding=\"async\" class=\"profile-avatar\" id=\"profileAvatar\" src=\"\" alt=\"\" \/>\n <div class=\"profile-info\">\n <div class=\"profile-name\" id=\"profileName\"><\/div>\n <div class=\"profile-best\">\n Best Overall <span class=\"best-tier\" id=\"profileBest\">\u2014<\/span>\n <\/div>\n <\/div>\n <button class=\"modal-close\" onclick=\"closeModal('profileModal')\">\u00d7<\/button>\n <\/div>\n <div class=\"profile-grid\" id=\"profileGrid\"><\/div>\n <\/div>\n<\/div>\n\n<script>\n \/* ===== CONFIG ===== *\/\n const API_BASE = 'https:\/\/api.ancienttiers.com:20096';\n const POLL_INTERVAL_MS = 20000;\n\n \/* ===== EMBERS ===== *\/\n const embersContainer = document.getElementById('embers');\n for (let i = 0; i < 30; i++) {\n const e = document.createElement('div');\n e.className = 'ember';\n e.style.left = Math.random() * 100 + '%';\n e.style.animationDuration = (8 + Math.random() * 10) + 's';\n e.style.animationDelay = Math.random() * 12 + 's';\n e.style.setProperty('--drift', (Math.random() * 80 - 40) + 'px');\n e.style.background = Math.random() > 0.5 ? '#ff7a18' : '#ffb347';\n embersContainer.appendChild(e);\n }\n\n \/* ===== CONSTANTS ===== *\/\n const TIERS_DISPLAY = ['HT1','LT1','HT2','LT2','HT3','LT3','HT4','LT4','HT5','LT5'];\n const TIER_RANK = { HT1:1, LT1:2, HT2:3, LT2:4, HT3:5, LT3:6, HT4:7, LT4:8, HT5:9, LT5:10 };\n const CATEGORIES = ['sword','axe','mace','uhc','smp','pot','vanilla'];\n const CATEGORY_LABELS = { sword:'Sword', axe:'Axe', mace:'Mace', uhc:'UHC', smp:'SMP', pot:'Pot', vanilla:'Crystal' };\n\n let playerData = {};\n CATEGORIES.forEach(c => {\n playerData[c] = {};\n TIERS_DISPLAY.forEach(t => playerData[c][t] = []);\n });\n\n let activeCat = 'overall';\n let searchTerm = '';\n let lastSnapshot = new Set();\n let hasLoaded = false;\n\n \/* ===== HELPERS ===== *\/\n function skinUrl(name, size = 64) {\n return `https:\/\/mc-heads.net\/avatar\/${encodeURIComponent(name)}\/${size}`;\n }\n\n function normalizeTier(raw) {\n if (raw == null) return null;\n const s = String(raw).toUpperCase().replace(\/[\\s_-]+\/g, '');\n let m = s.match(\/^(H|L)T?([1-5])$\/);\n if (m) return m[1] + 'T' + m[2];\n m = s.match(\/(HIGH|LOW)TIER([1-5])\/);\n if (m) return m[1][0] + 'T' + m[2];\n m = s.match(\/TIER([1-5])(HIGH|LOW)\/);\n if (m) return m[2][0] + 'T' + m[1];\n return null;\n }\n\n function normalizeGamemode(raw) {\n if (raw == null) return null;\n const s = String(raw).toLowerCase().trim();\n const aliases = {\n sword:'sword', swords:'sword',\n mace:'mace', maces:'mace',\n axe:'axe', axes:'axe',\n vanilla:'vanilla', crystal:'vanilla', crystalpvp:'vanilla', cpvp:'vanilla',\n smp:'smp',\n pot:'pot', potion:'pot', pots:'pot',\n uhc:'uhc'\n };\n return aliases[s] || (CATEGORIES.includes(s) ? s : null);\n }\n\n \/* ===== API ===== *\/\n async function fetchLeaderboard() {\n const res = await fetch(`${API_BASE}\/api\/leaderboard`, { cache: 'no-store' });\n if (!res.ok) throw new Error('HTTP ' + res.status);\n const json = await res.json();\n console.log('AncientTiers API response:', json);\n return json.results || [];\n }\n\n function rebuildFromApi(rows) {\n const fresh = {};\n CATEGORIES.forEach(c => {\n fresh[c] = {};\n TIERS_DISPLAY.forEach(t => fresh[c][t] = []);\n });\n const currentSnapshot = new Set();\n rows.forEach(row => {\n const ign = (row.ign || '').trim();\n const tier = normalizeTier(row.tier);\n const mode = normalizeGamemode(row.gamemode);\n if (!ign || !tier || !mode) return;\n if (!fresh[mode][tier]) return;\n if (!fresh[mode][tier].includes(ign)) {\n fresh[mode][tier].push(ign);\n }\n currentSnapshot.add(`${ign}|${mode}|${tier}`);\n });\n return { fresh, snapshot: currentSnapshot };\n }\n\n async function loadFromApi(isInitial = false) {\n try {\n const rows = await fetchLeaderboard();\n const { fresh } = rebuildFromApi(rows);\n playerData = fresh;\n hasLoaded = true;\n renderTierList();\n updateStats(rows.length);\n } catch (err) {\n console.error('AncientTiers leaderboard failed:', err);\n hasLoaded = true;\n renderTierList();\n }\n }\n\n \/* ===== OVERALL VIEW \u2014 best tier per player across all gamemodes ===== *\/\n function buildOverall() {\n const overall = {};\n TIERS_DISPLAY.forEach(t => overall[t] = []);\n const bestByPlayer = new Map();\n CATEGORIES.forEach(cat => {\n TIERS_DISPLAY.forEach(tier => {\n (playerData[cat]?.[tier] || []).forEach(name => {\n const r = TIER_RANK[tier];\n const cur = bestByPlayer.get(name);\n if (!cur || r < cur.rank) bestByPlayer.set(name, { tier, rank: r });\n });\n });\n });\n bestByPlayer.forEach((info, name) => {\n overall[info.tier].push(name);\n });\n return { overall, bestByPlayer };\n }\n\n \/* ===== RENDER ===== *\/\n function renderSkeleton() {\n const list = document.getElementById('tierList');\n list.innerHTML = '';\n for (let i = 0; i < 6; i++) {\n const r = document.createElement('div');\n r.className = 'skeleton-row';\n r.innerHTML = `\n <div class=\"skeleton-label\"><div><div class=\"skel-block skel-bar-1\"><\/div><div class=\"skel-block skel-bar-2\"><\/div><\/div><\/div>\n <div class=\"skeleton-players\">\n <div class=\"skel-block skel-pill\"><\/div>\n <div class=\"skel-block skel-pill\" style=\"width:130px\"><\/div>\n <div class=\"skel-block skel-pill\" style=\"width:90px\"><\/div>\n <\/div>`;\n list.appendChild(r);\n }\n }\n\n function renderTierList() {\n const list = document.getElementById('tierList');\n if (!hasLoaded) { renderSkeleton(); return; }\n\n \/\/ Smooth fade transition on rebuild\n list.classList.add('fading');\n\n setTimeout(() => {\n list.innerHTML = '';\n\n let data, bestMap = null;\n if (activeCat === 'overall') {\n const built = buildOverall();\n data = built.overall;\n bestMap = built.bestByPlayer;\n } else {\n data = playerData[activeCat] || {};\n }\n\n const term = searchTerm.trim().toLowerCase();\n\n TIERS_DISPLAY.forEach((tier, idx) => {\n const row = document.createElement('div');\n row.className = 'tier-row';\n row.dataset.tier = tier;\n\n let arr = (data[tier] || []).slice();\n if (term) arr = arr.filter(n => n.toLowerCase().includes(term));\n\n \/\/ Sort\n if (activeCat === 'overall' && bestMap) {\n arr.sort((a, b) => {\n const ra = bestMap.get(a)?.rank ?? 99;\n const rb = bestMap.get(b)?.rank ?? 99;\n if (ra !== rb) return ra - rb;\n return a.localeCompare(b);\n });\n } else {\n arr.sort((a, b) => a.localeCompare(b));\n }\n\n const label = document.createElement('div');\n label.className = 'tier-label';\n const tierType = tier.startsWith('HT') ? 'High Tier' : 'Low Tier';\n const tierNum = tier.slice(2);\n label.innerHTML = `\n <div class=\"tier-rank\">${tier}<\/div>\n <div class=\"tier-sub\">${tierType} ${tierNum}<\/div>\n ${arr.length > 0 ? `<div class=\"tier-count\">${arr.length}<\/div>` : ''}`;\n row.appendChild(label);\n\n const players = document.createElement('div');\n players.className = 'tier-players';\n\n if (arr.length === 0) {\n const empty = document.createElement('div');\n empty.className = 'empty-tier';\n empty.textContent = term ? '\u2014 no matches \u2014' : '\u2014 no players ranked \u2014';\n players.appendChild(empty);\n } else {\n arr.forEach((p, i) => {\n const card = document.createElement('div');\n card.className = 'player-card';\n card.style.animationDelay = (i * 20) + 'ms';\n card.innerHTML = `\n <img decoding=\"async\" class=\"player-skin\" src=\"${skinUrl(p)}\" alt=\"${p}\" loading=\"lazy\" onerror=\"this.src='https:\/\/mc-heads.net\/avatar\/MHF_Steve\/64'\" \/>\n <span class=\"player-name\">${escapeHtml(p)}<\/span>`;\n card.addEventListener('click', () => openPlayerProfile(p));\n players.appendChild(card);\n });\n }\n row.appendChild(players);\n list.appendChild(row);\n });\n\n \/\/ Force reflow then fade back in\n void list.offsetWidth;\n list.classList.remove('fading');\n }, hasLoaded ? 150 : 0);\n }\n\n function escapeHtml(s) {\n return String(s).replace(\/[&<>\"']\/g, c => ({'&':'&','<':'<','>':'>','\"':'"',\"'\":'''}[c]));\n }\n\n \/* ===== STATS ===== *\/\n function animateNumber(el, target, duration = 900) {\n const start = parseInt(el.textContent) || 0;\n if (start === target) return;\n const startTime = performance.now();\n function tick(now) {\n const t = Math.min(1, (now - startTime) \/ duration);\n \/\/ ease-out cubic\n const eased = 1 - Math.pow(1 - t, 3);\n el.textContent = Math.round(start + (target - start) * eased);\n if (t < 1) requestAnimationFrame(tick);\n }\n requestAnimationFrame(tick);\n }\n\n function updateStats(totalRankings = null) {\n const unique = new Set();\n let count = 0;\n CATEGORIES.forEach(cat => {\n TIERS_DISPLAY.forEach(tier => {\n (playerData[cat]?.[tier] || []).forEach(n => {\n unique.add(n);\n count++;\n });\n });\n });\n animateNumber(document.getElementById('stat-tested'), unique.size);\n animateNumber(document.getElementById('stat-rankings'), totalRankings ?? count);\n }\n\n \/* ===== CATEGORIES ===== *\/\n document.querySelectorAll('.cat-btn').forEach(btn => {\n btn.addEventListener('click', () => {\n if (btn.classList.contains('active')) return;\n document.querySelectorAll('.cat-btn').forEach(b => b.classList.remove('active'));\n btn.classList.add('active');\n activeCat = btn.dataset.cat;\n renderTierList();\n });\n });\n\n \/* ===== SEARCH ===== *\/\n const searchBar = document.getElementById('searchBar');\n const searchInput = document.getElementById('searchInput');\n const searchClear = document.getElementById('searchClear');\n let searchTimer = null;\n searchInput.addEventListener('input', (e) => {\n searchTerm = e.target.value;\n searchBar.classList.toggle('has-value', !!searchTerm);\n clearTimeout(searchTimer);\n searchTimer = setTimeout(() => renderTierList(), 120);\n });\n searchClear.addEventListener('click', () => {\n searchInput.value = '';\n searchTerm = '';\n searchBar.classList.remove('has-value');\n renderTierList();\n searchInput.focus();\n });\n\n \/* ===== KEBAB MENU ===== *\/\n const kebabBtn = document.getElementById('kebabBtn');\n const kebabMenu = document.getElementById('kebabMenu');\n function closeKebab() { kebabMenu.classList.remove('open'); }\n kebabBtn.addEventListener('click', (e) => {\n e.stopPropagation();\n kebabMenu.classList.toggle('open');\n });\n document.addEventListener('click', (e) => {\n if (!kebabMenu.contains(e.target) && e.target !== kebabBtn) closeKebab();\n });\n\n \/* ===== MODALS ===== *\/\n function openModal(id) { document.getElementById(id).classList.add('show'); }\n function closeModal(id) { document.getElementById(id).classList.remove('show'); }\n document.querySelectorAll('.modal-overlay').forEach(m => {\n m.addEventListener('click', e => { if (e.target === m) m.classList.remove('show'); });\n });\n document.addEventListener('keydown', e => {\n if (e.key === 'Escape') {\n document.querySelectorAll('.modal-overlay.show').forEach(m => m.classList.remove('show'));\n closeKebab();\n }\n });\n\n \/* ===== PLAYER PROFILE ===== *\/\n function openPlayerProfile(name) {\n document.getElementById('profileAvatar').src = `https:\/\/mc-heads.net\/avatar\/${encodeURIComponent(name)}\/128`;\n document.getElementById('profileAvatar').onerror = function() {\n this.src = 'https:\/\/mc-heads.net\/avatar\/MHF_Steve\/128';\n };\n document.getElementById('profileName').textContent = name;\n\n \/\/ Find best tier and per-category tiers\n let bestTier = null;\n const perCat = {};\n CATEGORIES.forEach(cat => {\n let foundTier = null;\n TIERS_DISPLAY.forEach(t => {\n if ((playerData[cat]?.[t] || []).includes(name)) {\n foundTier = t;\n }\n });\n perCat[cat] = foundTier;\n if (foundTier) {\n if (!bestTier || TIER_RANK[foundTier] < TIER_RANK[bestTier]) bestTier = foundTier;\n }\n });\n\n document.getElementById('profileBest').textContent = bestTier || 'Unranked';\n\n const grid = document.getElementById('profileGrid');\n grid.innerHTML = '';\n CATEGORIES.forEach(cat => {\n const tier = perCat[cat];\n const cell = document.createElement('div');\n cell.className = 'profile-cat' + (tier ? ' has-tier' : '');\n cell.innerHTML = `\n <div class=\"profile-cat-name\">${CATEGORY_LABELS[cat]}<\/div>\n <div class=\"profile-cat-tier${tier ? '' : ' unranked'}\">${tier || 'Unranked'}<\/div>`;\n if (tier) {\n cell.style.cursor = 'pointer';\n cell.addEventListener('click', () => {\n closeModal('profileModal');\n document.querySelectorAll('.cat-btn').forEach(b => b.classList.remove('active'));\n document.querySelector(`.cat-btn[data-cat=\"${cat}\"]`).classList.add('active');\n activeCat = cat;\n renderTierList();\n });\n }\n grid.appendChild(cell);\n });\n\n openModal('profileModal');\n }\n\n \/* ===== INIT ===== *\/\n renderSkeleton();\n loadFromApi(true);\n setInterval(() => loadFromApi(false), POLL_INTERVAL_MS);\n<\/script>\n\n<\/body>\n<\/html>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>AncientTiers \u2014 Minecraft PvP Tier List A ANCIENTTIERS Tiers About \u25c6 About AncientTiers \u2692 How Testing Works \u2694 Apply to be Tested \u25c8 Join Discord \u2694 Minecraft PvP Tier Testing \u2694 FORGED \/ RANKED The definitive tier list for Minecraft PvP. Tested. Verified. Ancient. 0 Tested 0 Rankings 7 Game Modes 10 Tier Levels \ud83d\udc51Overall […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-8","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/ancienttiers.com\/index.php?rest_route=\/wp\/v2\/pages\/8","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ancienttiers.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/ancienttiers.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/ancienttiers.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ancienttiers.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=8"}],"version-history":[{"count":5,"href":"https:\/\/ancienttiers.com\/index.php?rest_route=\/wp\/v2\/pages\/8\/revisions"}],"predecessor-version":[{"id":22,"href":"https:\/\/ancienttiers.com\/index.php?rest_route=\/wp\/v2\/pages\/8\/revisions\/22"}],"wp:attachment":[{"href":"https:\/\/ancienttiers.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=8"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}