.ranking-heading { display: flex; align-items: center; gap: 12px; justify-content: space-between; }
.ranking-heading h2 { font-size: clamp(28px,7vw,40px); }
.ranking-trophy { flex: 0 0 52px; display: grid; place-items: center; width: 52px; height: 58px; border-radius: 18px; color: #ffdc78; background: linear-gradient(145deg,#5a4226,#291a2c); box-shadow: inset 0 1px 0 #9c764b,0 8px 25px #07040d; }
.ranking-trophy svg { width: 34px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ranking-period { padding: 4px; border: 1px solid var(--line); border-radius: 18px; background: #130c1e; gap: 4px; }
.ranking-period button { border-color: transparent; border-radius: 13px; background: transparent; color: var(--muted); }
.ranking-period button[aria-pressed="true"] { border-color: #a4d557; background: linear-gradient(145deg,#33442a,#293320); color: #d2ff84; box-shadow: inset 0 1px 0 #587040; }
.ranking-podium { display: grid; grid-template-columns: 1fr 1.15fr 1fr; align-items: end; gap: 8px; margin: 24px 0 20px; }
.ranking-podium[data-count="1"] { grid-template-columns: minmax(0,200px); justify-content: center; }
.ranking-podium[data-count="2"] { grid-template-columns: repeat(2,minmax(0,1fr)); }
.ranking-pod { --medal: #d7b782; --step-top: #70563e; --step-bottom: #352538; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.ranking-pod[data-medal="gold"] { --medal: #f9db78; --step-top: #755c28; --step-bottom: #3b2828; }
.ranking-pod[data-medal="silver"] { --medal: #d7d5f2; --step-top: #504d6e; --step-bottom: #262136; }
.ranking-pod[data-medal="bronze"] { --medal: #f1ae87; --step-top: #6c4037; --step-bottom: #312030; }
.ranking-crest { width: 27px; height: 27px; color: var(--medal); }
.ranking-crest svg { width: 100%; fill: currentColor; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; }
.ranking-pod:not([data-medal="gold"]) .ranking-crest { visibility: hidden; }
.ranking-avatar { --avatar-bg: #443862; display: grid; place-items: center; flex: 0 0 42px; width: 42px; height: 42px; border: 1px solid rgba(237,214,255,.2); border-radius: 15px; background: radial-gradient(circle at 30% 15%,#ffffff1c,transparent 65%),var(--avatar-bg); color: #f9edff; font: 700 21px var(--font-display); box-shadow: inset 0 2px 0 #ffffff12; }
.ranking-avatar[data-color="1"] { --avatar-bg: #3e5133; color: #e4ffbb; }
.ranking-avatar[data-color="2"] { --avatar-bg: #5a3c39; color: #ffe1bd; }
.ranking-pod .ranking-avatar { width: 56px; height: 56px; flex-basis: 56px; border: 2px solid var(--medal); border-radius: 20px; font-size: 29px; box-shadow: 0 0 23px color-mix(in srgb,var(--medal) 15%,transparent),inset 0 1px 0 #ffffff26; }
.ranking-pod[data-medal="gold"] .ranking-avatar { width: 66px; height: 66px; flex-basis: 66px; font-size: 33px; }
.ranking-pod-name { width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.ranking-points { display: grid; gap: 2px; text-align: right; white-space: nowrap; }
.ranking-points b { color: var(--lime); font: 700 23px/1 var(--font-display); }
.ranking-points small { color: var(--muted); font-size: 10px; font-weight: 800; }
.ranking-pod .ranking-points { text-align: center; }.ranking-pod .ranking-points b { color: var(--medal); font-size: 21px; }
.ranking-step { display: grid; place-items: center; height: 44px; width: 100%; margin-top: 2px; color: var(--medal); border: 1px solid color-mix(in srgb,var(--medal) 35%,transparent); border-radius: 17px 17px 8px 8px; background: linear-gradient(160deg,var(--step-top),var(--step-bottom)); font: 700 25px var(--font-display); box-shadow: inset 0 1px 0 #ffffff23,0 8px 15px #00000022; }
.ranking-pod[data-medal="gold"] .ranking-step { height: 72px; }.ranking-pod[data-medal="silver"] .ranking-step { height: 55px; }
.ranking-list { display: block; padding: 4px 12px; border: 1px solid var(--line); border-radius: 22px; background: linear-gradient(135deg,#261a34,#1a1225); }
.ranking-row { display: grid; grid-template-columns: 24px 42px minmax(0,1fr) auto; gap: 10px; padding: 13px 0; border: 0; border-radius: 0; background: none; }
.ranking-row + .ranking-row { border-top: 1px solid var(--line); }
.ranking-place { color: #b7a6ca; font-size: 18px; }
.ranking-row.is-you { padding-inline: 8px; margin-inline: -8px; border: 0; border-radius: 16px; background: #b6f2320c; }
.ranking-person { min-width: 0; }.ranking-person strong { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.ranking-person small { color: var(--muted); font-size: 10px; margin-top: 5px; }
.ranking-me { padding: 14px 14px 2px; border: 1px solid #b6f23255; border-radius: 21px; background: linear-gradient(135deg,#303624,#201c2b); }
.ranking-me-title { display: block; color: var(--lime); font-size: 10px; letter-spacing: .13em; font-weight: 900; }
.ranking-own-list { list-style: none; padding: 0; margin: 0; }.ranking-me .ranking-row.is-you { background: none; margin: 0; padding: 14px 0; }
.ranking-membership { border: 1px solid var(--line); border-radius: 20px; padding: 14px; background: #24192e; }
.ranking-membership p { margin-top: 0; }.ranking-footnote { padding: 0 4px; font-size: 11px; }
.ranking-state { min-height: 150px; display: grid; place-items: center; padding: 28px; background: radial-gradient(ellipse at 50% 0,#b6f23210,transparent 70%),#20172b; border-style: solid; font-size: 14px; }
.level-option[data-selected="true"] { border-color: var(--lime); }
.level-option b { min-width: 55px; padding: 9px 6px; border-radius: 10px; background: #b6f23212; font-size: 11px; text-align: center; }
.level-option:disabled b { background: #ffffff05; }
@media (max-width:360px) { .ranking-row { gap: 7px; grid-template-columns: 21px 36px minmax(0,1fr) auto; }.ranking-row .ranking-avatar { width: 36px; height: 36px; }.ranking-points b { font-size: 21px; } }