.NOT-ranking-page {
    min-height: 100vh;
    background-color: #00000080;
    padding-top: .42rem;
    padding-bottom: 1.4rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-family: Roboto
}

.NOT-ranking-page-header {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 100%;
    padding: 0 .48rem
}

.NOT-ranking-page-title {
    width: 100%;
    font-weight: 700;
    font-size: .48rem;
    color: #fff;
    text-align: center
}

.NOT-ranking-page-back {
    width: .2rem;
    height: .34rem;
    transform-origin: center;
    background: url(/imgs/right.png) no-repeat center center / contain;
    position: absolute;
    left: .48rem;
    top: 50%;
    transform: translateY(-50%) rotate(180deg)
}

.NOT-countdown {
    display: inline-flex;
    align-items: center
}

.NOT-countdown-icon {
    width: .34rem;
    height: .34rem;
    margin-right: .1rem;
    background-image: url(/imgs/clock.png);
    background-size: contain;
    background-repeat: no-repeat
}

.NOT-countdown-icon:where([dir=rtl],[dir=rtl] *) {
    margin-right: 0;
    margin-left: .1rem
}

.NOT-countdown-text {
    font-weight: 400;
    font-size: .3rem;
    color: #ebd6fd
}

.NOT-switch-btn {
    display: inline-flex;
    align-items: flex-end;
    padding: .1rem .24rem .16rem;
    background: #674a7a;
    border-radius: .27rem
}

.NOT-switch-btn-text {
    font-weight: 400;
    font-size: .3rem;
    line-height: .3rem;
    color: #ebd6fd
}

.NOT-switch-btn-icon {
    width: .27rem;
    height: .27rem;
    margin-left: .1rem;
    background-image: url(/imgs/exchange.png);
    background-size: contain;
    background-repeat: no-repeat
}

.NOT-switch-btn-icon:where([dir=rtl],[dir=rtl] *) {
    margin-left: 0;
    margin-right: .1rem
}

.NOT-tabs {
    width: 100%;
    padding: 0 .2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center
}

.NOT-tab-links {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0
}

.NOT-tab {
    font-weight: 600;
    font-size: .32rem;
    color: #fff;
    padding: 0 .2rem;
    cursor: pointer;
    position: relative
}

.NOT-tab:after {
    content: "";
    display: block;
    width: .5rem;
    height: .08rem;
    background-color: transparent;
    position: absolute;
    bottom: -.1rem;
    left: 50%;
    transform: translate(-50%);
    transition: background-color .3s;
    border-radius: .04rem
}

.NOT-tab.active {
    color: #fff
}

.NOT-tab.active:after {
    background-color: #fff
}

.NOT-tab-content {
    overflow: hidden
}

.NOT-content {
    display: flex;
    justify-content: center
}

.NOT-ranking-containter {
    width: 6.8rem;
    min-height: calc(100vh - 5.68rem);
    max-height: calc(100vh - 4.8rem);
    position: relative;
    margin-top: .2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: .24rem;
    background: #0000004d;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-radius: .32rem
}

.NOT-ranking-containter:before {
    content: "";
    position: absolute;
    top: -.18rem;
    left: 50%;
    transform: translate(-50%);
    width: 0;
    height: 0;
    border-left: .15rem solid transparent;
    border-right: .15rem solid transparent;
    border-bottom: .18rem solid #0000004d;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px)
}

.NOT-ranking-containter-no-countdown {
    min-height: calc(100vh - 3.88rem)
}

.NOT-ranking-list {
    width: 6.8rem;
    gap: .08rem;
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 3.97rem);
    overflow-y: auto;
    width: 100%
}

.NOT-ranking-item {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: .2rem;
    font-size: .28rem;
    line-height: .28rem;
    color: #fff;
    font-weight: 400;
    padding: .2rem;
    border-radius: .16rem;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    background: #411d55
}

.NOT-ranking-item-player {
    display: inline-flex;
    align-items: center;
    position: relative;
    height: .6rem;
    width: .6rem;
    flex-shrink: 0
}

.NOT-ranking-item-player-avatar {
    position: absolute;
    z-index: 2;
    top: 0;
    left: 0rem;
    width: .6rem;
    height: .6rem;
    border-radius: 50%
}

.NOT-ranking-item.NOT-ranking-item-last {
    width: 100%;
    position: absolute;
    right: 0;
    left: 0;
    bottom: 0;
    z-index: 3;
    background: #563669;
    border-bottom: none;
    padding: .32rem .44rem;
    border-radius: 0 0 .16rem .16rem
}

.NOT-ranking-item-rank {
    width: .72rem;
    height: .72rem;
    min-width: .7rem;
    text-align: center;
    line-height: .72rem;
    font-weight: 700;
    font-size: .36rem;
    color: #fff;
    flex-shrink: 0
}

.NOT-ranking-item-rank:where([dir=rtl],[dir=rtl] *) {
    margin-right: 0;
    margin-left: .2rem
}

.NOT-ranking-item-rank-icon {
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    flex-shrink: 0
}

.NOT-ranking-item-rank-icon-first {
    background-image: url(/imgs/rank_1.png?v=1);
    width: .72rem;
    height: .72rem
}

.NOT-ranking-item-rank-icon-second {
    background-image: url(/imgs/rank_2.png?v=2);
    width: .64rem;
    height: .64rem
}

.NOT-ranking-item-rank-icon-third {
    background-image: url(/imgs/rank_3.png?v=3);
    width: .6rem;
    height: .6rem
}

.NOT-ranking-item-player-default-avatar {
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0rem;
    width: .6rem;
    height: .6rem;
    border-radius: 50%
}

.NOT-ranking-item-player-name {
    font-weight: 400;
    font-size: .28rem;
    color: #fff;
    width: 2.5rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.NOT-ranking-item-player-name:where([dir=rtl],[dir=rtl] *) {
    margin-left: 0;
    margin-right: .2rem
}

.NOT-ranking-item-invition-count {
    display: inline-flex;
    align-items: center;
    font-weight: 700;
    font-size: .28rem;
    color: #fff
}

.NOT-ranking-item-invition-count-icon {
    width: .36rem;
    height: .36rem;
    background-image: url(/imgs/ranking_player.png?v=1);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center
}

.NOT-ranking-item-invition-reward {
    display: flex;
    align-items: center;
    gap: .04rem
}

.NOT-ranking-item-invition-reward-text {
    font-size: .36rem;
    color: #fbd815;
    font-weight: 700
}

.NOT-ranking-item-invition-reward-icon {
    width: .36rem;
    height: .38rem;
    background-image: url(/imgs/ticket.png?v=1);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    flex-shrink: 0
}