/* Roles page foundation */
.rank-page {
    position: relative;
    z-index: 1;
    width: min(1120px, calc(100% - 40px));
    margin: auto;
    padding: 0 0 90px
}

.rank-hero {
    padding: 86px 20px 62px;
    text-align: center
}

.rank-hero__tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 20px;
    padding: 6px 15px;
    border: 1px solid rgba(47, 129, 247, .25);
    border-radius: 999px;
    background: rgba(47, 129, 247, .09);
    color: var(--color-sky);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .13em;
    text-transform: uppercase
}

.rank-hero__tag span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color-sky);
    box-shadow: 0 0 10px var(--color-sky)
}

.rank-hero h1 {
    margin: 0 0 18px;
    font-size: clamp(42px, 7vw, 70px);
    font-weight: 900;
    line-height: .98;
    letter-spacing: -.055em;
    background: linear-gradient(120deg, var(--color-text) 10%, var(--color-accent) 58%, var(--color-sky));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent
}

.rank-hero p {
    max-width: 620px;
    margin: 0 auto;
    color: var(--color-text-muted);
    font-size: 16px;
    line-height: 1.7
}

.rank-hero nav {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 28px
}

.rank-hero nav a {
    padding: 9px 13px;
    border: 1px solid var(--color-border);
    border-radius: 9px;
    background: rgba(110, 118, 129, .06);
    color: var(--color-text-muted);
    font-size: 12px;
    font-weight: 700
}

.rank-hero nav a:hover {
    border-color: var(--color-accent);
    color: var(--color-text)
}

.guild-system {
    padding: 72px 0 24px;
    scroll-margin-top: 20px
}

.guild-title {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 36px
}

.guild-code {
    display: grid;
    width: 52px;
    height: 52px;
    place-items: center;
    border: 1px solid rgba(47, 129, 247, .28);
    border-radius: 15px;
    background: rgba(47, 129, 247, .11);
    color: var(--color-sky);
    font-size: 17px;
    font-weight: 900
}

.guild-code--rc {
    border-color: rgba(118, 224, 163, .28);
    background: rgba(118, 224, 163, .1);
    color: var(--color-emerald)
}

.guild-title span {
    color: var(--color-text-soft);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .13em;
    text-transform: uppercase
}

.guild-title h2 {
    margin: 3px 0 0;
    font-size: 34px;
    line-height: 1;
    letter-spacing: -.04em
}

.rank-chain {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 8px 0 44px;
    color: var(--color-text-muted)
}

.rank-chain .dot {
    width: 9px;
    height: 9px;
    border-radius: 50%
}

.rank-chain b {
    margin-left: 8px;
    font-size: 10px;
    letter-spacing: .1em;
    text-transform: uppercase
}

.rank-chain i {
    width: 48px;
    height: 1px;
    margin: 0 18px;
    background: var(--color-border)
}

.dot.member {
    background: #7d8998
}

.dot.senior {
    background: #58a6ff;
    box-shadow: 0 0 9px rgba(88, 166, 255, .5)
}

.dot.elite {
    background: #a78bfa;
    box-shadow: 0 0 9px rgba(167, 139, 250, .5)
}

.dot.mythic {
    background: #f3c969;
    box-shadow: 0 0 9px rgba(243, 201, 105, .5)
}

.rank-grid {
    display: grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap: 20px
}

.rank-card {
    --rank: #7d8998;
    position: relative;
    overflow: hidden;
    padding: 30px;
    border: 1px solid color-mix(in srgb, var(--rank) 26%, var(--color-border));
    border-radius: 23px;
    background: linear-gradient(135deg, color-mix(in srgb, var(--rank) 7%, var(--color-surface)), color-mix(in srgb, var(--color-surface) 90%, transparent));
    box-shadow: 0 20px 55px rgba(2, 8, 20, .1)
}

.rank-card::before {
    position: absolute;
    inset: 0 12% auto;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--rank), transparent);
    opacity: .55;
    content: ""
}

