body.ranking-page {
    --ranking-bg: #020716;
    --ranking-bg-2: #06172f;
    --ranking-panel: rgba(6, 23, 47, 0.88);
    --ranking-panel-strong: rgba(8, 29, 58, 0.94);
    --ranking-ink: #ffffff;
    --ranking-muted: #c7d5ff;
    --ranking-soft: #8ea7e7;
    --ranking-line: rgba(67, 194, 255, 0.24);
    --ranking-line-strong: rgba(67, 194, 255, 0.48);
    --ranking-lime: #c8ff13;
    --ranking-cyan: #15c7ff;
    --ranking-blue: #4f7dff;
    --ranking-purple: #8d43ff;
    --ranking-pink: #e338ff;
    --ranking-gold: #ffbf2f;
    --ranking-silver: #c8d7ef;
    --ranking-bronze: #d98442;
    --ranking-radius: 8px;
    --ranking-shadow: 0 24px 56px rgba(0, 0, 0, 0.34);
    color: var(--ranking-ink);
    background:
        linear-gradient(135deg, rgba(21, 199, 255, 0.14) 0%, transparent 32%),
        linear-gradient(225deg, rgba(141, 67, 255, 0.18) 0%, transparent 36%),
        linear-gradient(25deg, rgba(227, 56, 255, 0.1) 0%, transparent 30%),
        linear-gradient(180deg, #061331 0%, #03102a 42%, #020716 100%);
}

html body.ranking-page .header {
    margin-bottom: 0;
}

html body.ranking-page .nav {
    gap: clamp(0.75rem, 1.6vw, 1.55rem);
    padding-left: clamp(1.2rem, 6vw, 5rem);
}

html body.ranking-page .nav a.is-active {
    position: relative;
    color: var(--ranking-lime);
}

html body.ranking-page .nav a.is-active::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -0.55rem;
    height: 3px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--ranking-lime), var(--ranking-cyan));
    box-shadow: 0 0 16px rgba(200, 255, 19, 0.6);
}

.ranking-page .home-login-link {
    white-space: nowrap;
}

.ranking-main {
    position: relative;
    overflow: hidden;
}

.ranking-main::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
    background-size: 72px 72px;
    mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.62), transparent 78%);
}

.ranking-hero {
    position: relative;
    min-height: 390px;
    display: flex;
    align-items: stretch;
    overflow: hidden;
    border-bottom: 1px solid rgba(67, 194, 255, 0.24);
    background: #051331;
}

.ranking-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("../images/ranking-hero-2026.webp");
    background-repeat: no-repeat;
    background-position: center right;
    background-size: cover;
    opacity: 0.92;
}

.ranking-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(3, 8, 24, 0.98) 0%, rgba(4, 13, 37, 0.94) 34%, rgba(5, 17, 49, 0.42) 65%, rgba(5, 17, 49, 0.14) 100%),
        linear-gradient(180deg, rgba(2, 7, 22, 0.06), rgba(2, 7, 22, 0.66));
}

.ranking-hero-inner {
    position: relative;
    z-index: 1;
    min-height: inherit;
    display: grid;
    grid-template-columns: minmax(0, 0.78fr) minmax(260px, 0.6fr);
    align-items: center;
    gap: 1.5rem;
    padding-top: 3.8rem;
    padding-bottom: 3.2rem;
}

.ranking-hero-copy {
    max-width: 640px;
}

.ranking-badge,
.ranking-section-kicker {
    display: inline-flex;
    align-items: center;
    gap: 0.48rem;
    margin: 0 0 1.05rem;
    color: var(--ranking-lime);
    font-size: 0.78rem;
    font-weight: 900;
    line-height: 1;
    text-transform: uppercase;
}

.ranking-badge {
    padding: 0.55rem 0.75rem;
    border: 1px solid rgba(200, 255, 19, 0.52);
    border-radius: 999px;
    background: rgba(200, 255, 19, 0.08);
    box-shadow: inset 0 0 18px rgba(200, 255, 19, 0.08);
}

.ranking-badge span {
    width: 15px;
    height: 15px;
    display: inline-block;
    border: 2px solid currentColor;
    border-bottom: 0;
    border-radius: 50% 50% 2px 2px;
    position: relative;
}

