@font-face {
    font-family: 'Monocraft';
    src: url('https://cdn.jsdelivr.net/gh/IdreesInc/Monocraft@main/dist/Monocraft-ttf/Monocraft.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
    .hidden { 
        display: none !important;   
    }
    body::before {
        display: none !important;   
    }
div#ranks-info {
    box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
    border: 2px solid #856bbb;
    border-radius: 10px;
    background: #65528d;
    padding: 25px;
    margin-bottom: 30px;
    outline: 2px solid #2a2439;
}

div#ranks-info .text {
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

div#ranks-info .text h1 {
    font-size: 19px;
}

div#ranks-info .text p {
    font-family: 'Monocraft', sans-serif;
}
.rank-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.rank-table.rank-grid {
    row-gap: 0;
}

.rank-table-top .rth {
    background: red;
    text-align: center;
    display: flex;
    flex-direction: column;
    min-height: 100px;
    align-items: center;
    justify-content: center;
    gap: 5px;
    font-weight: 800;
    font-size: 16px;
}

.rank-table-top .rth h1 {
    font-size: 21px;
    font-weight: normal;
}

.rank-table-row {
    outline: 2px solid #2a2439;
    background: #473c5f;
    border-radius: 12px;
    border-top: none;
    overflow: hidden;
    box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
    display: grid;
    grid-row: span 4;
    grid-template-rows: subgrid;
}

.rth.head {
    padding: 30px;
    text-align: center;
    line-height: 20px;
    background: #0cc9f0;
}

.rt-features {
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
    border: 2px solid #5e4e84;
    border-top: 0px;
    padding: 18px;
    display: grid;
    grid-row: span 3;
    grid-template-rows: subgrid;
    gap: 0;
}

.rth-section {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.rth-section:not(:first-child) {
    margin-top: 16px;
    padding-top: 8px;
    border-top: 1px solid #5e4e8466;
}

.rank-table-row:nth-child(2) .rth.head {
    background: #0895ef;
}

.rank-table-row:nth-child(3) .rth.head {
    background: #f72585;
}

.rank-table-row:nth-child(4) .rth.head {
    background: #b5179e;
}
.basket .basket-item .btn-primary {
    height: 42px;
    padding: 0px;
    display: inline-flex !important;
    width: 42px !important;
    flex: none;
    font-size: 15px;
}
.rth.head h1 {
    font-family: 'Monocraft', sans-serif;
    font-size: 24px;
    margin-bottom: 8px;
    margin-top: 4px;
    text-shadow: 2px 3px 0px #0000002e;
}

.rth.head p {
    font-family: 'Monocraft', sans-serif;
    font-weight: 900;
    font-size: 15px;
    opacity: .75;
}

.rt-features .rth:not(.title) {
    font-family: 'Monocraft', sans-serif;
    color: #ffffff;
    font-weight: 700;
    font-size: 13px;
}

.rt-features .rth.title h1 {
    font-family: 'Monocraft', sans-serif;
    font-size: 11px;
    color: #7a6a9e;
    letter-spacing: 0.04em;
}

.rarity-rare {
    color: #55FF55;
    text-shadow: 0 0 8px #55ff5540;
}

.rarity-epic {
    color: #CC44CC;
    text-shadow: 0 0 8px #aa00aa50;
}

.rarity-legendary {
    color: #FFAA00;
    text-shadow: 0 0 8px #FFAA0040;
}

.paren {
    color: #FFA040;
    opacity: 0.8;
}

.gems {
    color: #A954FF;
    text-shadow: 0 0 8px #A954FF44;
}

div#rank-table {
    background: #3f3654;
    padding: 16px;
    border-radius: 12px;
    border: 2px solid #534370;
    outline: 2px solid #2a2439;
    box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
}

.item.loader h1 {
    visibility: hidden;
}

.item.loader .quantity {
    visibility: hidden;
}

.item.loader .actions {
    visibility: hidden;
}
div#view {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    position: relative;
    background: rgb(66 57 87);
}
.item.loader {
    align-items: center;
    justify-content: center;
}

.loader-icon {
    position: absolute;
}

.loader-icon svg {
    width: 50px;
}
div#content {
    flex: 1;
    padding: 30px 0px;
}

div#head {
    padding-top: 44px;
}

div#head .logo {
    max-width: 180px;
}

div#head .logo img {
    max-width: 100%;
}

@keyframes logo-wiggle {
    0%   { transform: rotate(0deg); }
    15%  { transform: rotate(-6deg); }
    30%  { transform: rotate(6deg); }
    45%  { transform: rotate(-4deg); }
    60%  { transform: rotate(4deg); }
    75%  { transform: rotate(-2deg); }
    90%  { transform: rotate(2deg); }
    100% { transform: rotate(0deg); }
}