.card-senior {
    --rank: #58a6ff
}

.card-elite {
    --rank: #a78bfa
}

.card-mythic {
    --rank: #f3c969
}

.rank-card__head {
    display: flex;
    align-items: center;
    gap: 17px
}

.rank-card__head > .iconify {
    width: 58px;
    height: 58px;
    padding: 13px;
    border-radius: 16px;
    background: color-mix(in srgb, var(--rank) 13%, transparent);
    color: var(--rank);
    filter: drop-shadow(0 0 14px color-mix(in srgb, var(--rank) 24%, transparent))
}

.rank-card__head small {
    color: color-mix(in srgb, var(--rank) 72%, var(--color-text-muted));
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase
}

.rank-card h3 {
    margin: 5px 0 0;
    color: var(--rank);
    font-size: 28px;
    line-height: 1;
    letter-spacing: -.035em
}

.rank-card__divider {
    height: 1px;
    margin: 24px 0 18px;
    background: var(--color-border);
    opacity: .65
}

.condition-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 13px;
    color: var(--color-text-soft);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .11em;
    text-transform: uppercase
}

.condition-title::after {
    flex: 1;
    height: 1px;
    background: var(--color-border);
    content: ""
}

.conditions {
    display: grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap: 9px
}

.condition {
    display: flex;
    min-height: 50px;
    padding: 11px 12px;
    align-items: center;
    gap: 10px;
    border: 1px solid color-mix(in srgb, var(--color-border) 85%, transparent);
    border-radius: 11px;
    background: rgba(110, 118, 129, .045)
}

.condition > .iconify {
    flex: none;
    color: var(--rank);
    font-size: 18px
}

.condition p {
    margin: 0;
    color: var(--color-text-muted);
    font-size: 12px;
    line-height: 1.35
}

.condition strong {
    display: inline-block;
    margin-left: 4px;
    padding: 2px 6px;
    border: 1px solid color-mix(in srgb, var(--rank) 24%, transparent);
    border-radius: 5px;
    background: color-mix(in srgb, var(--rank) 11%, transparent);
    color: var(--rank);
    font-size: 12px;
    white-space: nowrap
}

.activity-rank {
    display: grid;
    grid-template-columns:1fr 1fr;
    align-items: center;
    gap: 30px;
    margin-top: 22px;
    padding: 26px 30px;
    border: 1px solid rgba(47, 129, 247, .24);
    border-radius: 18px;
    background: linear-gradient(120deg, rgba(47, 129, 247, .08), var(--color-surface))
}

.activity-rank > div:first-child {
    display: flex;
    align-items: center;
    gap: 14px
}

.activity-rank > div:first-child > .iconify {
    width: 44px;
    height: 44px;
    padding: 10px;
    border-radius: 12px;
    background: rgba(47, 129, 247, .12);
    color: var(--color-sky)
}

.activity-rank small {
    color: var(--color-sky);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase
}

.activity-rank h3 {
    margin: 3px 0 0;
    font-size: 19px
}

.activity-rank__flow {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 13px
}

.activity-rank__flow span, .activity-rank__flow strong {
    padding: 6px 9px;
    border-radius: 7px;
    background: var(--color-surface-3);
    font-size: 11px;
    text-transform: uppercase
}

.activity-rank__flow strong {
    background: rgba(63, 185, 80, .13);
    color: #76e0a3
}

.activity-rank__flow b {
    color: var(--color-text-soft)
}

.activity-rank__flow em {
    color: var(--color-text);
    font-size: 14px;
    font-style: normal;
    font-weight: 750
}

.rc-grid {
    display: grid;
    grid-template-columns:repeat(4, minmax(0, 1fr));
    gap: 14px
}

.rc-grid article {
    position: relative;
    overflow: hidden;
    padding: 25px;
    border: 1px solid var(--color-border);
    border-radius: 17px;
    background: color-mix(in srgb, var(--color-surface) 86%, transparent)
}

