/* style.css - cải tiến, animation, modal, responsive */
*{box-sizing:border-box}
body{margin:0;background:radial-gradient(circle at top,#081027,#030514);color:#e6eef8;font-family:Inter,Segoe UI,Roboto,Arial,sans-serif}
header{text-align:center;padding:36px 12px}
h1{margin:0;font-size:30px}
#tabs{display:flex;justify-content:center;gap:10px;margin-top:18px}
.tab{background:#081126;border:1px solid rgba(255,255,255,.03);color:#e8eef6;padding:8px 14px;border-radius:999px;cursor:pointer;transition:all .18s}
.tab:hover{transform:translateY(-3px)}
.tab.active{background:#facc15;color:#0b0b0b;box-shadow:0 6px 18px rgba(0,0,0,.5)}
#rankingWrap{max-width:1100px;margin:20px auto;padding:8px}
#ranking{margin-top:20px}

/* row */
.row{display:grid;grid-template-columns:56px 64px 1fr auto;gap:12px;align-items:center;padding:16px;background:linear-gradient(180deg, rgba(255,255,255,.01), transparent);border-radius:10px;margin-bottom:12px;box-shadow:0 4px 18px rgba(2,6,12,.45);transition:transform .18s,box-shadow .18s}
.row:hover{transform:translateY(-6px);box-shadow:0 12px 30px rgba(0,0,0,.6)}
.rank{color:#facc15;font-weight:700;padding-left:6px}
.avatar{width:56px;height:56px;border-radius:12px;object-fit:cover;border:3px solid rgba(250,204,21,.12);background:#0b0b0b}
.name{font-weight:700}
.meta{color:#9aa4b3;font-size:13px}
.tiers{display:flex;gap:8px;align-items:center}
.tier{background:#facc15;color:#000;padding:8px 12px;border-radius:999px;font-weight:700;box-shadow:0 6px 14px rgba(0,0,0,.35)}

.header-row{display:grid;grid-template-columns:56px 64px 1fr auto;gap:12px;align-items:center;padding:6px 16px;color:rgba(255,255,255,.6);font-size:14px}

/* modal */
.modal{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.7);z-index:1200}
.hidden{display:none}
.modal-card{background:#0b1520;border-radius:18px;padding:26px;width:360px;text-align:center;position:relative;box-shadow:0 12px 40px rgba(0,0,0,.6)}
.avatar-large{width:96px;height:96px;border-radius:18px;object-fit:cover;border:4px solid #facc15;margin-bottom:12px}
.close{position:absolute;right:12px;top:10px;background:transparent;border:0;color:#cbd5e1;font-size:20px;cursor:pointer}
.position{margin:10px 0;background:linear-gradient(90deg,#102033,#0b2237);padding:10px;border-radius:10px;color:#f1f5f9;font-weight:700}
.tiers {display:flex;gap:8px;justify-content:center;margin-top:10px;flex-wrap:wrap}

/* small screens */
@media (max-width:640px){
  .row{grid-template-columns:44px 52px 1fr auto;padding:12px}
  .avatar{width:44px;height:44px}
  .rank{font-size:14px}
}