.top-rank-page{max-width:1040px;margin:0 auto;padding:26px 20px 96px}
.rank-hero{position:relative;overflow:hidden;border:2px solid var(--fg);border-radius:var(--radius-xl);background:var(--darker);color:#fff;padding:clamp(32px,6vw,68px);box-shadow:var(--shadow-hard);isolation:isolate}
.rank-hero::before,.rank-hero::after{content:"";position:absolute;border-radius:999px;filter:blur(2px);opacity:.9;z-index:-1}.rank-hero::before{width:300px;height:300px;right:-78px;top:-150px;background:var(--secondary)}.rank-hero::after{width:220px;height:220px;left:-90px;bottom:-140px;background:var(--primary)}
.rank-kicker{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#fed7aa}.rank-kicker svg{width:18px;height:18px;color:var(--accent)}
.rank-hero h1{max-width:720px;margin:14px 0 12px;font-size:clamp(34px,6vw,64px);letter-spacing:-.045em;line-height:.98}.rank-hero p{max-width:570px;color:#e2e8f0;font-size:clamp(15px,2vw,18px);line-height:1.65}
.rank-shell{position:relative;margin-top:-28px;padding:30px;border:2px solid var(--fg);border-radius:var(--radius-xl);background:var(--white);box-shadow:var(--shadow-hard)}
.rank-shell-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:24px}.rank-shell-head h2{font-size:clamp(21px,3vw,28px);letter-spacing:-.03em}.rank-shell-head p{max-width:420px;color:var(--muted-2);font-size:13.5px;line-height:1.55;text-align:right}
.rank-podium{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:end;gap:20px;min-height:340px}.podium-card{position:relative;display:flex;flex-direction:column;text-align:center;border:2px solid var(--fg);border-radius:22px;background:var(--white);box-shadow:5px 5px 0 var(--fg);overflow:hidden;animation:podium-rise .6s cubic-bezier(.2,.8,.3,1) backwards;transition:transform .25s ease,box-shadow .25s ease}.podium-card:hover{transform:translateY(-6px);box-shadow:7px 11px 0 var(--fg)}.podium-rank-1{order:2;background:linear-gradient(180deg,#fff7ed 0%,#fff 62%);box-shadow:7px 7px 0 var(--fg);animation-delay:.1s}.podium-rank-1:hover{transform:translateY(-9px) scale(1.015);box-shadow:9px 14px 0 var(--fg)}.podium-rank-2{order:1;animation-delay:.22s}.podium-rank-3{order:3;animation-delay:.34s}
.podium-body{display:flex;flex-direction:column;align-items:center;padding:26px 18px 20px}.podium-avatar-wrap{position:relative;margin-top:4px}.podium-avatar{display:grid;place-items:center;width:72px;height:72px;border:2px solid var(--fg);border-radius:50%;background:var(--avatar-color,#0f172a);color:#fff;font-size:24px;font-weight:800;box-shadow:4px 4px 0 var(--fg);transition:transform .3s cubic-bezier(.34,1.56,.64,1)}.podium-card:hover .podium-avatar{transform:rotate(-5deg) scale(1.06)}.podium-crown{position:absolute;top:-27px;left:50%;width:46px;height:46px;margin-left:-23px;padding:0;border:none;background:none;cursor:pointer;color:var(--accent);filter:drop-shadow(2px 2px 0 var(--fg));animation:crown-float 3s ease-in-out infinite;z-index:2}.podium-crown svg{display:block;width:100%;height:100%}.podium-card.celebrate .podium-crown{animation:crown-pop .65s cubic-bezier(.34,1.56,.64,1)}.podium-medal{position:absolute;right:-8px;bottom:-6px;width:28px;height:28px;display:grid;place-items:center;border:2px solid var(--fg);border-radius:50%;background:var(--secondary);color:#fff;font-family:var(--font-mono);font-size:13px;font-weight:800}.podium-rank-3 .podium-medal{background:var(--fg)}
.podium-card h2{max-width:100%;margin-top:16px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:19px;letter-spacing:-.02em}.podium-card p{max-width:100%;margin-top:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--muted-2);font-size:13px}.podium-score{display:inline-flex;align-items:center;gap:7px;margin-top:16px;padding:8px 14px;border:2px solid var(--fg);border-radius:9999px;background:var(--white);box-shadow:3px 3px 0 var(--fg);font-family:var(--font-mono);font-size:16px;font-weight:800;color:var(--fg);transition:transform .2s ease,box-shadow .2s ease}.podium-score svg{width:15px;height:15px;flex:none}.podium-rank-1 .podium-score svg{color:var(--primary)}.podium-rank-2 .podium-score svg{color:var(--secondary)}.podium-card:hover .podium-score{transform:translateY(-3px);box-shadow:4px 6px 0 var(--fg)}.podium-score span:last-child{font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--muted-2)}
.podium-base{display:flex;align-items:center;justify-content:center;gap:5px;width:100%;margin-top:auto;border-top:2px solid var(--fg)}.podium-rank-1 .podium-base{height:98px;background-color:var(--primary);background-image:repeating-linear-gradient(-45deg,rgba(255,255,255,.15) 0 10px,transparent 10px 20px),linear-gradient(135deg,var(--accent),var(--primary))}.podium-rank-2 .podium-base{height:72px;background-color:var(--secondary);background-image:repeating-linear-gradient(-45deg,rgba(255,255,255,.15) 0 10px,transparent 10px 20px)}.podium-rank-3 .podium-base{height:56px;background-color:var(--fg);background-image:repeating-linear-gradient(-45deg,rgba(255,255,255,.12) 0 10px,transparent 10px 20px)}.podium-base strong{font-family:var(--font-display);font-size:clamp(38px,4.6vw,54px);line-height:.8;letter-spacing:-.06em;color:#fff}.podium-base span{padding-bottom:7px;font-family:var(--font-mono);font-size:11px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:rgba(255,255,255,.9)}
.podium-rank-1::before,.podium-rank-1::after{content:"+";position:absolute;z-index:3;font-family:var(--font-mono);font-weight:800;color:var(--accent);animation:sparkle-twinkle 2.6s ease-in-out infinite}.podium-rank-1::before{top:12px;left:14px;font-size:20px}.podium-rank-1::after{top:36px;right:16px;font-size:15px;animation-delay:1.3s}
.rank-empty{grid-column:1/-1;display:grid;place-items:center;text-align:center;min-height:280px;padding:36px;border:2px dashed var(--fg);border-radius:18px;background:var(--muted)}.rank-empty>span{font-size:42px}.rank-empty h2{margin-top:10px;font-size:21px}.rank-empty p{max-width:430px;margin:6px 0 18px;color:var(--muted-2);line-height:1.55}
.top-rank-confetti{position:fixed;inset:0;z-index:20;pointer-events:none;overflow:hidden}.top-rank-confetti i{position:absolute;top:-24px;left:var(--x);width:9px;height:16px;border-radius:2px;background:var(--color);opacity:0;transform:rotate(var(--rotation));animation:top-rank-fall var(--duration) cubic-bezier(.18,.66,.42,1) var(--delay) forwards}@keyframes top-rank-fall{0%{opacity:0;transform:translate3d(0,-25px,0) rotate(var(--rotation))}12%{opacity:1}100%{opacity:0;transform:translate3d(var(--drift),105vh,0) rotate(calc(var(--rotation) + 760deg))}}@keyframes podium-rise{from{opacity:0;transform:translateY(28px) scale(.97)}to{opacity:1;transform:none}}@keyframes crown-float{0%,100%{transform:rotate(-8deg) translateY(0)}50%{transform:rotate(-3deg) translateY(-6px)}}@keyframes crown-pop{0%{transform:rotate(-8deg) scale(1)}40%{transform:rotate(12deg) scale(1.4)}100%{transform:rotate(-8deg) scale(1)}}@keyframes sparkle-twinkle{0%,100%{opacity:.25;transform:scale(.8) rotate(0deg)}50%{opacity:1;transform:scale(1.2) rotate(90deg)}}
@media (max-width:768px){
  [data-top-rank-chips]{display:flex;flex-wrap:wrap;gap:8px}
  [data-top-rank-chips] .chip{width:42px;height:42px;padding:0;display:inline-flex;align-items:center;justify-content:center;border-radius:12px;flex:0 0 42px}
  [data-top-rank-chips] .chip .chip-text{display:none}
  [data-top-rank-chips] .chip svg{width:20px;height:20px;margin:0}
}
@media (max-width:700px){.top-rank-page{padding:32px 16px 70px}.rank-hero{padding:34px 24px}.rank-shell{margin-top:-16px;padding:22px 16px}.rank-shell-head{display:block}.rank-shell-head p{margin-top:7px;text-align:left}.rank-podium{grid-template-columns:1fr;min-height:0;gap:26px}.podium-rank-1{order:1}.podium-rank-2{order:2}.podium-rank-3{order:3}}
@media (prefers-reduced-motion:reduce){.podium-card,.podium-crown,.podium-rank-1::before,.podium-rank-1::after{animation:none;transition:none}.top-rank-confetti{display:none}}