.rc-grid small {
    color: var(--color-text-soft);
    font-size: 12px
}

.rc-grid .iconify {
    display: block;
    margin: 22px 0 18px;
    color: var(--color-sky);
    font-size: 32px
}

.rc-grid h3 {
    margin: 0 0 6px;
    font-size: 21px
}

.rc-grid p {
    margin: 0;
    color: var(--color-text-muted);
    font-size: 12px
}

.rc-grid .rc-top {
    border-color: rgba(121, 216, 255, .3);
    background: linear-gradient(140deg, rgba(47, 129, 247, .1), var(--color-surface))
}

.activity-rank--rc {
    border-color: rgba(118, 224, 163, .22);
    background: linear-gradient(120deg, rgba(118, 224, 163, .07), var(--color-surface))
}

.rank-note {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    margin-top: 48px;
    padding: 16px 18px;
    border: 1px solid var(--color-border);
    border-radius: 12px;
    background: rgba(110, 118, 129, .05);
    color: var(--color-text-muted)
}

.rank-note .iconify {
    flex: none;
    margin-top: 2px;
    color: var(--color-sky);
    font-size: 19px
}

.rank-note p {
    margin: 0;
    font-size: 13px
}

.light-theme .rank-card, .light-theme .rc-grid article {
    box-shadow: 0 16px 45px rgba(31, 55, 84, .08)
}

.light-theme .activity-rank {
    background: linear-gradient(120deg, rgba(23, 105, 224, .07), rgba(255, 255, 255, .82))
}

@media (max-width: 800px) {
    .rank-grid {
        grid-template-columns:1fr
    }

    .rc-grid {
        grid-template-columns:repeat(2, 1fr)
    }

    .activity-rank {
        grid-template-columns:1fr
    }

    .activity-rank__flow {
        justify-content: flex-start
    }

    .rank-chain i {
        width: 22px;
        margin: 0 9px
    }
}

@media (max-width: 560px) {
    .rank-page {
        width: calc(100% - 24px)
    }

    .rank-hero {
        padding: 58px 8px 38px
    }

    .rank-hero nav {
        flex-wrap: wrap
    }

    .guild-system {
        padding-top: 54px
    }

    .rank-chain {
        justify-content: flex-start;
        overflow-x: auto;
        padding-bottom: 8px
    }

    .rank-chain i {
        min-width: 18px
    }

    .rank-card {
        padding: 22px;
        border-radius: 18px
    }

    .conditions {
        grid-template-columns:1fr
    }

    .activity-rank {
        padding: 22px
    }

    .activity-rank__flow {
        align-items: flex-start;
        flex-wrap: wrap
    }

    .rc-grid {
        grid-template-columns:1fr
    }

    .guild-title h2 {
        font-size: 28px
    }
}

/* Roles page hierarchy */
.guild-title {
    justify-content: center;
    margin-bottom: 42px;
    text-align: center
}

.guild-title h2 {
    position: relative;
    width: max-content;
    max-width: 100%;
    margin: 0;
    padding: 0 54px;
    font-size: clamp(32px, 5vw, 48px);
    font-weight: 900;
    letter-spacing: -.045em;
    background: linear-gradient(90deg, var(--color-accent-strong), var(--color-sky));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent
}

.guild-title h2::before, .guild-title h2::after {
    position: absolute;
    top: 50%;
    width: 34px;
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(90deg, transparent, var(--color-accent));
    content: ""
}

.guild-title h2::before {
    right: calc(100% - 42px)
}

.guild-title h2::after {
    left: calc(100% - 42px);
    transform: rotate(180deg)
}

.rank-card, .rc-grid article, .activity-rank {
    position: relative;
    border-color: transparent !important;
    background: color-mix(in srgb, var(--color-surface) 82%, transparent);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px)
}