div#head .logo:hover img {
    animation: logo-wiggle 0.5s ease;
}

div#head .container {
    display: flex;
    align-items: center;
    justify-content: center;
}

div#view {
    position: relative;
}

div#view:after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    background: linear-gradient(180deg, rgb(0 0 0 / 30%), #423957);
    max-height: 500px;
}

div#content, #head {
    position: relative;
    z-index: 5;
}

    #foot {background: #2a2537;padding: 30px 0px;}
    #foot .top {display: flex;align-items: center;padding: 40px 0px;border-bottom: 1px solid #ffffff0d;}
    #foot .top h1 {margin: 0;line-height: 1;font-size: 28px;text-transform: uppercase;}
    #foot .top .right {margin-left: auto;display: flex;gap: 30px;}
    #foot .top .right a {color: #d7ddf1;font-weight: bold;font-size: 13px;text-decoration: none !important;}
    #foot .middle {display: flex;align-items: center;padding: 35px 0px;color: #d7ddf159;font-weight: bold;font-size: 13px;}
    #foot .middle .text {line-height: 1.65;}
    #foot .middle .text > span {color: #d7ddf1b8;font-size: 14px;}
    #foot .middle .text > span strong {color: #d7ddf1;}
    #foot .watermark {display:flex;align-items:center;gap:10px;width:auto;margin-left:auto;}
    #foot .watermark path {fill: #d7ddf12e;}
    #benj svg {width: 54px; height: auto; display: block;}

.container {
    max-width: 1140px;
    margin: 0 auto;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Monocraft', sans-serif;
    FONT-WEIGHT: normal;
}

#foot .top .right a {
    font-family: 'Monocraft', sans-serif;
    FONT-WEIGHT: normal;
    font-size: 16px;
}

#foot .middle {
    font-family: 'Monocraft', sans-serif;
    FONT-WEIGHT: normal;
    font-size: 11px;
}

#foot .middle .text > span strong {
    font-weight: normal;
}
#foot .top .left {
    display: flex;
    align-items: center;
    gap: 16px;
}

.footer-icon {
    height: 44px;
    width: auto;
}

.footer-wordmark {
    max-height: 40px;
    width: auto;
}

div#foot {
    border-top: 12px solid #4d4269;
}

#foot .watermark {
    display: flex;
    align-items: center;
    gap: 10px;
    width: auto;
    margin-left: auto;
}

.watermark-ours {
    width: 36px;
    height: auto;
    opacity: 0.18;
    filter: grayscale(1);
}

.watermark-sep {
    color: #d7ddf12e;
    font-size: 14px;
    line-height: 1;
}
.item {
    min-height: 280px;
    background: #4d4269;
    flex: 1;
    min-width: 300px;
    border-radius: 20px;
    border: 3px solid rgb(108 87 152 / 77%);
    box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
}

.grid {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
}

/* */
.item .quantity {
    display: flex;
    gap: 10px;
    flex: 1;
}

.item {display: flex;align-items: flex-end;padding: 40px;}

.quantity .q-item {
    background: #65528d;
    flex: 1;
    display: flex;
    contain: content;
    justify-content: center;
    height: 50px;
    align-items: center;
    border-radius: 10px;
    border: 2px solid #856bbb;
    font-family: 'Monocraft', sans-serif;
    FONT-WEIGHT: normal;
    box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
    cursor: pointer;
    transition: all .15s ease;
}

.quantity .q-item.active {
    background: #fb153a;
    border-color: #ff5454;
}

.quantity .q-item:hover {
    border-color: #9c80d4;
    background: #856bbb;
}

.quantity .q-item.active:hover {
    background: #ff3456;
    border-color: #ff8b8b;
}

.item .text {
    width: 100%;
    text-align: center;
    margin-bottom: 20px;
}
.package-image {
    max-width: 130px;
    margin-bottom: 20px;
}
.empty {
    width: 100%;
}
.package-image img {
    max-width: 100%;
}
.item {
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    outline: 2px solid #342c44;
}

.item .quantity {
    flex: none;
    width: 100%;
}

.item .text h1 {
    font-size: 26px;
    text-shadow: 3px 3px 0 #2a2537;
}

.q-item {
    text-shadow: 2px 2px 0 #2a253785;
}

.page-bg {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    overflow: hidden;
    max-height: 500px;
    opacity: .1;
}

.page-bg img {
    filter: blur(9px);
}

