/* Star ranks (2026-10-15): emblem card, division numeral, SVG star slots and win/loss animations. */
.rank-stars-row{display:inline-flex;align-items:center;gap:3px;vertical-align:middle}
.rank-star{width:1.15em;height:1.15em;overflow:visible}
.rank-star path{stroke-width:1.4;stroke-linejoin:round}
.rank-star.on path{fill:#ffcf3f;stroke:#8a5a00;filter:drop-shadow(0 0 3px #ffbf2a99)}
.rank-star.off path{fill:#0c1426;stroke:#5f6f92;stroke-dasharray:2.4 1.6}
.rank-stars-row.legend b{margin-left:4px;color:#ffd75e;font-size:.95em}
.rank-card{display:grid;justify-items:center;gap:4px;text-align:center}
.rank-card{--glow:#ffffff33;--glow-r:4px;--float:2px;--float-dur:4.6s;--glow-dur:3.4s}
/* Idle life: a gentle float and a breathing glow that grow with the tier (owner request 2026-10-15). */
.rank-bronze{--glow:#e2a27a66;--glow-r:3px;--float:1.5px}
.rank-silver{--glow:#dbe8f599;--glow-r:6px;--float:2px}
.rank-gold{--glow:#ffd366b0;--glow-r:9px;--float:2.5px;--glow-dur:3s}
.rank-platinum{--glow:#67e7ddbb;--glow-r:12px;--float:3px;--glow-dur:2.8s}
.rank-diamond{--glow:#9fb8ffd0;--glow-r:15px;--float:3.5px;--glow-dur:2.5s}
.rank-legend{--glow:#ff8fb0e6;--glow-r:20px;--float:4px;--glow-dur:2.2s;--float-dur:4s}
.rank-card .rank-emblem{width:112px;height:112px;object-fit:contain;filter:drop-shadow(0 0 var(--glow-r) var(--glow)) drop-shadow(0 6px 14px #0008);
  animation:rank-float var(--float-dur) ease-in-out infinite,rank-glow var(--glow-dur) ease-in-out infinite}
.rank-card{position:relative}
.rank-legend .rank-emblem{animation:rank-float var(--float-dur) ease-in-out infinite,rank-glow var(--glow-dur) ease-in-out infinite,rank-hue 6s ease-in-out infinite}
@keyframes rank-float{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(calc(var(--float) * -1)) rotate(.6deg)}}
@keyframes rank-glow{0%,100%{filter:drop-shadow(0 0 var(--glow-r) var(--glow)) drop-shadow(0 6px 14px #0008)}50%{filter:drop-shadow(0 0 calc(var(--glow-r) * 1.9) var(--glow)) drop-shadow(0 6px 14px #0008) brightness(1.08)}}
@keyframes rank-hue{0%,100%{filter:drop-shadow(0 0 var(--glow-r) var(--glow)) drop-shadow(0 6px 14px #0008)}50%{filter:drop-shadow(0 0 calc(var(--glow-r) * 2) #ffd27a) drop-shadow(0 6px 14px #0008) brightness(1.12) saturate(1.15)}}
/* small badges (lobby tile, match header): static glow by tier colour */
.match-rank img{filter:drop-shadow(0 0 6px color-mix(in srgb,var(--rank-color) 55%,transparent))}
.rank-card-name{font-weight:800;letter-spacing:.04em;font-size:18px}
.rank-card .rank-division{display:inline-block;min-width:1.6em;padding:0 6px;border-radius:6px;background:#ffffff14;border:1px solid #ffffff33;color:#ffe9a8;font-size:.95em}
.rank-card .rank-stars-row{font-size:22px;gap:5px}
.rank-card-note{margin:6px 0 0;font-size:12px;color:#c7d3ea}
.rank-bronze .rank-tier{color:#e2a27a}.rank-silver .rank-tier{color:#d9e6f2}.rank-gold .rank-tier{color:#ffd366}
.rank-platinum .rank-tier{color:#67e7dd}.rank-diamond .rank-tier{color:#9fb8ff}.rank-legend .rank-tier{color:#ff9ab3}
/* Animations: a gained star pops in with a ring; a lost star shakes and breaks; division changes flip the emblem. */
.rank-star.gain{animation:rank-star-gain .6s cubic-bezier(.2,.9,.3,1.3) both}
.rank-star.gain path{filter:drop-shadow(0 0 8px #ffd54a)}
.rank-star.lose{animation:rank-star-lose .52s ease-in both}
.rank-promote .rank-emblem{animation:rank-promote .8s cubic-bezier(.2,.8,.3,1) both}
.rank-demote .rank-emblem{animation:rank-demote .7s ease-out both}
@keyframes rank-star-gain{0%{transform:scale(0) rotate(-120deg);opacity:0}60%{transform:scale(1.45) rotate(10deg);opacity:1}100%{transform:scale(1) rotate(0)}}
@keyframes rank-star-lose{0%{transform:translateX(0)}20%{transform:translateX(-3px) rotate(-8deg)}40%{transform:translateX(3px) rotate(8deg)}60%{transform:scale(1.1);opacity:1}100%{transform:scale(.4) translateY(8px) rotate(25deg);opacity:0;filter:grayscale(1)}}
@keyframes rank-promote{0%{transform:scale(.6) rotateY(90deg);filter:brightness(2.4) drop-shadow(0 0 22px #fff)}100%{transform:scale(1) rotateY(0)}}
@keyframes rank-demote{0%{transform:translateY(-10px) scale(1.05);filter:brightness(.5) grayscale(.6)}100%{transform:none}}
@media(prefers-reduced-motion:reduce){.rank-card .rank-emblem,.rank-legend .rank-emblem{animation:none}.rank-star.gain,.rank-star.lose,.rank-promote .rank-emblem,.rank-demote .rank-emblem{animation:none}}
/* Ranked result panel */
.rank-result{margin:10px auto 6px;min-height:178px}

/* Star rows sit inside other components whose span rules stack children (e.g. .fight-feature span): keep them one row. */
span.rank-stars-row,.fight-feature span.rank-stars-row,.fight-link span.rank-stars-row{display:inline-flex!important;flex-direction:row!important;flex:none!important;align-items:center;gap:2px;width:auto;min-width:0}
.fight-feature small .rank-stars-row{font-size:12px;margin-left:4px;vertical-align:-2px}
.fight-feature small{display:flex;align-items:center;flex-wrap:wrap;gap:2px}
.rank-celestial{--glow:#ffe076e6;--glow-r:22px;--float:4px;--glow-dur:2.2s}.rank-celestial .rank-tier{color:#ffe076}.rank-showcase{grid-template-columns:repeat(7,minmax(0,1fr))}@media(max-width:760px){.rank-showcase{grid-template-columns:repeat(3,minmax(0,1fr))}}
.profile-rank-guide{margin-top:28px}.profile-rank-guide .rank-showcase{gap:10px}.rank-showcase .rank-guide-card{min-width:0;margin:0;padding:14px 6px;background:#ffffff05;border:1px solid #b7d7ff26;border-radius:12px;text-align:center}.rank-guide-card img{display:block;width:100%;height:110px;object-fit:contain;margin:0 auto 10px}.rank-guide-card figcaption b,.rank-guide-card figcaption span,.rank-guide-card figcaption small{display:block}.rank-guide-card figcaption b{font-size:13px}.rank-guide-card figcaption span{margin:7px 0 3px;color:#f4e4b6;font-size:12px}.rank-guide-card figcaption small{color:#adc3d9;font-size:11px;line-height:1.5}