.rank-card::after, .rc-grid article::after, .activity-rank::after {
    position: absolute;
    inset: 0;
    z-index: 10;
    padding: 1px;
    border-radius: inherit;
    background: linear-gradient(110deg, var(--color-accent-strong), var(--color-sky), rgba(255, 255, 255, .8), var(--color-accent), var(--color-accent-strong));
    background-size: 300% 100%;
    opacity: .48;
    pointer-events: none;
    content: "";
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    animation: roles-border-shimmer 5.5s linear infinite
}

.rank-card > *, .rc-grid article > *, .activity-rank > * {
    position: relative;
    z-index: 2
}

.light-theme .rank-card, .light-theme .rc-grid article, .light-theme .activity-rank {
    background: rgba(255, 255, 255, .74)
}

.light-theme .rank-card::after, .light-theme .rc-grid article::after, .light-theme .activity-rank::after {
    opacity: .38
}

@keyframes roles-border-shimmer {
    0% {
        background-position: 0 50%
    }
    100% {
        background-position: 300% 50%
    }
}

@media (prefers-reduced-motion: reduce) {
    .rank-card::after, .rc-grid article::after, .activity-rank::after {
        animation: none;
        background-position: 50% 50%
    }
}

@media (max-width: 560px) {
    .guild-title h2 {
        padding: 0 28px
    }

    .guild-title h2::before, .guild-title h2::after {
        width: 18px
    }
}

/* Activity role highlights */
.activity-rank--rc {
    display: grid;
    grid-template-columns:minmax(240px, .8fr) minmax(360px, 1.2fr);
    min-height: 150px;
    margin-top: 34px;
    padding: 32px 36px;
    border-radius: 22px;
    background: radial-gradient(circle at 12% 0, rgba(118, 224, 163, .1), transparent 38%), color-mix(in srgb, var(--color-surface) 88%, transparent)
}

.activity-rank--rc > div:first-child > .iconify {
    width: 54px;
    height: 54px;
    padding: 13px;
    border: 1px solid rgba(118, 224, 163, .2);
    border-radius: 15px;
    background: rgba(118, 224, 163, .1);
    color: var(--color-emerald);
    font-size: 28px
}

.activity-rank--rc small {
    color: var(--color-emerald)
}

.activity-rank--rc h3 {
    font-size: 22px
}

.activity-rank--rc .activity-rank__flow {
    display: grid;
    grid-template-columns:auto 34px auto;
    grid-template-rows:auto auto;
    justify-content: end;
    align-items: center;
    column-gap: 14px;
    row-gap: 10px
}

.activity-rank--rc .activity-rank__flow span {
    grid-column: 1;
    grid-row: 1/3
}

.activity-rank--rc .activity-rank__flow b {
    grid-column: 2;
    grid-row: 1/3;
    text-align: center
}

.activity-rank--rc .activity-rank__flow strong {
    grid-column: 3;
    grid-row: 1;
    width: max-content;
    padding: 8px 12px;
    background: rgba(118, 224, 163, .13);
    color: var(--color-emerald);
    font-size: 12px
}

.activity-rank--rc .activity-rank__flow em {
    grid-column: 3;
    grid-row: 2;
    padding-left: 2px;
    color: var(--color-text-muted);
    font-size: 13px
}

.light-theme .activity-rank--rc {
    background: radial-gradient(circle at 12% 0, rgba(26, 127, 55, .08), transparent 38%), rgba(255, 255, 255, .76)
}

@media (max-width: 800px) {
    .activity-rank--rc {
        grid-template-columns:1fr
    }

    .activity-rank--rc .activity-rank__flow {
        justify-content: start
    }
}

@media (max-width: 520px) {
    .activity-rank--rc {
        min-height: 0;
        padding: 24px
    }

    .activity-rank--rc .activity-rank__flow {
        grid-template-columns:1fr;
        grid-template-rows:auto;
        gap: 9px
    }

    .activity-rank--rc .activity-rank__flow span, .activity-rank--rc .activity-rank__flow b, .activity-rank--rc .activity-rank__flow strong, .activity-rank--rc .activity-rank__flow em {
        grid-column: 1;
        grid-row: auto
    }

    .activity-rank--rc .activity-rank__flow b {
        transform: rotate(90deg);
        text-align: left
    }
}