.ranking-badge span::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -7px;
    width: 9px;
    height: 8px;
    transform: translateX(-50%);
    border-left: 2px solid currentColor;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
}

.ranking-hero h1 {
    margin: 0;
    color: #ffffff;
    font-family: "Sora", "Inter", "Segoe UI", sans-serif;
    font-size: 3.4rem;
    line-height: 1.05;
    letter-spacing: 0;
}

.ranking-hero h1 span {
    color: transparent;
    background: linear-gradient(90deg, #36e7b0 0%, #44a8ff 48%, #cf44ff 100%);
    -webkit-background-clip: text;
    background-clip: text;
}

.ranking-hero-text {
    max-width: 560px;
    margin: 1.2rem 0 0;
    color: #e2eaff;
    font-size: 1.12rem;
    line-height: 1.68;
}

.ranking-hero-awards {
    position: relative;
    min-height: 300px;
}

.ranking-float-icon {
    position: absolute;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: var(--ranking-radius);
    background: rgba(13, 28, 74, 0.72);
    color: #ffffff;
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.26), inset 0 0 22px rgba(255, 255, 255, 0.08);
}

.ranking-float-icon-star {
    top: 12%;
    left: 12%;
    width: 54px;
    height: 54px;
    color: var(--ranking-gold);
    font-size: 1.8rem;
    transform: rotate(-14deg);
}

.ranking-float-icon-crown {
    top: 18%;
    right: 10%;
    width: 66px;
    height: 52px;
    border-color: rgba(200, 255, 19, 0.42);
    color: var(--ranking-lime);
    font-weight: 1000;
    font-size: 1.45rem;
    transform: rotate(10deg);
}

.ranking-float-icon-cup {
    right: 24%;
    bottom: 15%;
    width: 62px;
    height: 62px;
    border-color: rgba(21, 199, 255, 0.42);
    color: var(--ranking-cyan);
    font-size: 1.7rem;
    transform: rotate(12deg);
}

.ranking-shell {
    position: relative;
    z-index: 1;
    padding-top: 1.35rem;
    padding-bottom: 3.5rem;
}

