:root{
  --bg:#0d1117; --bg2:#11161d; --card:#161b22; --card2:#1c2230;
  --border:#2a313c; --border2:#3a4351;
  --text:#e6edf3; --muted:#8b96a5; --dim:#6b7684;
  --accent:#ff7a18; --accent2:#ffb347;
  --green:#3fb950; --yellow:#d29922; --red:#f85149; --blue:#58a6ff; --purple:#bc8cff;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0; background:var(--bg); color:var(--text);
  font-family:"Segoe UI",system-ui,-apple-system,Roboto,sans-serif;
  line-height:1.55; font-size:15px; overflow-x:hidden}
a{color:var(--accent2); text-decoration:none} a:hover{text-decoration:underline}

nav{position:sticky; top:0; z-index:50; backdrop-filter:blur(12px);
  background:rgba(13,17,23,.82); border-bottom:1px solid var(--border)}
nav .inner{max-width:1180px; margin:0 auto; padding:10px 18px;
  display:flex; align-items:center; gap:6px; flex-wrap:wrap}
nav .brand{font-weight:700; color:var(--accent); margin-right:auto; letter-spacing:.5px}
nav .brand small{color:var(--muted); font-weight:400; font-size:12px; margin-left:8px}
nav a{color:var(--muted); font-size:13px; padding:5px 11px; border-radius:8px}
nav a:hover{color:var(--text); background:var(--card); text-decoration:none}

header{background:radial-gradient(1200px 400px at 50% -120px,#3a1a05 0%,#0d1117 70%);
  padding:64px 20px 46px; text-align:center; border-bottom:1px solid var(--border)}
header .kicker{color:var(--accent); font-size:13px; font-weight:600; letter-spacing:2.5px; text-transform:uppercase}
header h1{margin:12px 0 10px; font-size:clamp(26px,5vw,44px); letter-spacing:.5px; line-height:1.1}
header h1 span{background:linear-gradient(90deg,var(--accent),var(--accent2));
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent}
header p{margin:0 auto; color:var(--muted); font-size:15px; max-width:640px}
header .updated{margin-top:14px; font-size:12.5px; color:var(--dim)}

.wrap{max-width:1180px; margin:0 auto; padding:0 18px 90px}
h2{font-size:23px; margin:52px 0 16px; padding-bottom:9px;
  border-bottom:1px solid var(--border); color:var(--accent2)}
h3{font-size:16px; margin:26px 0 10px}

.stats{display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:12px; margin:26px 0}
.stat{background:var(--card); border:1px solid var(--border); border-radius:12px; padding:16px 18px}
.stat .n{font-size:28px; font-weight:700; color:var(--accent); line-height:1.1}
.stat .l{font-size:12px; color:var(--muted); text-transform:uppercase; letter-spacing:.7px; margin-top:2px}

.note{background:var(--card2); border-left:3px solid var(--accent);
  border-radius:0 10px 10px 0; padding:13px 18px; margin:16px 0; color:var(--muted); font-size:14px}
.note b{color:var(--text)}

.tablewrap{overflow-x:auto; -webkit-overflow-scrolling:touch; border-radius:10px}
table{width:100%; border-collapse:collapse; margin:14px 0; font-size:14px;
  background:var(--card); border-radius:10px; overflow:hidden; min-width:560px}
th,td{padding:10px 13px; text-align:left; border-bottom:1px solid var(--border); white-space:nowrap}
th{background:var(--bg2); color:var(--muted); font-weight:600;
  font-size:11.5px; text-transform:uppercase; letter-spacing:.6px}
th.sortable{cursor:pointer; user-select:none}
th.sortable:hover{color:var(--accent2)}
th .arrow{opacity:.4; font-size:10px; margin-left:3px}
th.sort-asc .arrow,th.sort-desc .arrow{opacity:1; color:var(--accent)}
tbody tr:hover{background:var(--card2)}
tbody tr:last-child td{border-bottom:none}
td.num,th.num{text-align:right; font-variant-numeric:tabular-nums}
td.wrap{white-space:normal}
.dmg{font-weight:700; color:var(--accent2)}
.tag{display:inline-block; font-size:11px; padding:2px 9px; border-radius:20px;
  border:1px solid var(--border2); color:var(--muted)}
.cal{font-family:ui-monospace,"Cascadia Code",Consolas,monospace; font-size:13px; color:var(--blue)}
.bar{height:7px; border-radius:4px; background:linear-gradient(90deg,var(--accent),var(--accent2)); display:inline-block; vertical-align:middle}
.barcell{width:130px}

.filter{display:flex; flex-wrap:wrap; gap:8px; margin:16px 0; position:sticky; top:52px; z-index:20;
  background:var(--bg); padding:8px 0}
.filter button{background:var(--card); color:var(--muted); border:1px solid var(--border2);
  border-radius:20px; padding:7px 16px; cursor:pointer; font-size:13px; transition:.15s}
.filter button:hover{color:var(--text); border-color:var(--accent)}
.filter button.active{background:var(--accent); color:#0d1117; border-color:var(--accent); font-weight:600}
.search{background:var(--card); border:1px solid var(--border2); color:var(--text);
  border-radius:20px; padding:7px 18px; font-size:13px; outline:none; min-width:200px}
.search:focus{border-color:var(--accent)}

.tier{display:inline-flex; align-items:center; gap:7px; font-weight:600}
.dot{width:9px; height:9px; border-radius:50%; flex:none}
.t1 .dot{background:var(--red)} .t1{color:var(--red)}
.t2 .dot{background:var(--accent)} .t2{color:var(--accent)}
.t3 .dot{background:var(--yellow)} .t3{color:var(--yellow)}
.t4 .dot{background:var(--green)} .t4{color:var(--green)}
.t5 .dot{background:var(--muted)} .t5{color:var(--muted)}

.callout{background:linear-gradient(135deg,var(--card2),var(--card));
  border:1px solid var(--border); border-radius:12px; padding:18px 20px; margin:16px 0}
.callout h3{margin-top:0; color:var(--accent2)}
ol li,ul li{margin:6px 0}
strong{color:var(--text)}
.loading{text-align:center; color:var(--muted); padding:30px}
footer{text-align:center; color:var(--dim); font-size:12.5px; padding:36px 18px;
  border-top:1px solid var(--border); background:var(--bg2)}
footer b{color:var(--muted)}
@media(max-width:640px){
  .barcell{display:none}
  nav a{padding:4px 8px; font-size:12px}
  .filter{position:relative; top:0}
}