/* Role cards */
.rc-rank-grid {
    margin-bottom: 74px
}

.subguild-title {
    margin: 0 0 28px;
    text-align: center
}

.subguild-title > span {
    color: var(--color-sky);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase
}

.subguild-title h3 {
    margin: 6px 0 9px;
    font-size: 30px;
    letter-spacing: -.04em
}

.subguild-title p {
    margin: 0;
    color: var(--color-text-muted);
    font-size: 13px
}

.subguild-grid {
    display: grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap: 18px
}

.subguild-card {
    --rank: var(--color-sky);
    padding: 25px
}

.subguild-card .rank-card__head > .iconify {
    width: 50px;
    height: 50px;
    padding: 12px
}

.subguild-card .rank-card__head h3 {
    font-size: 24px
}

.subguild-card .condition {
    min-height: 64px
}

.subguild-card .condition p {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 7px
}

.subguild-card .condition p > b {
    color: var(--color-text);
    font-size: 12px
}

.subguild-card .condition strong {
    margin: 0
}

.rc-rank-grid .rank-card {
    min-height: 250px
}

.rc-rank-grid .condition {
    min-height: 58px
}

.rc-rank-grid .condition p {
    font-size: 13px
}

@media (max-width: 850px) {
    .subguild-grid {
        grid-template-columns:1fr
    }

    .subguild-card {
        min-height: 0
    }
}

@media (max-width: 560px) {
    .rc-rank-grid {
        margin-bottom: 54px
    }

    .subguild-title h3 {
        font-size: 26px
    }
}

/* Subguild headings */
.subguild-title {
    margin: 0 0 38px;
    text-align: center
}

.subguild-title > span {
    display: none
}

.subguild-title h3 {
    position: relative;
    width: max-content;
    max-width: 100%;
    margin: 0 auto 12px;
    padding: 0 54px;
    font-size: clamp(32px, 5vw, 48px);
    font-weight: 900;
    line-height: 1.05;
    letter-spacing: -.045em;
    background: linear-gradient(90deg, var(--color-accent-strong), var(--color-sky));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent
}

.subguild-title h3::before, .subguild-title h3::after {
    position: absolute;
    top: 50%;
    width: 34px;
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(90deg, transparent, var(--color-accent));
    content: ""
}

.subguild-title h3::before {
    right: calc(100% - 42px)
}

.subguild-title h3::after {
    left: calc(100% - 42px);
    transform: rotate(180deg)
}

.subguild-title p {
    margin: 0;
    color: var(--color-text-muted);
    font-size: 13px
}

@media (max-width: 560px) {
    .subguild-title h3 {
        padding: 0 28px;
        font-size: 32px
    }

    .subguild-title h3::before, .subguild-title h3::after {
        width: 18px
    }
}

/* Rank typography */
.rank-chain b {
    font-size: 14px;
    font-weight: 850;
    letter-spacing: .085em
}

.rank-chain .dot {
    width: 12px;
    height: 12px
}

.rank-card h3 {
    font-size: 34px
}

.subguild-card .rank-card__head h3 {
    font-size: 29px
}

@media (max-width: 560px) {
    .rank-chain b {
        font-size: 12px
    }

    .rank-chain .dot {
        width: 10px;
        height: 10px
    }

    .rank-card h3 {
        font-size: 30px
    }
}

/* Rank hierarchies */
.subguild-rank-chain {
    margin-top: -16px;
    margin-bottom: 34px
}

.rank-chain .dot.active {
    background: var(--color-emerald);
    box-shadow: 0 0 10px color-mix(in srgb, var(--color-emerald) 62%, transparent)
}

.subguild-rank-chain b:last-child {
    color: var(--color-emerald)
}

@media (max-width: 560px) {
    .subguild-rank-chain {
        margin-top: -10px;
        margin-bottom: 28px
    }
}