.ranking-surface {
    --component-bg: var(--ranking-panel);
    --component-panel: var(--ranking-panel-strong);
    --component-ink: var(--ranking-ink);
    --component-muted: var(--ranking-muted);
    --component-border: var(--ranking-line);
    color: var(--component-ink);
    border: 1px solid var(--component-border);
    border-radius: var(--ranking-radius);
    background:
        linear-gradient(135deg, rgba(21, 199, 255, 0.08), rgba(141, 67, 255, 0.06)),
        var(--component-bg);
    box-shadow: var(--ranking-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.ranking-controls {
    margin-top: -2.7rem;
    padding: 1rem;
}

.ranking-filter-block {
    display: grid;
    gap: 0.65rem;
}

.ranking-filter-block + .ranking-filter-block,
.ranking-month-tabs {
    margin-top: 0.95rem;
}

.ranking-filter-title {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    color: #f6f9ff;
    font-size: 0.86rem;
    font-weight: 850;
}

.ranking-field-icon,
.ranking-period-icon {
    flex: 0 0 auto;
    position: relative;
    display: inline-block;
    width: 22px;
    height: 22px;
    color: var(--ranking-cyan);
}

.ranking-field-icon::before,
.ranking-field-icon::after,
.ranking-period-icon::before,
.ranking-period-icon::after {
    content: "";
    position: absolute;
    box-sizing: border-box;
}

.ranking-field-icon-game::before {
    inset: 5px 2px 4px;
    border: 2px solid currentColor;
    border-radius: 7px;
}

.ranking-field-icon-game::after {
    left: 6px;
    top: 9px;
    width: 10px;
    height: 7px;
    border-left: 2px solid currentColor;
    border-right: 2px solid currentColor;
    box-shadow: 6px -1px 0 -1px currentColor;
}

.ranking-field-icon-calendar::before,
.ranking-period-icon-month::before {
    inset: 3px 2px 2px;
    border: 2px solid currentColor;
    border-radius: 5px;
}

.ranking-field-icon-calendar::after,
.ranking-period-icon-month::after {
    left: 5px;
    right: 5px;
    top: 8px;
    height: 2px;
    background: currentColor;
    box-shadow: 0 5px 0 currentColor;
}

.ranking-field-icon-age::before {
    left: 3px;
    top: 4px;
    width: 8px;
    height: 8px;
    border: 2px solid currentColor;
    border-radius: 50%;
    box-shadow: 8px 1px 0 -1px currentColor;
}

.ranking-field-icon-age::after {
    left: 1px;
    right: 1px;
    bottom: 3px;
    height: 8px;
    border: 2px solid currentColor;
    border-top: 0;
    border-radius: 0 0 12px 12px;
}

.ranking-month-tabs button:focus-visible,
.ranking-period-card:focus-visible,
.ranking-button:focus-visible {
    outline: 3px solid rgba(200, 255, 19, 0.5);
    outline-offset: 3px;
}

.ranking-period-switch,
.ranking-age-switch {
    display: grid;
    border: 1px solid rgba(67, 194, 255, 0.14);
    border-radius: var(--ranking-radius);
    overflow: hidden;
    background: rgba(5, 17, 45, 0.52);
}

.ranking-period-switch {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.ranking-age-switch {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.ranking-period-card {
    min-height: 98px;
    display: flex;
    align-items: center;
    gap: 0.85rem;
    border: 0;
    border-right: 1px solid rgba(67, 194, 255, 0.14);
    background: transparent;
    color: #ffffff;
    padding: 1rem 1.1rem;
    text-align: left;
    cursor: pointer;
    transition: transform 180ms ease, background 180ms ease, box-shadow 180ms ease;
}

.ranking-period-card:last-child {
    border-right: 0;
}

.ranking-period-card strong,
.ranking-period-card small {
    display: block;
}

.ranking-period-card strong {
    font-size: 1rem;
}

.ranking-period-card small {
    margin-top: 0.22rem;
    color: var(--ranking-muted);
    font-size: 0.78rem;
    font-weight: 700;
}

.ranking-period-card.is-active {
    background:
        linear-gradient(100deg, rgba(200, 255, 19, 0.16), transparent 58%),
        rgba(8, 31, 64, 0.86);
    box-shadow: inset 0 0 0 1px rgba(200, 255, 19, 0.74), inset 0 0 26px rgba(200, 255, 19, 0.12);
}

.ranking-period-card:hover {
    transform: translateY(-2px);
    background-color: rgba(255, 255, 255, 0.04);
}

.ranking-age-card {
    justify-content: center;
    min-height: 76px;
    text-align: center;
    padding: 0.85rem 0.65rem;
}

.ranking-age-card strong {
    font-size: 0.98rem;
}

.ranking-period-icon-week::before {
    left: 3px;
    bottom: 2px;
    width: 3px;
    height: 9px;
    background: var(--ranking-lime);
    box-shadow: 6px -5px 0 var(--ranking-lime), 12px -10px 0 var(--ranking-lime);
}

.ranking-period-icon-week::after {
    left: 2px;
    right: 2px;
    bottom: 1px;
    height: 2px;
    background: currentColor;
}

.ranking-period-icon-year::before {
    left: 4px;
    top: 4px;
    width: 14px;
    height: 12px;
    border: 2px solid currentColor;
    border-bottom-width: 4px;
    border-radius: 2px 2px 8px 8px;
}

.ranking-period-icon-year::after {
    left: 8px;
    bottom: 2px;
    width: 6px;
    height: 8px;
    border-left: 2px solid currentColor;
    border-right: 2px solid currentColor;
}

.ranking-month-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
}

.ranking-month-tabs[hidden] {
    display: none;
}

.ranking-month-tabs button {
    min-height: 36px;
    border: 1px solid rgba(122, 144, 220, 0.46);
    border-radius: var(--ranking-radius);
    background: rgba(11, 25, 64, 0.78);
    color: #dfe8ff;
    padding: 0 0.95rem;
    font: inherit;
    font-size: 0.82rem;
    font-weight: 850;
    cursor: pointer;
}

.ranking-month-tabs button.is-active {
    border-color: rgba(200, 255, 19, 0.68);
    background: rgba(200, 255, 19, 0.16);
    color: var(--ranking-lime);
}

.ranking-user-card {
    position: relative;
    display: grid;
    grid-template-columns: 1.35fr 0.62fr 0.72fr 0.62fr;
    align-items: center;
    gap: 1.25rem;
    margin-top: 1.3rem;
    padding: 1.25rem;
    border-color: rgba(227, 56, 255, 0.54);
    background:
        linear-gradient(110deg, rgba(227, 56, 255, 0.16), rgba(21, 199, 255, 0.13)),
        rgba(6, 23, 47, 0.9);
}

.ranking-user-card[hidden] {
    display: none;
}

.ranking-user-card::after {
    content: "";
    position: absolute;
    left: 25%;
    right: 25%;
    bottom: -1px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--ranking-lime), transparent);
    box-shadow: 0 0 18px rgba(200, 255, 19, 0.48);
}

.ranking-user-identity {
    display: flex;
    align-items: center;
    min-width: 0;
    gap: 1rem;
}

.ranking-user-identity p,
.ranking-player-title,
.ranking-user-stat span,
.ranking-user-medals > span {
    margin: 0;
    color: var(--ranking-muted);
    font-size: 0.78rem;
    font-weight: 800;
}

.ranking-user-identity p {
    color: var(--ranking-lime);
    text-transform: uppercase;
}

.ranking-user-identity h2 {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin: 0.25rem 0 0.2rem;
    font-size: 1.45rem;
    line-height: 1.1;
}

.ranking-you-badge {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 0 0.48rem;
    border-radius: 999px;
    background: linear-gradient(135deg, #7b42ff, #e338ff);
    color: #ffffff;
    font-size: 0.72rem;
    font-weight: 900;
}

.ranking-user-stat,
.ranking-user-medals {
    min-height: 70px;
    display: grid;
    align-content: center;
    gap: 0.22rem;
    padding-left: 1rem;
    border-left: 1px solid rgba(141, 167, 231, 0.28);
}

.ranking-user-stat strong {
    color: #ffffff;
    font-family: "Sora", "Inter", "Segoe UI", sans-serif;
    font-size: 1.85rem;
    line-height: 1.05;
}

.ranking-user-stat small {
    color: var(--ranking-lime);
    font-weight: 900;
}

.ranking-user-motivation {
    grid-column: 1 / -1;
    justify-self: center;
    max-width: 520px;
    margin: 0.1rem 0 -2.6rem;
    padding: 0.78rem 1.2rem;
    border: 1px solid rgba(227, 56, 255, 0.42);
    border-radius: var(--ranking-radius);
    background: rgba(5, 12, 36, 0.92);
    color: #ffffff;
    font-size: 0.9rem;
    font-weight: 800;
    text-align: center;
    box-shadow: 0 16px 28px rgba(0, 0, 0, 0.22);
}

.ranking-user-motivation strong {
    color: var(--ranking-lime);
}

.ranking-podium-section,
.ranking-list-section {
    margin-top: 1.6rem;
    padding: 1rem;
}

.ranking-user-card + .ranking-podium-section {
    margin-top: 2.4rem;
}

.ranking-section-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.ranking-section-heading h2 {
    margin: 0;
    color: #ffffff;
    font-size: 1.35rem;
}

.ranking-section-heading > span,
.ranking-list-tags span {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    border-radius: var(--ranking-radius);
    background: rgba(200, 255, 19, 0.12);
    color: var(--ranking-lime);
    padding: 0 0.72rem;
    font-size: 0.75rem;
    font-weight: 900;
    text-transform: uppercase;
}

.ranking-podium {
    min-height: 390px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: end;
    gap: 1rem;
}

.ranking-podium-card {
    position: relative;
    min-height: 315px;
    display: grid;
    align-content: end;
    justify-items: center;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: var(--ranking-radius);
    background: rgba(5, 17, 45, 0.74);
    padding: 1rem;
    text-align: center;
}

.ranking-podium-card::before {
    content: "";
    position: absolute;
    inset: auto -18% 0;
    height: 62%;
    border-radius: var(--ranking-radius) var(--ranking-radius) 0 0;
    opacity: 0.9;
}

.ranking-podium-card::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.18), transparent 42%);
}