.action-btn {
    background: #03b1f4;
    flex: 1;
    display: flex;
    contain: content;
    justify-content: center;
    height: 58px;
    align-items: center;
    border-radius: 10px;
    border: 2px solid #70d3ff;
    font-family: 'Monocraft', sans-serif;
    FONT-WEIGHT: normal;
    box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
    cursor: pointer;
    transition: all .15s ease;
    text-shadow: 2px 2px 0 #2a253785;
}

.item .actions {
    width: 100%;
    margin-top: 20px;
}

.item .action-btn:hover {
    background: #22c2ff;
    border: 2px solid #7cd7ff;
}


div#head .left,div#head .right {
    flex: 1;
    display: flex;
    text-align:right;-
;
    justify-content: flex-end;
}

div#head .right {
    text-align: left;
    justify-content: flex-start;
}

div#head .container {
    gap: 100px;
}

.player-wrap .count {position: absolute;top: 0;right: 0;margin: -15px;background: #fb153a;padding: 4px 10px;border-radius: 100px;font-weight: 900;border: 2px solid #ff5454 !important;!i;!;outline: 2px solid #2f273e;font-size: 15px;}

.player-wrap .text h1 {
    font-size: 26px;
}

.player-wrap .text {
    text-shadow: 3px 3px 0 #2a2537;
}

.player-wrap .text p {
    font-family: 'Monocraft', sans-serif;
    FONT-WEIGHT: normal;
    display: block;
    font-size: 12px;
    margin-top: 2px;
}

.player-wrap {
    display: flex;
    align-items: center;
    gap: 40px;
    cursor: pointer;
}

.player-wrap .icon {
    width: 75px;
    height: 75px;
    background: #4d4269;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 20px;
    border: 2px solid #65528d;
    outline: solid #2f273e;
    position: relative;
}

.left .player-wrap .icon {
    order: 5;
}
.player-wrap .icon i {
    font-size: 30px;
}
div#category-nav {
    background: rgb(66 57 87);
    border-radius: 20px;
    border: 3px solid rgb(108 87 152 / 45%);
    box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
    margin-bottom: 30px;
    padding: 0 30px;
    height: 90px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 30px;
    outline: 2px solid #2c253b;
    position: relative;
    z-index: 2;
}

div#category-nav a {
    background: #65528d;
    display: flex;
    contain: content;
    justify-content: center;
    height: 52px;
    align-items: center;
    border-radius: 10px;
    border: 2px solid #856bbb;
    font-family: 'Monocraft', sans-serif;
    FONT-WEIGHT: normal;
    box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
    cursor: pointer;
    transition: all .15s ease;
    padding: 0 42px;
    text-shadow: 2px 2px 0 #2a253785;
}

div#category-nav .center {
    display: flex;
    gap: 30px;
}

div#category-nav .left, div#category-nav .right {
    flex: 1;
}

div#category-nav a.active {
    background: #fb153a;
    border-color: #ff5454;
}

div#category-nav a:hover {
    background: #856bbb;
    border-color: #9c80d4;
}

div#category-nav a.active:hover {
    background: #ff3456;
    border-color: #ff8b8b !important;
}
div#category-nav a.icon {
    background: #65528d36;
    border-color: #856bbb5e;
}
.user img {
    max-width: 30px;
    border-radius: 7px;
    margin-right: 12px;
}
div#category-nav a.icon {
    display: flex;
    align-items: center;
}

div#category-nav a.icon i {
    margin-right: 11px;
    position: relative;
    top: -1px;
    font-size: 17px;
}
@media only screen and (max-width: 768px) {
.rank-grid {
    grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
}
.grid {
    gap: 20px !important;
}

.container {
    padding: 0 20px !important;
}

#foot .top {flex-direction: column;align-items: center;justify-content: center;display: none !important;}

#foot .top .left {
    flex: 1 !important;
    width: 100% !important;
    text-align: center !important;
    justify-content: center !important;
    display: none !important;
}

#foot .top .right {
    gap: 10px !important;
    margin: 0 auto !important;
}

#foot .watermark {
    display: none !important;
}

#foot .middle .text {
    margin: 0 auto !important;
    text-align: center !important;
}

#foot .middle {
    padding: 25px 0px !important;
}
div#category-nav .center {
    flex-direction: column;
    gap: 10px;
    flex: 1;
}

div#category-nav {
    height: auto;
    padding: 20px;
    flex-direction: column;
    gap: 10px;
}

div#category-nav .left, div#category-nav .right,div#category-nav .center {
    width: 100%;
}

div#head .left, div#head .right {
    display: none;
}
}

.action-btn {
    flex: 1;
    width: 100%;
}