/* Rank card order */
.rank-grid > .card-mythic {
    order: 1
}

.rank-grid > .card-elite {
    order: 2
}

.rank-grid > .card-senior {
    order: 3
}

.rank-grid > .card-member {
    order: 4
}

/* Rank card headings */
.rank-card__head small {
    display: none !important
}

.rank-card__head h3 {
    margin-top: 0
}

/* RuGaming subguilds */
.rg-subguild-title {
    margin-top: 74px
}

.rg-subguild-grid {
    margin-bottom: 12px
}

.rg-subguild-grid .subguild-card {
    --rank: var(--color-sky)
}

@media (max-width: 560px) {
    .rg-subguild-title {
        margin-top: 54px
    }
}

/* Roles reveal motion */
.roles-motion .roles-reveal {
    opacity: 0;
    transform: translateY(14px) scale(.992);
    filter: blur(1.5px);
    transition: opacity .28s cubic-bezier(.2, .75, .25, 1), transform .28s cubic-bezier(.2, .75, .25, 1), filter .22s ease;
    transition-delay: var(--reveal-delay, 0ms)
}

.roles-motion .roles-reveal.is-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0)
}

@media (prefers-reduced-motion: reduce) {
    .roles-motion .roles-reveal {
        opacity: 1;
        transform: none;
        filter: none;
        transition: none
    }
}

/* Roles footer */
.site-footer[data-site-shell="footer"] {
    position: relative;
    overflow: hidden;
    margin-top: 72px;
    margin-bottom: 24px;
    padding: 28px 30px;
    border: 1px solid color-mix(in srgb, var(--color-border) 68%, transparent);
    border-radius: 20px;
    background: color-mix(in srgb, var(--color-bg) 56%, transparent);
    box-shadow: 0 22px 65px rgba(2, 8, 20, .18), inset 0 1px rgba(255, 255, 255, .06);
    backdrop-filter: blur(24px) saturate(1.18);
    -webkit-backdrop-filter: blur(24px) saturate(1.18)
}

.site-footer[data-site-shell="footer"]::before {
    position: absolute;
    top: 0;
    right: 10%;
    left: 10%;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--color-accent-strong), var(--color-sky), transparent);
    content: ""
}

.site-footer[data-site-shell="footer"]::after {
    position: absolute;
    top: -90px;
    right: -40px;
    width: 240px;
    height: 180px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--color-accent) 7%, transparent);
    filter: blur(45px);
    pointer-events: none;
    content: ""
}

.site-footer[data-site-shell="footer"] .site-footer__inner {
    position: relative;
    z-index: 1;
    gap: 24px 34px
}

.site-footer__brand strong, .site-footer__group strong {
    color: var(--color-text);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase
}

.site-footer__brand p, .site-footer__group p {
    color: var(--color-text-muted)
}

.site-footer__brand a, .site-footer__group a {
    position: relative;
    padding: 3px 0;
    color: var(--color-text-muted);
    transition: color .18s ease, transform .18s ease
}

.site-footer__brand a:hover, .site-footer__group a:hover {
    transform: translateX(3px);
    color: var(--color-sky)
}

.site-footer__controls .site-footer__language, .site-footer__controls .site-footer__theme {
    border-color: color-mix(in srgb, var(--color-border) 72%, transparent);
    border-radius: 11px;
    background: color-mix(in srgb, var(--color-surface) 42%, transparent);
    box-shadow: inset 0 1px rgba(255, 255, 255, .05)
}

.site-footer__controls .site-footer__language:hover, .site-footer__controls .site-footer__theme:hover {
    border-color: color-mix(in srgb, var(--color-accent) 55%, var(--color-border));
    background: color-mix(in srgb, var(--color-accent) 11%, transparent)
}

.light-theme .site-footer[data-site-shell="footer"] {
    border-color: rgba(137, 160, 187, .42);
    background: rgba(255, 255, 255, .54);
    box-shadow: 0 20px 58px rgba(31, 55, 84, .1), inset 0 1px rgba(255, 255, 255, .8);
    backdrop-filter: blur(26px) saturate(1.12);
    -webkit-backdrop-filter: blur(26px) saturate(1.12)
}

