/* Rank page layout only. Avatar decoration lives in avatar-decoration.css. */
.rank-badge { display:inline-flex; align-items:center; gap:7px; padding:6px 12px; border-radius:50px; font-size:var(--fs-xs); font-weight:700; letter-spacing:.5px; text-transform:uppercase; color:#fff; border:1px solid var(--glass-border); background:var(--glass-bg); white-space:nowrap; }
.rank-badge.rank-bronze { background:linear-gradient(135deg,rgba(205,127,50,.35),rgba(90,58,36,.3)); }
.rank-badge.rank-silver { background:linear-gradient(135deg,rgba(201,207,218,.32),rgba(127,136,150,.28)); }
.rank-badge.rank-gold { background:linear-gradient(135deg,rgba(255,215,0,.35),rgba(138,90,0,.3)); }
.rank-badge.rank-platinum { background:linear-gradient(135deg,rgba(125,224,255,.34),rgba(90,169,214,.3)); }
.rank-badge.rank-diamond { background:linear-gradient(135deg,rgba(191,232,255,.36),rgba(179,157,255,.32)); }
.rank-badge.rank-mythic { background:linear-gradient(135deg,rgba(192,61,255,.4),rgba(255,79,123,.36)); }
.rank-rarity { display:inline-block; padding:2px 8px; border-radius:6px; font-size:var(--fs-micro); font-weight:700; letter-spacing:.5px; }
.rank-rarity.r-COMMON { background:rgba(205,127,50,.22); color:#e0a06a; }
.rank-rarity.r-UNCOMMON { background:rgba(201,207,218,.2); color:#f2f5fa; }
.rank-rarity.r-RARE { background:rgba(255,215,0,.2); color:#ffe9a0; }
.rank-rarity.r-EPIC { background:rgba(125,224,255,.2); color:#bfe9ff; }
.rank-rarity.r-LEGENDARY { background:rgba(179,157,255,.22); color:#d8c9ff; }
.rank-rarity.r-MYTHIC { background:rgba(192,61,255,.26); color:#ffc9ff; }
.rank-progress { width:100%; height:10px; border-radius:50px; background:rgba(255,255,255,.08); border:1px solid var(--glass-border); overflow:hidden; }
.rank-progress > span { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,var(--ring-c2,#fff),var(--ring-c1,#999)); box-shadow:0 0 10px var(--glow,rgba(255,255,255,.2)); transition:width .6s ease; }
.rank-card-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(230px,100%),1fr)); gap:clamp(16px,2.5vw,24px); max-width:var(--container-wide); margin:0 auto; }
.rank-card { position:relative; display:flex; flex-direction:column; align-items:center; gap:clamp(10px,1.6vw,14px); background:var(--glass-bg); border:1px solid var(--glass-border); border-radius:var(--radius-lg); padding:clamp(24px,3vw,32px) clamp(14px,2.2vw,20px); box-shadow:var(--shadow); backdrop-filter:blur(12px); text-align:center; overflow:hidden; transition:transform .3s,border-color .3s,box-shadow .3s; }
.rank-card::before { content:""; position:absolute; inset:0; background:radial-gradient(circle at 50% 0%,var(--glow,rgba(255,255,255,.12)),transparent 60%); opacity:.5; pointer-events:none; }
.rank-card:hover { transform:translateY(-6px); border-color:var(--ring-c2,rgba(255,255,255,.3)); box-shadow:0 18px 40px rgba(0,0,0,.45),0 0 26px var(--glow,rgba(255,255,255,.16)); }
.rank-card > * { position:relative; z-index:1; }
.avatar-decoration-holder { display:grid; place-items:center; }
.rank-card-title { font-size:var(--fs-lg); font-weight:800; letter-spacing:.5px; text-transform:uppercase; }
.rank-card-rarity { margin-top:-4px; }
.rank-card-min { color:var(--text-muted); font-size:var(--fs-sm); font-weight:600; }
.rank-card-status { display:inline-flex; align-items:center; gap:6px; padding:4px 12px; border-radius:50px; font-size:var(--fs-micro); font-weight:700; letter-spacing:.5px; text-transform:uppercase; }
.rank-card-status.t-unlocked { background:rgba(80,235,155,.16); color:var(--green); }
.rank-card-status.t-locked { background:rgba(255,85,105,.16); color:var(--red); }
.rank-card-progress-wrap { width:100%; margin-top:4px; }
.rank-card-progress-label { display:flex; justify-content:space-between; gap:8px; margin-bottom:6px; color:var(--text-muted); font-size:var(--fs-micro); }
.rank-lock-badge { position:absolute; top:14px; right:14px; z-index:4; width:34px; height:34px; display:grid; place-items:center; border:1px solid var(--glass-border); border-radius:50%; background:rgba(10,12,18,.72); color:var(--gold); box-shadow:0 0 10px rgba(255,205,80,.28); }
.rank-profile-hero { position:relative; display:flex; flex-direction:column; align-items:center; text-align:center; gap:clamp(10px,1.6vw,14px); }
.rank-profile-hero .rank-name { font-size:var(--fs-2xl); font-weight:800; letter-spacing:2px; text-transform:uppercase; }
.rank-profile-hero .rank-sub { color:var(--text-muted); font-size:var(--fs-sm); font-weight:600; letter-spacing:1px; }
.rank-profile-progress { width:min(100%,420px); }
.rank-celebrate { position:fixed; inset:0; z-index:6000; display:flex; align-items:center; justify-content:center; background:rgba(8,10,16,.82); backdrop-filter:blur(10px); opacity:0; pointer-events:none; transition:opacity .35s; }
.rank-celebrate.show { opacity:1; pointer-events:auto; }
.rank-celebrate-box { position:relative; display:flex; flex-direction:column; align-items:center; gap:14px; text-align:center; padding:clamp(26px,4vw,40px); border-radius:var(--radius-lg); background:var(--glass-bg); border:1px solid var(--glass-border); box-shadow:0 30px 80px rgba(0,0,0,.6); transform:scale(.8); transition:transform .4s cubic-bezier(.34,1.56,.64,1); }
.rank-celebrate.show .rank-celebrate-box { transform:scale(1); }
.rank-celebrate-title { font-size:var(--fs-xl); font-weight:800; letter-spacing:1px; }
.rank-celebrate-sub { color:var(--orange-primary); font-weight:700; font-size:var(--fs-md); }
.rank-confetti { position:absolute; top:50%; left:50%; width:8px; height:8px; border-radius:2px; transform:translate(-50%,-50%); animation:rank-confetti 1.5s ease-out forwards; pointer-events:none; }
@keyframes rank-confetti { to { transform:translate(calc(var(--cx)*1px),calc(var(--cy)*1px)) rotate(720deg) scale(.2); opacity:0; } }
@media (max-width:768px) { .rank-card-grid { grid-template-columns:repeat(auto-fit,minmax(min(160px,100%),1fr)); gap:12px; } }
@media (max-width:480px) { .rank-card-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; } .rank-card { padding:18px 10px; } .rank-card-title { font-size:var(--fs-base); } }
@media (max-width:360px) { .rank-card-grid { grid-template-columns:1fr; } }
@media (prefers-reduced-motion:reduce) { .rank-confetti { display:none!important; animation:none!important; } }