/* */
.popup.store-product-popup {
    background: #201a30eb;
}
.popup-content.store-product-popup-content.store-product.store-product-full {
    background: #4d4269;
    flex: 1;
    min-width: 300px;
    border-radius: 20px;
    border: 3px solid rgb(108 87 152 / 77%);
    box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
    padding: 40px;
}

.store-product-full .product-title {
    font-weight: normal;
    font-size: 32px;
}

.store-product-full .actions {
    margin-left: -40px;
    margin-right: -40px;
    margin-bottom: -40px;
    background: #63508a;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
}

.store-product-full .descr {
    color: white;
}

.btn-primary {
    background: #03b1f4 !important;
    flex: 1;
    display: flex;
    contain: content;
    justify-content: center;
    height: 49px;
    align-items: center;
    border-radius: 10px;
    border: 2px solid #70d3ff;
    font-family: 'Monocraft', sans-serif;
    FONT-WEIGHT: normal;
    box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1) !important;
    cursor: pointer;
    transition: all .15s ease;
    text-shadow: 2px 2px 0 #2a253785;
    color: white !important;
}

.tab-content {
    display: none;
    transition: opacity 0.22s ease;
}

.tab-content.active {
    display: block;
}

.empty {
    background: #65528d;
    display: flex;
    contain: content;
    justify-content: center;
    height: 72px;
    align-items: center;
    border-radius: 10px;
    border: 2px solid #856bbb;
    font-family: 'Monocraft', sans-serif;
    FONT-WEIGHT: normal;
    box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
    cursor: pointer;
    transition: all .15s ease;
    padding: 0 42px;
    text-shadow: 2px 2px 0 #2a253785;
}

.package {
    flex: 1;
}

.package.large .item .text,.package .item .text {
    margin-bottom: 0px;
}

/* */

.store-text {
    outline: 2px solid #2c253b;
    background: #4d42694d;
    border-radius: 20px;
    border: 3px solid rgb(108 87 152 / 45%);
    box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
}

.site-header, .site-sale-banner, .site-home-categories, .site-content, .site-footer-inner {
    padding: 0px;
}
form.field {
    margin:0px !important;
}
form.field button {
    width: 100%;
}
.store-form input[type=text], .store-form input[type=password], .store-form input[type=email], .store-form input[type=number], .store-form input[type=search], .store-form input[type=url], .store-form input[type=tel], .store-form input[type=date], .store-form input[type=time], .store-form input[type=datetime-local], .store-form input[type=file], .store-form input[type=month], .store-form input[type=week], .store-form select, .store-form textarea {
    background: #2a2537;
    color: white !important;
}
div#category-nav .icon.open-basket {
    display: flex;
    contain: content;
    justify-content: center;
    height: 52px;
    align-items: center;
    border-radius: 10px;
    border: 2px solid #856bbb;
    font-family: 'Monocraft', sans-serif;
    FONT-WEIGHT: normal;
    box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
    cursor: pointer;
    transition: all .15s ease;
    padding: 0 42px;
    text-shadow: 2px 2px 0 #2a253785;
    background: #65528d36;
    border-color: #856bbb5e;
    gap: 10px;
    width: 100%;
}
.popup-content.basket-popup-content.basket {
    background: #483c5f;
    border: 3px solid rgb(108 87 152 / 45%);
    box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
    outline: 2px solid #2c253b;
    border-top: none;
    border-right: none;
    border-bottom: none;
}

.basket-empty {
    font-family: 'Monocraft', sans-serif;
    FONT-WEIGHT: normal;
    text-shadow: 2px 2px 0 #2a253785;
}
.store-form input, .store-form select, .store-form textarea {
    border-radius: 6px;
    height: 58px;
}


/* */
.basket .basket-checkout .checkout {
    height: 68px;
}

.basket .basket-checkout .total strong {
    color: #aae763 !important;
}
.basket .basket-item {
    border: 2px solid #856bbb;
    outline: solid #2b243a;
    background: #65528d;
}

.basket .basket-item .title {
    font-weight: normal;
    font-size: 17px;
}

.basket .basket-header {
    display: none;
}

.basket .basket-second-header {
    display: none;
}

.quantity-field {
    background: #856bbb;
    border: 2px solid #9a7dd7 !important;
}

.basket .basket-item .remove {
    background: #fb153a !important;
    border: 2px solid #ff5454 !important;
}

.price {
    font-family: 'Monocraft', sans-serif;
    FONT-WEIGHT: normal;
}

.basket .basket-item .price strong {
    font-size: 14px;
    display: block;
    color: #aae763 !important;
}