.light-theme .site-footer__controls .site-footer__language, .light-theme .site-footer__controls .site-footer__theme {
    background: rgba(255, 255, 255, .48)
}

@media (max-width: 576px) {
    .site-footer[data-site-shell="footer"] {
        margin-top: 48px;
        padding: 22px 20px;
        border-radius: 17px
    }

    .site-footer[data-site-shell="footer"] .site-footer__inner {
        gap: 20px
    }
}

/* Roles surface borders */
/* Shared animated perimeter used by the index surface system. */
.htp-card, .stat-block .row, #gexp_overall .g-exp-statistics, .best-player-block .card-transparent, .site-footer[data-site-shell="footer"] {
    position: relative;
    border-color: transparent !important
}

.htp-card::before, .stat-block .row::before, #gexp_overall .g-exp-statistics::before, .best-player-block .card-transparent::before, .site-footer[data-site-shell="footer"]::before {
    position: absolute;
    inset: -1px;
    z-index: 3;
    display: block;
    width: auto;
    height: auto;
    padding: 1px;
    border: 0;
    border-radius: inherit;
    background: linear-gradient(110deg, var(--color-accent-strong), var(--color-sky), rgba(255, 255, 255, .72), var(--color-accent), var(--color-accent-strong));
    background-size: 300% 100%;
    transform: none;
    pointer-events: none;
    content: "";
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    animation: index-border-shimmer 5.5s linear infinite
}

.htp-card > *, .stat-block .row > *, #gexp_overall .g-exp-statistics > *, .best-player-block .card-transparent > *, .site-footer[data-site-shell="footer"] > * {
    position: relative;
    z-index: 4
}

.htp-card:hover::before {
    background: linear-gradient(110deg, var(--color-accent-strong), var(--color-sky), #fff, var(--color-accent), var(--color-accent-strong));
    background-size: 300% 100%
}

.light-theme .htp-card::before, .light-theme .stat-block .row::before, .light-theme #gexp_overall .g-exp-statistics::before, .light-theme .best-player-block .card-transparent::before, .light-theme .site-footer[data-site-shell="footer"]::before {
    opacity: .72;
    background: linear-gradient(110deg, #0d55be, #55b8ff, rgba(255, 255, 255, .95), #1769e0, #0d55be);
    background-size: 300% 100%
}

@keyframes index-border-shimmer {
    0% {
        background-position: 0 50%
    }
    100% {
        background-position: 300% 50%
    }
}

@media (prefers-reduced-motion: reduce) {
    .htp-card::before, .stat-block .row::before, #gexp_overall .g-exp-statistics::before, .best-player-block .card-transparent::before, .site-footer[data-site-shell="footer"]::before {
        animation: none;
        background-position: 50% 50%
    }
}

/* Roles footer border */
.site-footer[data-site-shell="footer"] {
    position: relative !important;
    border: 1px solid transparent !important
}

.site-footer[data-site-shell="footer"]::before {
    position: absolute !important;
    inset: 0 !important;
    z-index: 30 !important;
    display: block !important;
    width: auto !important;
    height: auto !important;
    padding: 1px !important;
    border: 0 !important;
    border-radius: inherit !important;
    background: linear-gradient(110deg, var(--color-accent-strong), var(--color-sky), rgba(255, 255, 255, .85), var(--color-accent), var(--color-accent-strong)) !important;
    background-size: 300% 100% !important;
    transform: none !important;
    opacity: 1 !important;
    pointer-events: none !important;
    content: "" !important;
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0) !important;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0) !important;
    -webkit-mask-composite: xor !important;
    mask-composite: exclude !important;
    animation: index-border-shimmer 5.5s linear infinite !important
}

.site-footer[data-site-shell="footer"] > .site-footer__inner {
    position: relative !important;
    z-index: 31 !important
}