.ranking-podium-card > * {
    position: relative;
    z-index: 1;
}

.ranking-podium-card.is-first {
    min-height: 375px;
    order: 2;
    border-color: rgba(255, 191, 47, 0.54);
    box-shadow: 0 24px 54px rgba(255, 191, 47, 0.18);
}

.ranking-podium-card.is-second {
    order: 1;
    border-color: rgba(200, 215, 239, 0.48);
}

.ranking-podium-card.is-third {
    order: 3;
    border-color: rgba(217, 132, 66, 0.48);
}

.ranking-podium-card.is-first::before {
    background: linear-gradient(180deg, #ffc53c, #835307);
    box-shadow: 0 -18px 42px rgba(255, 191, 47, 0.42);
}

.ranking-podium-card.is-second::before {
    background: linear-gradient(180deg, #dce9ff, #31506f);
}

.ranking-podium-card.is-third::before {
    background: linear-gradient(180deg, #d98442, #5e2f13);
}

.ranking-podium-place {
    width: 66px;
    height: 66px;
    display: grid;
    place-items: center;
    margin-bottom: 0.55rem;
    border: 3px solid rgba(255, 255, 255, 0.64);
    border-radius: 50%;
    color: #ffffff;
    font-family: "Sora", "Inter", sans-serif;
    font-size: 1.8rem;
    font-weight: 900;
    background: rgba(255, 255, 255, 0.14);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.22);
}

.ranking-podium-card.is-first .ranking-podium-place {
    width: 78px;
    height: 78px;
    color: #5e3b00;
    background: linear-gradient(180deg, #fff5bf, #ffbf2f);
}

.ranking-podium-card h3 {
    margin: 0.7rem 0 0.12rem;
    color: #ffffff;
    font-size: 1.12rem;
    line-height: 1.2;
}

.ranking-podium-card.is-first h3 {
    font-size: 1.28rem;
}

.ranking-podium-score,
.ranking-table-score,
.ranking-mobile-score {
    color: #ffffff;
    font-family: "Sora", "Inter", sans-serif;
    font-weight: 900;
}

.ranking-score-star {
    color: var(--ranking-gold);
}

.ranking-medals {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 0.75rem;
}

.ranking-medal {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    color: #ffffff;
    font-weight: 850;
    font-size: 0.84rem;
}

.ranking-medal::before {
    content: attr(data-medal);
    width: 22px;
    height: 22px;
    display: inline-grid;
    place-items: center;
    border-radius: 50%;
    color: #071331;
    font-size: 0.58rem;
    font-weight: 1000;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75), 0 0 12px rgba(255, 255, 255, 0.1);
}

.ranking-medal.is-gold::before {
    background: linear-gradient(180deg, #fff3a2, var(--ranking-gold));
}

.ranking-medal.is-silver::before {
    background: linear-gradient(180deg, #ffffff, var(--ranking-silver));
}

.ranking-medal.is-bronze::before {
    background: linear-gradient(180deg, #ffd0a3, var(--ranking-bronze));
}

.ranking-favorite {
    width: min(100%, 270px);
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr);
    align-items: center;
    gap: 0.72rem;
    margin-top: 1rem;
    padding: 0.55rem;
    border: 1px solid rgba(67, 194, 255, 0.18);
    border-radius: var(--ranking-radius);
    background: rgba(4, 15, 38, 0.66);
    text-align: left;
}

.ranking-favorite img {
    width: 52px;
    height: 52px;
    display: block;
    object-fit: cover;
    border-radius: 7px;
}

.ranking-favorite small,
.ranking-mobile-meta,
.ranking-table-game small {
    display: block;
    color: var(--ranking-muted);
    font-size: 0.72rem;
    font-weight: 740;
}

.ranking-favorite strong,
.ranking-table-game strong,
.ranking-mobile-game strong {
    display: block;
    color: #ffffff;
    font-size: 0.85rem;
    line-height: 1.25;
}

.ranking-avatar {
    --avatar-a: #15c7ff;
    --avatar-b: #8d43ff;
    width: 54px;
    height: 54px;
    flex: 0 0 auto;
    display: inline-grid;
    place-items: center;
    border: 2px solid rgba(255, 255, 255, 0.72);
    border-radius: 50%;
    background:
        radial-gradient(circle at 50% 26%, #ffe1bd 0 20%, transparent 21%),
        radial-gradient(circle at 36% 48%, #ffffff 0 3%, transparent 4%),
        radial-gradient(circle at 64% 48%, #ffffff 0 3%, transparent 4%),
        linear-gradient(135deg, var(--avatar-a), var(--avatar-b));
    color: #ffffff;
    box-shadow: 0 0 0 3px rgba(21, 199, 255, 0.18), 0 12px 22px rgba(0, 0, 0, 0.28);
}

.ranking-avatar span {
    margin-top: 18px;
    font-size: 0.72rem;
    font-weight: 1000;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.38);
}

.ranking-avatar.has-image {
    overflow: hidden;
    background: rgba(4, 15, 38, 0.92);
}

.ranking-avatar.has-image img {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

.ranking-avatar.is-lg {
    width: 80px;
    height: 80px;
}

.ranking-avatar.is-lg span {
    margin-top: 26px;
    font-size: 0.92rem;
}

.ranking-avatar.is-xl {
    width: 96px;
    height: 96px;
}

.ranking-avatar.is-xl span {
    margin-top: 32px;
    font-size: 1rem;
}

.ranking-avatar.avatar-sky {
    --avatar-a: #15c7ff;
    --avatar-b: #3d65ff;
}

.ranking-avatar.avatar-purple {
    --avatar-a: #8d43ff;
    --avatar-b: #e338ff;
}

.ranking-avatar.avatar-gold {
    --avatar-a: #ffbf2f;
    --avatar-b: #f28a12;
}

.ranking-avatar.avatar-lime {
    --avatar-a: #c8ff13;
    --avatar-b: #15c7ff;
}

.ranking-avatar.avatar-rose {
    --avatar-a: #ff6bb3;
    --avatar-b: #8d43ff;
}

.ranking-avatar.avatar-teal {
    --avatar-a: #36e7b0;
    --avatar-b: #0f8b8d;
}

.ranking-avatar.avatar-bronze {
    --avatar-a: #d98442;
    --avatar-b: #8d43ff;
}

.ranking-list-heading {
    align-items: flex-end;
}

.ranking-list-tags {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.5rem;
}

.ranking-list-tags span:last-child {
    background: rgba(79, 125, 255, 0.16);
    color: #aebfff;
}

.ranking-table-wrap {
    overflow-x: auto;
    border: 1px solid rgba(67, 194, 255, 0.14);
    border-radius: var(--ranking-radius);
}

.ranking-table {
    width: 100%;
    min-width: 760px;
    border-collapse: collapse;
}

.ranking-table th,
.ranking-table td {
    padding: 0.72rem 0.85rem;
    border-bottom: 1px solid rgba(67, 194, 255, 0.12);
    color: #edf3ff;
    text-align: left;
    vertical-align: middle;
}

.ranking-table th {
    color: #c7d5ff;
    font-size: 0.75rem;
    font-weight: 900;
}

.ranking-table tbody tr {
    background: rgba(5, 17, 45, 0.42);
}

.ranking-table tbody tr:nth-child(even) {
    background: rgba(8, 29, 58, 0.46);
}

.ranking-table tbody tr.is-current-user {
    background:
        linear-gradient(90deg, rgba(200, 255, 19, 0.14), rgba(21, 199, 255, 0.08)),
        rgba(5, 17, 45, 0.74);
    box-shadow: inset 0 0 0 1px rgba(200, 255, 19, 0.72);
}

.ranking-table tbody tr:last-child td {
    border-bottom: 0;
}

.ranking-position-cell {
    width: 72px;
    color: #ffffff;
    font-family: "Sora", "Inter", sans-serif;
    font-weight: 900;
}

.ranking-position-medal {
    width: 34px;
    height: 34px;
    display: inline-grid;
    place-items: center;
    border-radius: 50%;
    color: #071331;
    font-size: 0.9rem;
    background: #ffffff;
}

.ranking-position-medal.is-gold {
    background: linear-gradient(180deg, #fff2a7, var(--ranking-gold));
}

.ranking-position-medal.is-silver {
    background: linear-gradient(180deg, #ffffff, var(--ranking-silver));
}

.ranking-position-medal.is-bronze {
    background: linear-gradient(180deg, #ffd0a3, var(--ranking-bronze));
}

.ranking-table-player {
    display: flex;
    align-items: center;
    gap: 0.72rem;
    min-width: 0;
}

.ranking-table-player strong {
    color: #ffffff;
    font-size: 0.96rem;
}

.ranking-table-player-meta {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin-top: 0.18rem;
}

.ranking-table-player-meta small {
    color: var(--ranking-muted);
    font-weight: 740;
}

.ranking-table-game {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    align-items: center;
    gap: 0.62rem;
}

.ranking-table-game img {
    width: 44px;
    height: 44px;
    object-fit: cover;
    border-radius: 7px;
}

.ranking-mobile-list {
    display: none;
}

.ranking-mobile-card {
    border: 1px solid rgba(67, 194, 255, 0.16);
    border-radius: var(--ranking-radius);
    background: rgba(5, 17, 45, 0.56);
    padding: 0.9rem;
}

.ranking-mobile-card.is-current-user {
    border-color: rgba(200, 255, 19, 0.72);
    background: linear-gradient(135deg, rgba(200, 255, 19, 0.14), rgba(21, 199, 255, 0.08));
}

.ranking-mobile-top {
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.7rem;
}

.ranking-mobile-rank {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    color: #ffffff;
    font-weight: 900;
}

.ranking-mobile-name {
    color: #ffffff;
    font-weight: 900;
}

.ranking-mobile-game {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    align-items: center;
    gap: 0.62rem;
    margin-top: 0.85rem;
}

.ranking-mobile-game img {
    width: 42px;
    height: 42px;
    object-fit: cover;
    border-radius: 7px;
}

.ranking-empty {
    display: grid;
    justify-items: center;
    gap: 1rem;
    padding: 2.5rem 1rem;
    text-align: center;
}

.ranking-empty[hidden] {
    display: none;
}

.ranking-empty h3 {
    margin: 0;
    color: #ffffff;
}

.ranking-cta {
    position: relative;
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr) auto;
    align-items: center;
    gap: 1.5rem;
    overflow: hidden;
    margin-top: 1.6rem;
    padding: 1.2rem;
    border: 1px solid rgba(21, 199, 255, 0.56);
    border-radius: var(--ranking-radius);
    background:
        linear-gradient(100deg, rgba(141, 67, 255, 0.24), rgba(21, 199, 255, 0.12)),
        rgba(6, 23, 47, 0.9);
    box-shadow: 0 28px 58px rgba(0, 0, 0, 0.26);
}

.ranking-cta-art {
    height: 135px;
    overflow: hidden;
    border-radius: var(--ranking-radius);
    background: #061331;
}

.ranking-cta-art img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: 74% center;
}

.ranking-cta h2 {
    margin: 0;
    color: #ffffff;
    font-size: 1.7rem;
    line-height: 1.2;
}

.ranking-cta h2::after {
    content: "";
    display: inline-block;
    width: 0.8em;
    height: 0.8em;
    margin-left: 0.35rem;
    border-right: 4px solid var(--ranking-lime);
    border-top: 4px solid var(--ranking-lime);
    transform: rotate(-45deg) translateY(0.18em);
    filter: drop-shadow(0 0 10px rgba(200, 255, 19, 0.65));
}

.ranking-cta p {
    max-width: 560px;
    margin: 0.55rem 0 0;
    color: #dbe5ff;
}

.ranking-button {
    min-height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    border: 1px solid transparent;
    border-radius: var(--ranking-radius);
    padding: 0 1.15rem;
    font-weight: 900;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
}

.ranking-button-primary {
    background: linear-gradient(135deg, var(--ranking-lime), #94dd00);
    color: #061331;
    box-shadow: 0 12px 28px rgba(200, 255, 19, 0.26), inset 0 1px 0 rgba(255, 255, 255, 0.58);
}

.ranking-button-primary:hover,
.ranking-button-primary:focus-visible {
    color: #061331;
    transform: translateY(-1px);
}

@media (max-width: 1080px) {
    .ranking-user-card {
        grid-template-columns: 1fr 1fr;
    }

    .ranking-user-stat,
    .ranking-user-medals {
        padding-left: 0;
        border-left: 0;
        border-top: 1px solid rgba(141, 167, 231, 0.24);
        padding-top: 0.85rem;
    }

    .ranking-cta {
        grid-template-columns: 220px minmax(0, 1fr);
    }

    .ranking-cta .ranking-button {
        grid-column: 2;
        justify-self: start;
    }
}

@media (max-width: 920px) {
    html body.ranking-page .nav {
        padding-left: 0;
    }

    .ranking-hero {
        min-height: auto;
    }

    .ranking-hero::before {
        background-position: 64% center;
    }

    .ranking-hero::after {
        background:
            linear-gradient(180deg, rgba(3, 8, 24, 0.94) 0%, rgba(4, 13, 37, 0.76) 54%, rgba(2, 7, 22, 0.78) 100%),
            linear-gradient(90deg, rgba(3, 8, 24, 0.94), rgba(3, 8, 24, 0.22));
    }

    .ranking-hero-inner {
        grid-template-columns: 1fr;
        padding-top: 3rem;
        padding-bottom: 4.5rem;
    }

    .ranking-hero h1 {
        font-size: 2.65rem;
    }

    .ranking-hero-awards {
        min-height: 150px;
    }

    .ranking-period-switch,
    .ranking-age-switch,
    .ranking-podium {
        grid-template-columns: 1fr;
    }

    .ranking-period-switch,
    .ranking-age-switch {
        overflow: visible;
        gap: 0.65rem;
        border: 0;
        background: transparent;
    }

    .ranking-period-card {
        min-height: 82px;
        border: 1px solid rgba(67, 194, 255, 0.16);
        border-radius: var(--ranking-radius);
    }

    .ranking-podium {
        min-height: auto;
    }

    .ranking-podium-card,
    .ranking-podium-card.is-first {
        min-height: 300px;
        order: initial;
    }

    .ranking-podium-card.is-first {
        order: 1;
    }

    .ranking-podium-card.is-second {
        order: 2;
    }

    .ranking-podium-card.is-third {
        order: 3;
    }

    .ranking-table-wrap {
        display: none;
    }

    .ranking-mobile-list {
        display: grid;
        gap: 0.75rem;
    }
}

@media (max-width: 760px) {
    .ranking-controls {
        margin-top: -3.2rem;
        padding: 0.8rem;
    }

    .ranking-user-card {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .ranking-user-motivation {
        justify-self: stretch;
        margin-bottom: -1.75rem;
    }

    .ranking-user-card + .ranking-podium-section {
        margin-top: 2rem;
    }

    .ranking-section-heading,
    .ranking-list-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .ranking-list-tags {
        justify-content: flex-start;
    }

    .ranking-cta {
        grid-template-columns: 1fr;
        padding: 1rem;
    }

    .ranking-cta-art {
        height: 160px;
    }

    .ranking-cta .ranking-button {
        grid-column: auto;
        justify-self: stretch;
    }
}

@media (max-width: 560px) {
    .ranking-hero-inner {
        padding-top: 2.35rem;
        padding-bottom: 4.2rem;
    }

    .ranking-hero h1 {
        font-size: 2.12rem;
    }

    .ranking-hero-text {
        font-size: 1rem;
    }

    .ranking-shell {
        padding-left: 0.85rem;
        padding-right: 0.85rem;
    }

    .ranking-podium-section,
    .ranking-list-section {
        padding: 0.8rem;
    }

    .ranking-user-identity {
        align-items: flex-start;
    }

    .ranking-user-identity h2 {
        font-size: 1.22rem;
    }

    .ranking-mobile-top {
        grid-template-columns: auto auto minmax(0, 1fr);
    }

    .ranking-mobile-score {
        grid-column: 2 / -1;
        justify-self: start;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ranking-period-card,
    .ranking-button-primary:hover,
    .ranking-button-primary:focus-visible {
        transition: none;
        transform: none;
    }
}