[data-sc] {
    font-family: 'Monocraft', sans-serif;
    font-size: 1.12em;
    position: relative;
    top: -2px;
}
.package-image {
    margin-top: -32px;
    position: relative;
    z-index: 5;
    margin-bottom: 10px;
}

.tab-content {
    padding-top: 20px;
}

.store-product .quantity-field {
    background: #393050;
}

.item .discount {
    position: absolute;
    top: -5px;
    right: -58px;
    background: #fb153a;
    padding: 5px 10px;
    border-radius: 100px;
    font-weight: 900;
    border: 2px solid #ff5454 !important;
    outline: 2px solid #2f273e;
    font-size: 15px;
}

.item .text {
    position: relative;
}
header.basket-head {
    background: #9a7dd72b;
    padding: 25px;
    display: flex;
    align-items: center;
    gap: 25px;
    margin-left: -2px;
    margin-bottom: 5px;
    box-shadow: inset 0px -2px 0 #856bbb99;
    border-bottom: 2px solid #2b243a;
}

header.basket-head img {
    max-width: 52px;
    border-radius: 10px;
}

header.basket-head h1 {
    font-size: 21px;
}

header.basket-head h2 {
    font-size: 12px;
    margin-bottom: 2px;
    color: #ffffff;
}
.basket-end > a {
    width: 45px;
    height: 45px;
    background: #856bbb91;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #9a7dd7;
    border-radius: 8px;
}

.basket-end {
    margin-left: auto;
    margin-right: 30px;
}

.basket .basket-item .btn-primary {
    background: #fb153a !important;
    border-color: #ff5454 !important;
}

#ranks-content {
    padding-top: 0;
}

@keyframes rp-slide-down {
    from { transform: translateY(calc(-100% + 28px)); }
    to   { transform: translateY(0); }
}

#ranks-content.active #rank-progress {
    animation: rp-slide-down 0.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

#rank-progress {
    background: #3e3359;
    border: 3px solid rgb(108 87 152 / 45%);
    outline: 2px solid #2c253b;
    border-top: none;
    border-radius: 0 0 16px 16px;
    padding: 20px 30px 22px;
    margin-top: -28px;
    margin-bottom: 30px;
    margin-left: auto;
    margin-right: auto;
    max-width: 900px;
    box-shadow: 0 20px 40px -8px rgb(0 0 0 / 0.35);
    position: relative;
    z-index: 1;
}

.rp-bar {
    display: flex;
    height: 52px;
    border-radius: 10px;
    overflow: hidden;
    border: 2px solid #1a1527;
    outline: 2px solid #100d1a;
    box-shadow: inset 0 2px 8px rgb(0 0 0 / 0.5);
    position: relative;
    gap: 2px;
    background: #1a1527;
}

.rp-seg {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    text-align: center;
    text-shadow: 1px 2px 0 rgb(0 0 0 / 0.3);
}

.rp-seg h1 {
    font-size: 17px;
    line-height: 1;
}

.rp-seg span {
    font-size: 12px;
    font-family: 'Monocraft', sans-serif;
    opacity: 0.8;
    line-height: 1;
}

.rp-seg-1 { background: #0cc9f0; }
.rp-seg-2 { background: #0895ef; }
.rp-seg-3 { background: #f72585; }
.rp-seg-4 { background: #b5179e; }

.rp-status {
    font-size: 13px;
    font-family: 'Monocraft', sans-serif;
    color: #a899c8;
    text-align: center;
    margin-bottom: 12px;
    line-height: 1.6;
}

.rp-status strong {
    color: #e8deff;
}

.rp-link {
    color: #0cc9f0;
    text-decoration: none;
    border-bottom: 1px solid #0cc9f066;
    transition: border-color 0.15s ease;
}

.rp-link:hover {
    border-color: #0cc9f0;
}

.rp-error {
    font-size: 10px;
    font-family: 'Monocraft', sans-serif;
    color: #5a4f72;
    text-align: center;
    margin-top: 10px;
}

.rp-unfilled {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: var(--rp-fill, 0%);
    background: rgb(12 9 20 / 0.75);
    border-left: 2px solid rgb(255 255 255 / 0.12);
    pointer-events: none;
    transition: left 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

@media only screen and (max-width: 768px) {
    #rank-progress {
        margin-top: 0;
        margin-left: 0;
        margin-right: 0;
        max-width: none;
        border-top: 3px solid rgb(108 87 152 / 45%);
        border-radius: 12px;
        padding: 16px 20px 18px;
    }

    .rp-seg h1 {
        font-size: 12px;
    }

    .rp-seg span {
        font-size: 9px;
    }
}