.light-theme .site-footer[data-site-shell="footer"]::before {
    opacity: .82 !important;
    background: linear-gradient(110deg, #0d55be, #55b8ff, #fff, #1769e0, #0d55be) !important;
    background-size: 300% 100% !important
}

@media (prefers-reduced-motion: reduce) {
    .site-footer[data-site-shell="footer"]::before {
        animation: none !important;
        background-position: 50% 50% !important
    }
}

/* Roles border contrast */
.htp-card::before, .stat-block .stat::before, #gexp_overall .g-exp-statistics::before, .best-player-block .card-transparent::before, .site-footer[data-site-shell="footer"]::before {
    opacity: .48 !important
}

.light-theme .htp-card::before, .light-theme .stat-block .stat::before, .light-theme #gexp_overall .g-exp-statistics::before, .light-theme .best-player-block .card-transparent::before, .light-theme .site-footer[data-site-shell="footer"]::before {
    opacity: .38 !important
}

/* Role palette */
.card-member {
    --rank: #7f8fa3
}

.card-senior {
    --rank: var(--color-accent-strong)
}

.card-elite {
    --rank: #55a7ff
}

.card-mythic {
    --rank: var(--color-sky)
}

.rank-chain .dot.member {
    background: #7f8fa3;
    box-shadow: 0 0 8px rgba(127, 143, 163, .3)
}

.rank-chain .dot.senior {
    background: var(--color-accent-strong);
    box-shadow: 0 0 10px color-mix(in srgb, var(--color-accent-strong) 58%, transparent)
}

.rank-chain .dot.elite {
    background: #55a7ff;
    box-shadow: 0 0 10px rgba(85, 167, 255, .58)
}

.rank-chain .dot.mythic {
    background: var(--color-sky);
    box-shadow: 0 0 12px color-mix(in srgb, var(--color-sky) 68%, transparent)
}

.rank-card {
    background: linear-gradient(140deg, color-mix(in srgb, var(--rank) 8%, var(--color-surface)), color-mix(in srgb, var(--color-surface) 92%, transparent))
}

.rank-card__head > .iconify {
    background: color-mix(in srgb, var(--rank) 13%, transparent);
    filter: drop-shadow(0 0 14px color-mix(in srgb, var(--rank) 28%, transparent))
}

.light-theme .card-member {
    --rank: #64748b
}

.light-theme .card-senior {
    --rank: #0d55be
}

.light-theme .card-elite {
    --rank: #1677dc
}

.light-theme .card-mythic {
    --rank: #0784bd
}

/* Role condition emphasis */
.condition-title {
    margin-bottom: 16px;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .13em
}

.conditions {
    gap: 11px
}

.condition {
    min-height: 62px;
    padding: 14px 15px;
    gap: 12px;
    border-color: color-mix(in srgb, var(--rank) 17%, var(--color-border));
    background: color-mix(in srgb, var(--rank) 5%, var(--color-surface))
}

.condition > .iconify {
    font-size: 22px;
    filter: drop-shadow(0 0 7px color-mix(in srgb, var(--rank) 34%, transparent))
}

.condition p {
    color: var(--color-text);
    font-size: 14px;
    font-weight: 650;
    line-height: 1.4
}

.condition strong {
    margin-left: 6px;
    padding: 4px 8px;
    border-color: color-mix(in srgb, var(--rank) 34%, transparent);
    border-radius: 7px;
    background: color-mix(in srgb, var(--rank) 15%, transparent);
    font-size: 15px;
    font-weight: 900;
    letter-spacing: .01em
}

.subguild-card .condition {
    min-height: 72px
}

.subguild-card .condition p > b {
    font-size: 14px;
    font-weight: 850
}

.light-theme .condition {
    background: color-mix(in srgb, var(--rank) 6%, #fff)
}

@media (max-width: 560px) {
    .condition {
        min-height: 58px
    }

    .condition p {
        font-size: 13px
    }

    .condition strong {
        font-size: 14px
    }
}