body {
    margin: 0;
    line-height: 1.5;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.5;
    color: #000;
    text-align: left;
    background-color: #fff
}

a {
    text-decoration: none
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin-bottom: 0
}

p {
    margin-bottom: 0;
    margin-block-start: 0;
    margin-block-end: 0
}

label {
    margin-bottom: 0
}

ol,
ul,
dl {
    margin-bottom: 0
}

ul {
    margin-block-start: 0;
    margin-block-end: 0;
    list-style: none;
    margin-inline-start: 0;
    margin-inline-end: 0;
    padding-inline-start: 0
}

input,
button {
    padding: 0;
    margin: 0;
    outline: none;
    border: none;
    background: rgba(0, 0, 0, 0)
}

::-webkit-scrollbar {
    width: 4px;
    height: 4px;
    background-color: #020712
}

::-webkit-scrollbar-thumb {
    background-color: #168cff;
    background-size: 100% 300%;
    border-radius: 0px;
    -webkit-transition: .3s;
    transition: .3s
}

::-moz-selection {
    color: #fff;
    background: #168cff
}

::selection {
    color: #fff;
    background: #168cff
}

/*! normalize.css v2.1.3 | MIT License | git.io/normalize */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section,
summary {
    display: block
}

audio,
canvas,
video {
    display: inline-block
}

audio:not([controls]) {
    display: none;
    height: 0
}

[hidden],
template {
    display: none
}

html {
    font-family: sans-serif;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%
}

body {
    margin: 0
}

a {
    background: rgba(0, 0, 0, 0)
}

a:focus {
    outline: none
}

a:active,
a:hover {
    outline: 0
}

h1 {
    font-size: inherit;
    margin: 0
}

abbr[title] {
    border-bottom: 1px dotted
}

b,
strong {
    font-weight: bold
}

dfn {
    font-style: italic
}

hr {
    -moz-box-sizing: content-box;
    box-sizing: content-box;
    height: 0
}

code,
kbd,
pre,
samp {
    font-family: monospace, serif;
    font-size: 1em
}

pre {
    white-space: pre-wrap
}

q {
    quotes: "“" "”" "‘" "’"
}

small {
    font-size: inherit
}

sub,
sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline
}

sup {
    top: -0.5em
}

sub {
    bottom: -0.25em
}

img {
    border: 0
}

svg:not(:root) {
    overflow: hidden
}

figure {
    margin: 0
}

fieldset {
    border: 1px solid silver;
    margin: 0 2px;
    padding: .35em .625em .75em
}

legend {
    border: 0;
    padding: 0
}

button,
input,
select,
textarea {
    font-family: inherit;
    font-size: 100%;
    margin: 0
}

button,
input {
    line-height: normal
}

button,
select {
    text-transform: none
}

button,
html input[type=button],
input[type=reset],
input[type=submit] {
    -webkit-appearance: button;
    cursor: pointer
}

button[disabled],
html input[disabled] {
    cursor: default
}

input[type=checkbox],
input[type=radio] {
    box-sizing: border-box;
    padding: 0
}

input[type=search] {
    -webkit-appearance: textfield;
    -moz-box-sizing: content-box;
    -webkit-box-sizing: content-box;
    box-sizing: content-box
}

input[type=search]::-webkit-search-cancel-button,
input[type=search]::-webkit-search-decoration {
    -webkit-appearance: none
}

button::-moz-focus-inner,
input::-moz-focus-inner {
    border: 0;
    padding: 0
}

textarea {
    overflow: auto;
    vertical-align: top
}

table {
    border-collapse: collapse;
    border-spacing: 0
}

*:before,
*:after {
    pointer-events: none
}

@font-face {
    font-family: "aAbsoluteEmpire";
    src: url("../fonts/aAbsoluteEmpire.ttf") format("truetype");
    font-weight: normal;
    font-style: normal
}

html {
    overflow-x: clip
}

body {
    font-weight: 500 !important;
    color: #000;
    background-color: #020712;
    background-repeat: repeat;
    background-size: auto;
    font-family: "Open Sans", sans-serif;
    overflow-x: clip
}

.wrapper {
    max-width: 1920px;
    width: 100%;
    margin: 0 auto;
    position: relative
}

.pixarts-container {
    margin: 0 auto
}

.pixarts-container.relative {
    z-index: 1;
    position: relative
}

.pixarts-site-content {
    background-color: #f7f5f0;
    background-image: url("../img/content-bg.jpg");
    background-image: image-set(url("../img/content-bg.webp") type("image/webp"), url("../img/content-bg.jpg") type("image/jpeg"));
    background-repeat: no-repeat;
    background-position: center top;
    background-size: cover;
    position: relative
}

.pixarts-site-content .banner-character {
    z-index: 2;
    display: block;
    width: 747px;
    height: 600px;
    position: absolute;
    pointer-events: none;
    top: 0;
    left: 0
}

.pixarts-site-content .news-section-holder {
    position: relative;
    top: -150px;
    width: 100%;
    display: flex
}

.pixarts-site-content .news-section-holder .side-addon {
    position: absolute;
    right: 0;
    bottom: -120px;
    color: #999695;
    display: flex;
    align-items: center
}

.pixarts-site-content .news-section-holder .side-addon img {
    margin-right: 15px
}

.pixarts-site-content .news-section-holder .side-addon a {
    margin-left: 3px;
    color: #0e4e8f;
    font-weight: 600;
    transition: color .2s
}

.pixarts-site-content .news-section-holder .side-addon a:hover {
    color: #168cff;
    text-decoration: underline
}

.pixarts-header {
    background-image: url("../img/banner-teste.png");
    /*background-image: image-set(url("../img/header-bg.webp") type("image/webp"), url("../img/header-bg.jpg") type("image/jpeg"));*/
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center 28%;
    background-color: #050409;
    position: relative;
    overflow: hidden;
    min-width: 1280px;
    height: 600px
}

@media(min-width: 2200px) {
    .pixarts-header {
        background-position: center top
    }
}

@media(min-width: 769px) {
    .pixarts-header::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 280px;
        background: linear-gradient(180deg, transparent 0%, rgba(5, 4, 9, 0.65) 65%, rgba(5, 4, 9, 0.95) 100%);
        pointer-events: none;
        z-index: 1
    }
}

body.home-page .pixarts-header {
    background-image: none;
    background-color: #050409
}

body.home-page .pixarts-header::before {
    content: "";
    position: absolute;
    top: -120px;
    left: -120px;
    right: -120px;
    bottom: -120px;
    background-image: url("../img/banner-teste.png");
   /* background-image: image-set(url("../img/header-bg.webp") type("image/webp"), url("../img/header-bg.jpg") type("image/jpeg")); */
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center 28%;
    z-index: 0;
    will-change: transform;
    transform: translate3d(var(--hero-bg-mx, 0px), calc(var(--hero-bg-y, 0px) + var(--hero-bg-my, 0px)), 0);
    pointer-events: none
}

@media(min-width: 2200px) {
    body.home-page .pixarts-header::before {
        background-position: center top
    }
}

body.home-page .pixarts-header>.pixarts-container {
    position: relative;
    z-index: 1
}

.pixarts-header-contents .logo {
    position: relative;
    left: -45px;
    top: 70px;
    width: 659px;
    height: auto;
    transition: filter .2s;
    display: block;
    will-change: transform;
    transform: translate3d(var(--hero-logo-mx, 0px), calc(var(--hero-logo-y, 0px) + var(--hero-logo-my, 0px)), 0)
}

.pixarts-header-contents .logo:hover {
    filter: brightness(110%)
}

.pixarts-header-contents .logo img {
    width: 100%;
    height: auto;
    display: block;
    pointer-events: none
}

.pixarts-header-contents .elements-holder {
    margin-top: 80px;
    margin-left: 40px;
    display: flex
}

.pixarts-header-contents .elements-holder .header-button {
    height: 71px;
    width: 205px;
    background-image: url(../img/header-button.png);
    transition: .2s;
    display: flex;
    align-items: center;
    z-index: 1;
    justify-content: center
}

.pixarts-header-contents .elements-holder .header-button:hover {
    filter: brightness(115%)
}

.pixarts-header-contents .elements-holder .header-button span {
    position: relative;
    top: -4px;
    font-size: 15px;
    color: #33211d;
    font-weight: bold;
    text-transform: uppercase;
    text-shadow: .454px .891px 1px #fceca0
}

.pixarts-header-contents .elements-holder .os_info {
    margin-left: 40px;
    display: flex;
    position: relative;
    align-content: center;
    transform: translateY(-2px)
}

.pixarts-header-contents .elements-holder .os_info .os_selection {
    display: flex;
    align-items: center
}

.pixarts-header-contents .elements-holder .os_info .os_selection:not(:last-child) {
    padding-right: 25px;
    margin-right: 25px
}

.pixarts-header-contents .elements-holder .os_info .os_selection:not(:last-child)::after {
    top: 0;
    content: "";
    height: 10px;
    background-color: #482920;
    position: absolute;
    right: 0;
    width: 1px;
    top: 50%;
    box-shadow: 1px 0px #000;
    transform: translateY(-50%)
}

.pixarts-header-contents .elements-holder .os_info .os_selection {
    opacity: .65
}

.pixarts-header-contents .elements-holder .os_info .os_selection.active {
    opacity: 1
}

.pixarts-header-contents .elements-holder .os_info .os_selection {
    color: #ddf5ff;
    font-weight: bold;
    position: relative
}

.pixarts-header-contents .elements-holder .os_info .os_selection img {
    position: absolute;
    left: -7px;
    top: 50%;
    transform: translateY(-50%)
}

.pixarts-header-contents .elements-holder .os_info .os_selection span {
    margin-left: 27px
}

.pixarts-nav {
    height: 70px;
    width: 1280px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0 auto
}

.pixarts-nav .logo-head {
    width: 200px;
    min-width: 200px;
    height: 120px
}

.pixarts-nav .logo-head:hover img {
    filter: brightness(125%)
}

.pixarts-nav .logo-head img {
    position: absolute;
    transition: .2s;
    pointer-events: none;
    width: 90px;
    top: 20px;
    left:20px
}

.pixarts-nav .nav-button {
    height: 54px;
    width: 156px;
    background-image: url(../img/nav-button.png);
    min-width: 156px;
    display: flex;
    align-items: center;
    z-index: 1;
    justify-content: center;
    transition: .2s
}

.pixarts-nav .nav-button:hover {
    filter: brightness(115%)
}

.pixarts-nav .nav-button span {
    position: relative;
    top: -3px;
    font-size: 14px;
    color: #33211d;
    font-weight: bold;
    text-transform: uppercase;
    text-shadow: .454px .891px 1px #fceca0
}

.pixarts-nav .l-menu {
    min-width: 480px;
    width: 480px
}

.pixarts-nav .r-menu {
    width: 320px;
    min-width: 320px
}

.pixarts-nav .nav-auth {
    width: 280px;
    min-width: 280px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 16px
}

.pixarts-nav .nav-login {
    color: #ddf5ff;
    font-size: 14px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: .03em;
    white-space: nowrap;
    transition: color .2s, text-shadow .2s
}

.pixarts-nav .nav-login:hover {
    color: #7ccbff;
    text-shadow: 0 0 12px rgba(22, 140, 255, .55)
}

.pixarts-nav .l-menu,
.pixarts-nav .r-menu {
    font-weight: bold;
    position: relative;
    display: flex;
    justify-content: center;
    margin: 0 auto
}

.pixarts-nav .l-menu a,
.pixarts-nav .r-menu a {
    margin: 0px 30px;
    position: relative;
    color: #ddf5ff;
    height: 100%
}

.pixarts-nav .l-menu a.active:after,
.pixarts-nav .r-menu a.active:after {
    opacity: 1
}

.pixarts-nav .l-menu a:after,
.pixarts-nav .r-menu a:after {
    background-image: url(../img/nav-hover.png);
    background-size: cover;
    background-repeat: no-repeat;
    height: 51px;
    width: calc(100% + 60px);
    position: absolute;
    left: -30px;
    top: -24px;
    opacity: 0;
    content: ""
}

.pixarts-nav .l-menu a img,
.pixarts-nav .r-menu a img {
    transition: .2s;
    position: absolute;
    left: -27px;
    top: -29px;
    height: 75px;
    width: 75px
}

.pixarts-nav .l-menu a span,
.pixarts-nav .r-menu a span {
    margin-left: 35px;
    font-size: 14px
}

.pixarts-nav .l-menu a:not(:hover) img,
.pixarts-nav .r-menu a:not(:hover) img {
    filter: saturate(50%)
}

.pixarts-nav .l-menu a:hover,
.pixarts-nav .r-menu a:hover {
    text-decoration: underline
}

.pixarts-nav:before {
    background-image: url("../img/nav-bg.png");
    background-image: image-set(url("../img/nav-bg.webp") type("image/webp"), url("../img/nav-bg.png") type("image/png"));
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    height: 92px;
    width: 1920px;
    content: "";
    display: block;
    top: 0;
    background-repeat: no-repeat;
    background-size: auto;
    pointer-events: none
}

.mobile-nav-toggle {
    display: none;
    position: fixed;
    top: 18px;
    right: 18px;
    width: 44px;
    height: 44px;
    z-index: 9001;
    background: rgba(6, 22, 46, .9);
    border: 1px solid #0e4e8f;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 5px;
    border-radius: 4px;
    box-shadow: 0 0 12px rgba(22, 140, 255, .18);
    transition: .2s
}

.mobile-nav-toggle span {
    display: block;
    width: 22px;
    height: 2px;
    background-color: #7ccbff;
    transition: transform .25s ease, opacity .2s ease, background .2s ease;
    transform-origin: center
}

.mobile-nav-toggle:hover {
    border-color: #168cff;
    box-shadow: 0 0 16px rgba(22, 140, 255, .4)
}

.mobile-nav-toggle:hover span {
    background-color: #ddf5ff
}

body.nav-open .mobile-nav-toggle {
    border-color: #168cff;
    background: rgba(6, 22, 46, .95)
}

body.nav-open .mobile-nav-toggle span:nth-child(1) {
    transform: translateY(7px) rotate(45deg)
}

body.nav-open .mobile-nav-toggle span:nth-child(2) {
    opacity: 0
}

body.nav-open .mobile-nav-toggle span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg)
}

.mobile-header-logo {
    display: none;
    position: fixed;
    top: 18px;
    left: 18px;
    width: 44px;
    height: 44px;
    z-index: 9001
}

.mobile-header-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain
}

.footer {
    position: relative;
}

.footer:after {
    background-image: url("../img/footer-bg.png");
    background-image: url("../img/footer-bg.png") type("image/png");
    background-size: cover;
    background-position: center;
    width: 100%;
    height: 500px;
    content: "";
    z-index: 0;
    position: absolute;
    bottom: 0;
    left: 0
}

.footer .footer-mobile-cta {
    display: none
}

.footer .banner-section {
    justify-content: space-between;
    display: flex
}

.footer .banner-section .small-banner,
.footer .banner-section .big-banner {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    transition: .2s
}

.footer .banner-section .small-banner:hover,
.footer .banner-section .big-banner:hover {
    filter: brightness(105%);
    transform: translateY(-2px)
}

.footer .banner-section .small-banner .b-title,
.footer .banner-section .small-banner .b-desc,
.footer .banner-section .big-banner .b-title,
.footer .banner-section .big-banner .b-desc {
    padding-left: 160px;
    padding-right: 40px
}

.footer .banner-section .small-banner .b-desc,
.footer .banner-section .big-banner .b-desc {
    font-size: 13px;
    color: #463d3a;
    font-weight: 400
}

.footer .banner-section .small-banner .b-desc span,
.footer .banner-section .big-banner .b-desc span {
    color: #d0a578
}

.footer .banner-section .small-banner .b-desc b,
.footer .banner-section .big-banner .b-desc b {
    font-weight: 700;
    color: #463d3a
}

.footer .banner-section .small-banner .b-title,
.footer .banner-section .big-banner .b-title {
    font-size: 24px;
    font-weight: 400;
    font-family: "aAbsoluteEmpire";
    text-shadow: 0px 1px 0px #fff;
    color: #463d3a
}

.footer .banner-section .small-banner .b-title.gold,
.footer .banner-section .big-banner .b-title.gold {
    color: #d0a578
}

.footer .banner-section .small-banner {
    display: flex;
    height: 140px;
    width: 404px;
    background-image: url(../img/banner-small.png);
    background-size: cover;
    background-repeat: no-repeat
}

.footer .banner-section .big-banner {
    width: 846px;
    height: 140px;
    display: flex;
    background-image: url("../img/banner-big.png") no-repeat;
    background-image: image-set(url("../img/banner-big.webp") type("image/webp"), url("../img/banner-big.png") type("image/png"));
    background-size: cover;
    background-repeat: no-repeat
}

.footer .links-sections {
    margin-top: 40px;
    margin-bottom: 30px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center
}

.footer .links-sections a {
    padding: 15px 45px;
    color: #ddf5ff;
    display: block;
    font-weight: bold;
    text-transform: uppercase;
    transition: color .2s, text-shadow .2s
}

.footer .links-sections a.active {
    color: #fff;
    text-shadow: 0 0 12px rgba(124, 203, 255, .5)
}

.footer .links-sections a:hover {
    color: #7ccbff;
    text-shadow: 0 0 12px rgba(22, 140, 255, .45);
    text-decoration: underline
}

.footer .logotype-separator {
    display: flex;
    align-items: center;
    width: 100%;
    justify-content: center
}

.footer .logotype-separator img {
    display: block
}

.footer .logotype-separator .logotype {
    display: block;
    margin-left: 30px;
    margin-right: 30px;
 
}

.footer .bottom-footer {
    margin-top: 55px;
    display: flex;
    justify-content: space-between;
    height: 65px;
    align-items: center;
    justify-content: space-between
}

.footer .bottom-footer:before {
    background-image: url("../img/small-footer-bg.png");
    background-image: image-set(url("../img/small-footer-bg.webp") type("image/webp"), url("../img/small-footer-bg.png") type("image/png"));
    background-repeat: no-repeat;
    background-size: auto;
    content: "";
    z-index: 0;
    bottom: 0;
    width: 1920px;
    height: 81px;
    position: absolute;
    left: -320px
}

.footer .bottom-footer .info {
    padding: 25px 0;
    font-size: 13px;
    color: #748094;
    z-index: 1;
    position: relative
}

.footer .bottom-footer .info img {
    position: relative;
    top: 6px;
    margin-left: 6px
}

.footer .bottom-footer .info span {
    color: #7ccbff
}

.footer .bottom-footer .info a {
    color: #fff;
    transition: color .2s
}

.footer .bottom-footer .info a:hover {
    color: #7ccbff
}

.modal_holder {
    background-color: rgba(2, 7, 18, .65);
    width: 100%;
    height: 100%;
    display: flex;
    z-index: 2;
    position: fixed;
    backdrop-filter: blur(5px);
    opacity: 0;
    transition: .2s;
    justify-content: center;
    align-items: center;
    pointer-events: none
}

.modal_holder.active {
    opacity: 1;
    pointer-events: unset
}

.modal_holder .auth_modal {
    width: 508px;
    height: fit-content
}

.modal_holder .auth_modal .wt {
    display: none
}

.modal_holder .auth_modal .wt.active {
    display: block
}

.modal_holder .auth_modal:after {
    background-image: url(../img/modal-bg-ornament.png) !important;
    width: 495px;
    left: 6px;
    height: 280px
}

.modal_holder .auth_modal .auth_content {
    display: flex;
    flex-wrap: wrap;
    padding-left: 30px;
    padding-right: 30px;
    justify-content: space-between;
    display: none
}

.modal_holder .auth_modal .auth_content.active {
    display: flex
}

.modal_holder .auth_modal .auth_content .addons {
    display: flex;
    justify-content: space-between;
    width: 100%;
    margin-bottom: 30px
}

.modal_holder .auth_modal .auth_content .addons .option {
    font-size: 13px
}

.modal_holder .auth_modal .auth_content .addons .option a {
    font-weight: 600;
    color: #0e4e8f;
    transition: color .2s
}

.modal_holder .auth_modal .auth_content .addons .option a:hover {
    color: #168cff;
    text-decoration: underline
}

.modal_holder .auth_modal .auth_content .form_field {
    margin-top: 25px
}

.modal_holder .auth_modal .auth_content .form_field>span {
    color: #463d3a;
    font-weight: bold;
    font-size: 11px;
    text-transform: uppercase
}

.modal_holder .auth_modal .auth_content .form_field {
    width: 100%
}

.modal_holder .auth_modal .auth_content .form_field.half {
    max-width: calc(50% - 15px);
    position: relative
}

.modal_holder .auth_modal .auth_content .form_field .input_holder {
    background-image: url(../img/input-bg.png);
    height: 44px;
    position: relative
}

.modal_holder .auth_modal .auth_content .form_field .input_holder .icon {
    position: absolute;
    width: 53px;
    height: 44px;
    display: flex;
    justify-content: center;
    align-items: center
}

.modal_holder .auth_modal .auth_content .form_field .input_holder .icon:after {
    position: absolute;
    content: "";
    width: 1px;
    background-color: #1e1411;
    height: 10px;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    border-right: 1px solid #483d3a
}

.modal_holder .auth_modal .auth_content .form_field .input_holder input {
    width: calc(100% - 75px - 25px);
    padding-left: 75px;
    padding-right: 25px;
    height: 44px;
    font-size: 13px;
    color: #fff;
    transition: .2s
}

.modal_holder .auth_modal .auth_content .form_field .input_holder input:focus {
    outline: 1px solid rgba(22, 140, 255, .6)
}

.modal_holder .auth_modal .auth_content .form_field .input_holder ::placeholder {
    color: #ededed
}

.modal_holder .auth_modal .auth_content .w-sep-1 {
    margin-top: 25px;
    margin-bottom: 25px;
    width: 100%;
    object-fit: contain
}

.modal_holder .auth_modal .auth_content .checkbox {
    margin-bottom: 15px;
    width: 100%;
    display: flex;
    align-items: center;
    cursor: pointer;
    justify-content: center
}

.modal_holder .auth_modal .auth_content .checkbox input {
    display: none
}

.modal_holder .auth_modal .auth_content .checkbox input:checked+span:after {
    opacity: 1
}

.modal_holder .auth_modal .auth_content .checkbox span {
    position: relative
}

.modal_holder .auth_modal .auth_content .checkbox span:before,
.modal_holder .auth_modal .auth_content .checkbox span:after {
    content: "";
    position: absolute;
    transition: .2s;
    display: block
}

.modal_holder .auth_modal .auth_content .checkbox span:before {
    cursor: pointer;
    left: 0;
    top: 4px;
    background-color: #06162e;
    width: 20px;
    display: block;
    height: 20px
}

.modal_holder .auth_modal .auth_content .checkbox span:after {
    opacity: 0;
    left: 3px;
    top: 8px;
    pointer-events: none;
    background-image: url(../img/check-icon.png);
    width: 14px;
    height: 12px
}

.modal_holder .auth_modal .auth_content .checkbox span {
    padding-left: 35px;
    font-size: 13px;
    color: #281b17;
    display: block
}

.modal_holder .auth_modal .auth_content .checkbox span a {
    font-weight: 600;
    color: #0e4e8f;
    transition: color .2s
}

.modal_holder .auth_modal .auth_content .checkbox span a:hover {
    color: #168cff;
    text-decoration: underline
}

.modal_holder .auth_modal .auth_content .submit-button {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%
}

.modal_holder .auth_modal .auth_content .submit-button img {
    display: block;
    width: 156px;
    height: 12px;
    pointer-events: none
}

.modal_holder .auth_modal .auth_content .submit-button .submit {
    margin: 0 28px;
    width: 133px;
    min-width: 133px;
    height: 46px;
    background-image: url(../img/rank-button.png);
    transition: .2s;
    display: flex;
    align-items: center;
    z-index: 1;
    justify-content: center
}

.modal_holder .auth_modal .auth_content .submit-button .submit:hover {
    filter: brightness(115%)
}

.modal_holder .auth_modal .auth_content .submit-button .submit span {
    position: relative;
    top: -4px;
    font-size: 14px;
    color: #33211d;
    font-weight: bold;
    text-transform: uppercase;
    text-shadow: .454px .891px 1px #fceca0
}

.widget {
    background-image: url("../img/news-bg.jpg");
    background-image: image-set(url("../img/news-bg.webp") type("image/webp"), url("../img/news-bg.jpg") type("image/jpeg"));
    background-repeat: no-repeat;
    background-size: cover;
    box-shadow: -5px 0px 15px rgba(52, 19, 19, .05);
    width: 647px;
    position: relative
}

.widget:after {
    background-image: url(../img/widget-bottom-ornament.png);
    width: 632px;
    height: 280px;
    position: absolute;
    bottom: 10px;
    content: "";
    left: 12px;
    background-repeat: no-repeat
}

.widget .widget-head {
    margin: 0px 30px;
    height: 64px;
    color: #463d3a;
    position: relative;
    display: flex;
    justify-content: space-between
}

.widget .widget-head .w-sep-1 {
    position: absolute;
    bottom: 0px;
    left: 0;
    width: 100%;
    object-fit: contain
}

.widget .widget-head .w-title {
    display: flex;
    align-items: center
}

.widget .widget-head .w-title .w-arrow {
    margin-right: 15px
}

.widget .widget-head .w-title .wt {
    font-size: 14px;
    font-weight: bold;
    text-transform: uppercase
}

.widget .widget-head .w-title .w-h-link {
    position: relative;
    margin-left: 30px;
    padding-left: 30px
}

.widget .widget-head .w-title .w-h-link:after {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    background-color: #b4b4b4;
    width: 1px;
    height: 10px;
    content: ""
}

.widget .widget-head .w-title .w-h-link {
    font-weight: bold;
    font-size: 11px;
    text-transform: uppercase;
    color: #463d3a;
    opacity: .7;
    transition: .1s
}

.widget .widget-head .w-title .w-h-link:hover {
    opacity: 1
}

.widget .widget-head .w-title .w-h-link span {
    margin-right: 2px;
    font-size: 14px
}

.widget .widget-head .w-nav {
    height: 100%;
    margin-left: auto;
    display: flex
}

.widget .widget-head .w-nav .nav-item {
    cursor: pointer;
    display: flex;
    color: #251e1c;
    align-items: center;
    font-size: 13px;
    font-weight: bold;
    position: relative;
    padding: 0 15px
}

.widget .widget-head .w-nav .nav-item span {
    opacity: .7
}

.widget .widget-head .w-nav .nav-item:hover span {
    opacity: 1
}

.widget .widget-head .w-nav .nav-item.active span {
    opacity: 1
}

.widget .widget-head .w-nav .nav-item.active:after {
    opacity: 1
}

.widget .widget-head .w-nav .nav-item:after {
    background-image: url(../img/widget-nav-active.png);
    background-repeat: no-repeat;
    background-size: auto;
    width: 158px;
    height: 68px;
    content: "";
    position: absolute;
    bottom: 0px;
    left: 50%;
    transform: translateX(-50%);
    transition: .2s;
    opacity: 0
}

.widget .media {
    padding-left: 30px;
    padding-right: 30px;
    padding-bottom: 30px;
    display: flex;
    align-items: center;
    justify-content: space-between
}

.widget .media a {
    transition: .2s
}

.widget .media a:hover {
    filter: brightness(110%);
    transform: translateY(-2px)
}

.widget .media a img {
    outline: 1px solid #1f1311;
    border: 1px solid #f7d58a
}

.newsbox {
    position: relative;
    top: 80px;
    margin-left: auto
}

.newsbox .news-item {
    padding: 25px 30px
}

.newsbox .news-item .ni-opener {
    display: flex;
    align-items: center
}

.newsbox .news-item .ni-opener .avatar {
    margin-right: 15px;
    outline: 1px solid #1f1311;
    border: 1px solid #f7d58a;
    height: 53px;
    width: 61px;
    position: relative
}

.newsbox .news-item .ni-opener .avatar:after {
    height: 75px;
    width: 75px;
    position: absolute;
    left: 0;
    top: 0;
    content: "";
    background-image: url(../img/nav-icon-1.png);
    transform: translate(-33px, -31px)
}

.newsbox .news-item .ni-opener .ni .ni-title {
    margin-bottom: 4px;
    font-size: 14px;
    color: #463d3a
}

.newsbox .news-item .ni-opener .ni .ni-title span {
    font-weight: bold;
    color: #0e4e8f
}

.newsbox .news-item .ni-opener .ni .ni-title {
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 475px
}

.newsbox .news-item .ni-opener .ni .ni-details {
    font-size: 13px;
    color: #999695;
    font-weight: 600
}

.newsbox .news-item .ni-opener .ni .ni-details span {
    color: #463d3a
}

.newsbox .news-item .ni-opener .ni .ni-details b {
    font-weight: 700;
    color: #0e4e8f
}

.newsbox .news-item .ni-contents {
    margin-top: 10px;
    line-height: 22px;
    color: rgba(70, 61, 58, .85);
    position: relative;
    display: block
}

.newsbox .news-item .ni-contents a {
    color: #0e4e8f;
    font-weight: 600;
    transition: color .2s
}

.newsbox .news-item .ni-contents a:hover {
    color: #168cff;
    text-decoration: underline
}

.newsbox .news-item .ni-contents {
    padding-bottom: 20px
}

.newsbox .news-item .ni-contents:after {
    width: 100%;
    height: 2px;
    background-image: url(../img/w-sep-1.png);
    content: "";
    position: absolute;
    bottom: 0;
    background-size: auto;
    left: 0
}

.widget.ranking:after {
    background-image: url(../img/r-widget-bottom-ornament.png);
    width: 607px;
    height: 280px;
    background-size: contain;
    background-repeat: no-repeat;
    left: 9px
}

.widget.ranking .ranking-contents .show-more {
    padding-bottom: 10px;
    height: 97px;
    display: flex;
    align-items: center;
    justify-content: center
}

.widget.ranking .ranking-contents .show-more img {
    width: 231px;
    height: 18px;
    pointer-events: none
}

.widget.ranking .ranking-contents .show-more .rank-button {
    margin: 0 28px;
    width: 133px;
    min-width: 133px;
    height: 46px;
    background-image: url(../img/rank-button.png);
    transition: .2s;
    display: flex;
    align-items: center;
    z-index: 1;
    justify-content: center
}

.widget.ranking .ranking-contents .show-more .rank-button:hover {
    filter: brightness(115%)
}

.widget.ranking .ranking-contents .show-more .rank-button span {
    position: relative;
    top: -4px;
    font-size: 14px;
    color: #33211d;
    font-weight: bold;
    text-transform: uppercase;
    text-shadow: .454px .891px 1px #fceca0
}

.widget.ranking .ranking-contents .order {
    min-width: 8%
}

.widget.ranking .ranking-contents .player {
    min-width: 30%
}

.widget.ranking .ranking-contents .leader {
    min-width: 30%
}

.widget.ranking .ranking-contents .guild {
    min-width: 25%
}

.widget.ranking .ranking-contents .kingdom {
    min-width: 20%
}

.widget.ranking .ranking-contents .level {
    min-width: 17%;
    text-align: right
}

.widget.ranking .ranking-contents .thead {
    padding-left: 30px;
    padding-right: 30px;
    display: flex;
    color: #7b7670;
    font-weight: 400;
    font-size: 13px;
    height: 52px;
    align-items: center
}

.widget.ranking .ranking-contents .tfield {
    height: 40px;
    display: flex;
    padding-left: 30px;
    padding-right: 30px;
    position: relative;
    align-items: center
}

.widget.ranking .ranking-contents .tfield>* {
    position: relative;
    transition: .2s
}

.widget.ranking .ranking-contents .tfield:hover:before {
    opacity: 1 !important
}

.widget.ranking .ranking-contents .tfield:hover .order,
.widget.ranking .ranking-contents .tfield:hover .player {
    color: #f0f0f0 !important
}

.widget.ranking .ranking-contents .tfield:hover .guild {
    color: #ccc0b2 !important
}

.widget.ranking .ranking-contents .tfield:hover .level {
    color: #ccc0b2
}

.widget.ranking .ranking-contents .tfield .order {
    z-index: 1;
    color: rgba(40, 27, 23, .7)
}

.widget.ranking .ranking-contents .tfield .player {
    color: #463d3a;
    font-weight: 600
}

.widget.ranking .ranking-contents .tfield .guild {
    color: #69625a;
    font-weight: 600
}

.widget.ranking .ranking-contents .tfield .kingdom {
    font-weight: 600
}

.widget.ranking .ranking-contents .tfield .kingdom.red {
    color: #ff5f5b;
    text-shadow: 0px 0px 10px rgba(232, 46, 72, .5)
}

.widget.ranking .ranking-contents .tfield .kingdom.blue {
    color: #69baff;
    text-shadow: 0px 0px 10px rgba(105, 186, 255, .5)
}

.widget.ranking .ranking-contents .tfield .kingdom.gold {
    color: #f2cc7b;
    text-shadow: 0px 0px 10px rgba(242, 204, 123, .5)
}

.widget.ranking .ranking-contents .tfield .level {
    color: #463d3a;
    font-weight: 600
}

.widget.ranking .ranking-contents .tfield .level span {
    color: #0e4e8f;
    font-weight: 700
}

.widget.ranking .ranking-contents .tfield .level .red {
    color: #ff5f5b
}

.widget.ranking .ranking-contents .tfield:nth-child(odd):before {
    opacity: 0
}

.widget.ranking .ranking-contents .tfield:before {
    opacity: .07;
    position: absolute;
    transition: .2s;
    content: "";
    left: 0;
    z-index: 0;
    top: 0;
    background-image: url(../img/rank-hover.png);
    background-size: cover;
    background-repeat: no-repeat;
    height: 100%;
    width: 100%
}

.rank-section-holder {
    display: flex;
    justify-content: space-between;
    width: 100%;
    padding-bottom: 360px
}

.rank-section-holder .widget.ranking {
    width: calc(50% - 15px)
}

.widget.ranking.ranking--full {
    width: 100%;
    max-width: 647px;
    margin: 0 auto 50px
}

.side-buttons {
    position: relative;
    top: 80px;
    width: 156px;
    min-width: 156px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background-image: url("../img/news-bg.jpg");
    background-image: image-set(url("../img/news-bg.webp") type("image/webp"), url("../img/news-bg.jpg") type("image/jpeg"));
    background-repeat: no-repeat;
    background-size: cover
}

.side-buttons a {
    height: 140px;
    position: relative;
    width: 100%;
    display: block;
    box-shadow: 1px 0px 13px rgba(52, 19, 19, .1);
    transition: .2s
}

.side-buttons a:hover {
    box-shadow: 1px 0px 25px rgba(52, 19, 19, .2);
    filter: contrast(115%) brightness(95%)
}

.side-buttons a img {
    position: absolute;
    left: 0;
    top: 0
}

.separate-sections {
    padding-top: 10px;
    margin-top: 60px;
    margin-bottom: 60px;
    display: flex;
    align-items: center;
    width: 100%;
    justify-content: center
}

.separate-sections strong {
    opacity: .9;
    font-family: "aAbsoluteEmpire";
    font-size: 16px;
    font-weight: 400;
    color: #4a423f;
    padding-left: 30px;
    padding-right: 30px;
    display: block;
    white-space: nowrap
}
.separate-sections h2 {
    opacity: .9;
    font-family: "aAbsoluteEmpire";
    font-size: 24px;
    font-weight: 600;
    color: #f7d695;
    padding-left: 30px;
    padding-right: 30px;
    display: block;
    white-space: nowrap
}

.shop-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    padding: 25px 30px 50px
}

.shop-grid .shop-item {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.6) 0%, rgba(230, 216, 192, 0.4) 100%);
    border: 1px solid #d8b888;
    outline: 1px solid #1f1311;
    padding: 12px 12px 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    transition: .2s
}

.shop-grid .shop-item:hover {
    transform: translateY(-3px);
    filter: brightness(105%)
}

.shop-grid .shop-item .shop-item-img {
    width: 100%;
    aspect-ratio: 1/1;
    overflow: hidden;
    outline: 1px solid #1f1311;
    border: 1px solid #f7d58a;
    margin-bottom: 12px
}

.shop-grid .shop-item .shop-item-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block
}

.shop-grid .shop-item .shop-item-info {
    width: 100%;
    margin-bottom: 12px
}

.shop-grid .shop-item .shop-item-info .shop-item-name {
    font-size: 14px;
    font-weight: 700;
    color: #463d3a;
    margin-bottom: 4px;
    min-height: 38px
}

.shop-grid .shop-item .shop-item-info .shop-item-desc {
    font-size: 11px;
    color: #7b6e63;
    margin-bottom: 8px;
    line-height: 1.3
}

.shop-grid .shop-item .shop-item-info .shop-item-price {
    font-size: 16px;
    font-weight: 700;
    color: #0e4e8f
}

.shop-grid .shop-item .shop-item-info .shop-item-price span {
    font-size: 11px;
    color: #7b6e63
}

.shop-grid .shop-item .shop-buy {
    width: 110px;
    height: 38px;
    background-image: url(../img/rank-button.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: .2s
}

.shop-grid .shop-item .shop-buy:hover {
    filter: brightness(115%)
}

.shop-grid .shop-item .shop-buy span {
    position: relative;
    top: -3px;
    font-size: 12px;
    color: #33211d;
    font-weight: 700;
    text-shadow: .454px .891px 1px #fceca0
}

.download-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 25px;
    max-width: 1280px;
    position: relative;
    height: 300px;
    margin: 0 auto 50px
}

.download-grid .download-card {
    background-image: url("../img/news-bg.jpg");
    background-image: image-set(url("../img/news-bg.webp") type("image/webp"), url("../img/news-bg.jpg") type("image/jpeg"));
    background-size: cover;
    outline: 1px solid #1f1311;
    border: 1px solid #d8b888;
    padding: 35px 25px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: .2s;
    margin: 30px 0
}

.download-grid .download-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(52, 19, 19, .25)
}

.download-grid .download-card .download-card-icon {
    width: 70px;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px
}

.download-grid .download-card .download-card-icon img {
    max-width: 100%;
    max-height: 100%
}

.download-grid .download-card .download-card-os {
    font-family: "aAbsoluteEmpire";
    font-size: 26px;
    color: #463d3a;
    text-shadow: 0px 1px 0px hsla(0, 0%, 100%, .8);
    margin-bottom: 4px
}

.download-grid .download-card .download-card-version {
    font-size: 12px;
    color: #d0a578;
    font-weight: 600;
    margin-bottom: 10px
}

.download-grid .download-card .download-card-desc {
    font-size: 13px;
    color: #7b6e63;
    margin-bottom: 22px
}

.download-grid .download-card .download-card-btn {
    margin-bottom: 16px
}

.download-grid .download-card .download-card-mirrors {
    font-size: 11px;
    color: #999695
}

.download-grid .download-card .download-card-mirrors a {
    color: #d0a578
}

.download-grid .download-card .download-card-mirrors a:hover {
    text-decoration: underline
}

.coming-soon-card {
    position: relative;
    max-width: 880px;
    margin: 0 auto 320px;
    padding: 70px 60px 60px;
    text-align: center;
    background-color: #1a0e08;
    background-image: url("../img/news-bg.jpg");
    background-image: image-set(url("../img/news-bg.webp") type("image/webp"), url("../img/news-bg.jpg") type("image/jpeg"));
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    outline: 1px solid #1f1311;
    border: 1px solid #d8b888;
    box-shadow: 0 24px 60px rgba(52, 19, 19, .32)
}

.coming-soon-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 0%, rgba(214, 173, 109, 0.22), transparent 65%), linear-gradient(180deg, rgba(0, 0, 0, 0.42), rgba(0, 0, 0, 0.62));
    pointer-events: none;
    z-index: 0
}

.coming-soon-card>* {
    position: relative;
    z-index: 1
}

.coming-soon-card .cs-logo {
    margin-bottom: 18px
}

.coming-soon-card .cs-logo img {
    width: 130px;
    height: auto;
    filter: drop-shadow(0 8px 22px rgba(0, 0, 0, 0.55))
}

.coming-soon-card .cs-badge {
    display: inline-block;
    padding: 6px 16px;
    margin-bottom: 18px;
    background: linear-gradient(180deg, #f7d695, #d6ad6d 60%, #b87a32);
    color: #1a0e08;
    font-family: "Cinzel", serif;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 3px;
    text-transform: uppercase;
    box-shadow: 0 6px 18px rgba(214, 173, 109, .34)
}

.coming-soon-card .cs-title {
    margin: 0 0 18px;
    font-family: "Cinzel", serif;
    font-size: 36px;
    font-weight: 700;
    letter-spacing: -0.5px;
    color: #f7d695;
    text-shadow: 0 4px 18px rgba(214, 173, 109, .45)
}

.coming-soon-card .cs-desc {
    margin: 0 auto 30px;
    max-width: 600px;
    color: #d8c4ad;
    font-size: 15px;
    line-height: 1.65
}

.coming-soon-card .cs-actions {
    display: inline-flex;
    align-items: center;
    gap: 24px;
    margin-bottom: 40px;
    flex-wrap: wrap;
    justify-content: center
}

.coming-soon-card .cs-actions .cdc-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 270px;
    height: 84px;
    background-image: url(../img/header-button.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    margin: 0;
    transition: .2s
}

.coming-soon-card .cs-actions .cdc-button:hover {
    filter: brightness(115%);
    transform: translateY(-1px)
}

.coming-soon-card .cs-actions .cdc-button span {
    position: relative;
    top: -4px;
    font-size: 16px;
    font-weight: bold;
    color: #33211d;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    text-shadow: .454px .891px 1px #fceca0
}

.coming-soon-card .cs-actions .cs-secondary {
    color: #d8c4ad;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .4px;
    border-bottom: 1px solid rgba(0, 0, 0, 0);
    transition: color .15s ease, border-color .15s ease
}

.coming-soon-card .cs-actions .cs-secondary:hover {
    color: #f7d695;
    border-bottom-color: rgba(247, 214, 149, .5)
}

.coming-soon-card .cs-features {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    padding-top: 32px;
    border-top: 1px solid rgba(214, 173, 109, .22)
}

.coming-soon-card .cs-features .cs-feature {
    padding: 18px 12px;
    background: rgba(0, 0, 0, .32);
    border: 1px solid rgba(214, 173, 109, .18);
    border-radius: 8px;
    text-align: center;
    transition: border-color .15s ease, transform .15s ease
}

.coming-soon-card .cs-features .cs-feature:hover {
    border-color: rgba(214, 173, 109, .42);
    transform: translateY(-2px)
}

.coming-soon-card .cs-features .cs-feature .cs-feature-icon {
    font-size: 28px;
    margin-bottom: 8px;
    line-height: 1
}

.coming-soon-card .cs-features .cs-feature strong {
    display: block;
    margin-bottom: 4px;
    color: #f7d695;
    font-size: 13.5px;
    font-weight: 700;
    letter-spacing: .3px
}

.coming-soon-card .cs-features .cs-feature span {
    display: block;
    color: #b8a890;
    font-size: 12px;
    line-height: 1.45
}

@media(max-width: 720px) {
    .coming-soon-card {
        padding: 50px 24px 40px
    }

    .coming-soon-card .cs-title {
        font-size: 26px
    }

    .coming-soon-card .cs-desc {
        font-size: 14px
    }

    .coming-soon-card .cs-features {
        grid-template-columns: 1fr;
        gap: 12px;
        padding-top: 24px
    }

    .coming-soon-card .cs-actions {
        gap: 16px
    }
}

.faq-list {
    padding: 15px 30px 40px
}

.faq-list .faq-item {
    border-bottom: 1px solid rgba(123, 110, 99, .2);
    padding: 14px 0
}

.faq-list .faq-item .faq-q {
    cursor: pointer;
    font-weight: 700;
    color: #463d3a;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 12px;
    transition: .2s
}

.faq-list .faq-item .faq-q .faq-arrow {
    display: inline-block;
    width: 22px;
    height: 22px;
    background-color: #06162e;
    color: #7ccbff;
    font-weight: 700;
    font-size: 16px;
    text-align: center;
    line-height: 22px;
    transition: .2s;
    flex-shrink: 0;
    box-shadow: 0 0 0 1px rgba(22, 140, 255, .15)
}

.faq-list .faq-item .faq-q:hover {
    color: #0e4e8f
}

.faq-list .faq-item .faq-q:hover .faq-arrow {
    background-color: #0a2a55;
    box-shadow: 0 0 0 1px rgba(22, 140, 255, .4)
}

.faq-list .faq-item .faq-a {
    max-height: 0;
    overflow: hidden;
    transition: max-height .3s ease, padding .3s ease;
    color: rgba(70, 61, 58, .85);
    font-size: 13px;
    line-height: 22px;
    padding: 0 0 0 34px
}

.faq-list .faq-item .faq-a a {
    color: #0e4e8f;
    font-weight: 600
}

.faq-list .faq-item .faq-a a:hover {
    color: #168cff;
    text-decoration: underline
}

.faq-list .faq-item.open .faq-q .faq-arrow {
    background-color: #168cff;
    color: #fff;
    transform: rotate(45deg);
    box-shadow: 0 0 12px rgba(22, 140, 255, .55)
}

.faq-list .faq-item.open .faq-a {
    max-height: 500px;
    padding: 12px 0 4px 34px
}

.page-loader {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 36px;
    background: radial-gradient(ellipse 70% 55% at 50% 50%, rgba(22, 140, 255, 0.2) 0%, transparent 65%), radial-gradient(ellipse 60% 30% at 50% 110%, rgba(124, 203, 255, 0.15) 0%, transparent 70%), linear-gradient(180deg, #06162E 0%, #020712 100%);
    transition: opacity .6s ease, visibility .6s ease;
    will-change: opacity;
    overflow: hidden
}

.page-loader.is-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none
}

.page-loader::before,
.page-loader::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    pointer-events: none
}

.page-loader::before {
    top: -200px;
    bottom: -200px;
    background-image: radial-gradient(circle 1px at 12% 30%, rgba(221, 245, 255, 0.75) 0%, transparent 60%), radial-gradient(circle 1.5px at 38% 70%, rgba(124, 203, 255, 0.7) 0%, transparent 60%), radial-gradient(circle 1px at 62% 20%, rgba(221, 245, 255, 0.8) 0%, transparent 60%), radial-gradient(circle 2px at 86% 60%, rgba(22, 140, 255, 0.55) 0%, transparent 60%), radial-gradient(circle 1px at 25% 85%, rgba(124, 203, 255, 0.7) 0%, transparent 60%), radial-gradient(circle 1.5px at 72% 45%, rgba(221, 245, 255, 0.55) 0%, transparent 60%);
    animation: pl-star-rise 14s linear infinite;
    opacity: .9
}

.page-loader::after {
    top: 0;
    bottom: 0;
    background: radial-gradient(ellipse 60% 50% at 50% 50%, transparent 0%, transparent 50%, rgba(0, 0, 0, 0.55) 100%)
}

.page-loader .pl-stack {
    position: relative;
    width: 280px;
    height: 280px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2
}

.page-loader .pl-ornament {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 92px;
    height: auto;
    opacity: .55;
    filter: drop-shadow(0 0 10px rgba(22, 140, 255, 0.55)) brightness(1.25) hue-rotate(180deg);
    animation: pl-ornament-fade 3.6s ease-in-out infinite
}

.page-loader .pl-ornament-left {
    left: -86px
}

.page-loader .pl-ornament-right {
    right: -86px;
    animation-delay: .4s
}

.page-loader .pl-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 1px solid rgba(22, 140, 255, .18);
    box-shadow: 0 0 0 1px rgba(22, 140, 255, .1) inset, 0 0 48px rgba(22, 140, 255, .2) inset, 0 0 80px rgba(22, 140, 255, .18)
}

.page-loader .pl-ring::before {
    content: "";
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    background: conic-gradient(from 0deg, transparent 0deg, rgba(221, 245, 255, 0.95) 4deg, transparent 8deg, transparent 86deg, rgba(124, 203, 255, 0.6) 90deg, transparent 94deg, transparent 176deg, rgba(221, 245, 255, 0.85) 180deg, transparent 184deg, transparent 266deg, rgba(124, 203, 255, 0.55) 270deg, transparent 274deg, transparent 360deg);
    mask: radial-gradient(circle, transparent 0, transparent 64%, #000 65%, #000 67%, transparent 68%);
    -webkit-mask: radial-gradient(circle, transparent 0, transparent 64%, #000 65%, #000 67%, transparent 68%);
    animation: pl-spin 6s linear infinite
}

.page-loader .pl-ring-2 {
    position: absolute;
    inset: 24px;
    border-radius: 50%;
    border: 1px dashed rgba(124, 203, 255, .3);
    animation: pl-spin 18s linear infinite reverse
}

.page-loader .pl-logo {
    position: relative;
    width: 110px;
    height: 110px;
    object-fit: contain;
    display: block;
    filter: drop-shadow(0 0 16px rgba(22, 140, 255, 0.65)) drop-shadow(0 0 36px rgba(124, 203, 255, 0.35)) drop-shadow(0 4px 8px rgba(0, 0, 0, 0.5));
    animation: pl-pulse 3s ease-in-out infinite
}

.page-loader .pl-text {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px
}

.page-loader .pl-label {
    font-family: "aAbsoluteEmpire", "Open Sans", sans-serif;
    font-size: 36px;
    letter-spacing: 8px;
    color: #ddf5ff;
    text-transform: uppercase;
    text-shadow: 0 0 24px rgba(22, 140, 255, .55), 0 2px 4px rgba(0, 0, 0, .6);
    background: linear-gradient(90deg, rgba(22, 140, 255, 0.85) 0%, #ddf5ff 50%, rgba(22, 140, 255, 0.85) 100%);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: rgba(0, 0, 0, 0);
    animation: pl-shimmer 3s linear infinite
}

.page-loader .pl-sub {
    font-family: "Open Sans", sans-serif;
    font-size: 11px;
    font-weight: 600;
    color: rgba(124, 203, 255, .8);
    letter-spacing: 5px;
    text-transform: uppercase;
    opacity: .85
}

.page-loader .pl-bar {
    position: relative;
    width: 220px;
    height: 3px;
    background: rgba(22, 140, 255, .14);
    border-radius: 999px;
    overflow: hidden;
    z-index: 2;
    box-shadow: 0 0 12px rgba(22, 140, 255, .18)
}

.page-loader .pl-bar::before {
    content: "";
    position: absolute;
    left: -40%;
    top: 0;
    width: 40%;
    height: 100%;
    background: linear-gradient(90deg, transparent 0%, rgba(124, 203, 255, 0.5) 30%, #ddf5ff 50%, rgba(124, 203, 255, 0.5) 70%, transparent 100%);
    border-radius: 999px;
    animation: pl-bar-sweep 1.4s ease-in-out infinite;
    box-shadow: 0 0 10px rgba(22, 140, 255, .7)
}

@keyframes pl-spin {
    from {
        transform: rotate(0deg)
    }

    to {
        transform: rotate(360deg)
    }
}

@keyframes pl-pulse {

    0%,
    100% {
        transform: translateY(0) scale(1);
        filter: drop-shadow(0 0 14px rgba(22, 140, 255, 0.55)) drop-shadow(0 0 28px rgba(124, 203, 255, 0.25)) drop-shadow(0 4px 8px rgba(0, 0, 0, 0.5))
    }

    50% {
        transform: translateY(-4px) scale(1.04);
        filter: drop-shadow(0 0 22px rgba(22, 140, 255, 0.75)) drop-shadow(0 0 44px rgba(124, 203, 255, 0.45)) drop-shadow(0 4px 8px rgba(0, 0, 0, 0.5))
    }
}

@keyframes pl-shimmer {
    from {
        background-position: 200% 0
    }

    to {
        background-position: -200% 0
    }
}

@keyframes pl-ornament-fade {

    0%,
    100% {
        opacity: .4;
        transform: translateY(-50%) scale(1)
    }

    50% {
        opacity: .8;
        transform: translateY(-50%) scale(1.04)
    }
}

@keyframes pl-bar-sweep {
    0% {
        left: -40%
    }

    100% {
        left: 100%
    }
}

@keyframes pl-star-rise {
    0% {
        transform: translateY(0)
    }

    100% {
        transform: translateY(-260px)
    }
}

@media(prefers-reduced-motion: reduce) {

    .page-loader .pl-ring::before,
    .page-loader .pl-ring-2,
    .page-loader .pl-logo,
    .page-loader .pl-label,
    .page-loader .pl-ornament,
    .page-loader .pl-bar::before,
    .page-loader::before {
        animation: none !important
    }
}

@media(max-width: 640px) {
    .page-loader {
        gap: 24px
    }

    .page-loader .pl-stack {
        width: 220px;
        height: 220px
    }

    .page-loader .pl-ornament {
        width: 68px
    }

    .page-loader .pl-ornament-left {
        left: -64px
    }

    .page-loader .pl-ornament-right {
        right: -64px
    }

    .page-loader .pl-logo {
        width: 90px;
        height: 90px
    }

    .page-loader .pl-label {
        font-size: 28px;
        letter-spacing: 6px
    }

    .page-loader .pl-bar {
        width: 180px
    }
}

.reveal {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity .8s ease, transform .8s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: opacity, transform
}

.reveal-left {
    transform: translate3d(-32px, 0, 0)
}

.reveal-right {
    transform: translate3d(32px, 0, 0)
}

.reveal-scale {
    transform: scale(0.94)
}

.reveal-rise {
    transform: translateY(36px)
}

.reveal.is-visible,
.reveal-left.is-visible,
.reveal-right.is-visible,
.reveal-scale.is-visible,
.reveal-rise.is-visible {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1)
}

.reveal[style*="--reveal-delay"] {
    transition-delay: var(--reveal-delay)
}

.hero-rise {
    opacity: 0;
    transform: translateY(-14px);
    transition: opacity .9s ease, transform .9s cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: var(--hero-delay, 0ms);
    will-change: opacity, transform
}

body.is-ready .hero-rise {
    opacity: 1;
    transform: translateY(0)
}

.banner-character.reveal.is-visible {
    animation: bannerDrift 6.5s ease-in-out .9s infinite;
    filter: drop-shadow(0 0 0 transparent)
}

@keyframes bannerDrift {

    0%,
    100% {
        transform: translate3d(0, 0, 0);
        filter: drop-shadow(0 0 18px rgba(80, 160, 255, 0))
    }

    50% {
        transform: translate3d(0, -7px, 0);
        filter: drop-shadow(0 0 28px rgba(80, 160, 255, 0.35))
    }
}

.separate-sections.reveal.is-visible strong {
    animation: separatorGlow 4.2s ease-in-out .4s infinite
}

@keyframes separatorGlow {

    0%,
    100% {
        text-shadow: 0 0 0 rgba(0, 0, 0, 0)
    }

    50% {
        text-shadow: 0 0 18px rgba(208, 165, 120, .35)
    }
}

.side-buttons a.reveal.is-visible {
    position: relative;
    animation: sideButtonFloat 5s ease-in-out 1s infinite
}

.side-buttons a.reveal.is-visible::before {
    content: "";
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(88, 101, 242, 0.35) 0%, rgba(88, 101, 242, 0) 60%);
    pointer-events: none;
    z-index: -1;
    animation: sideButtonPulse 3.2s ease-in-out 1s infinite
}

@keyframes sideButtonFloat {

    0%,
    100% {
        transform: translateY(0)
    }

    50% {
        transform: translateY(-5px)
    }
}

@keyframes sideButtonPulse {

    0%,
    100% {
        opacity: .35;
        transform: scale(0.95)
    }

    50% {
        opacity: .75;
        transform: scale(1.1)
    }
}

.newsbox .media a {
    display: inline-block;
    overflow: hidden;
    border-radius: 4px;
    position: relative;
    transition: transform .35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow .35s ease, filter .35s ease;
    will-change: transform
}

.newsbox .media a img {
    transition: transform .6s cubic-bezier(0.22, 1, 0.36, 1);
    display: block
}

.newsbox .media a:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 28px -10px rgba(8, 24, 60, .55), 0 0 0 1px rgba(124, 203, 255, .35);
    filter: brightness(1.08)
}

.newsbox .media a:hover img {
    transform: scale(1.06)
}

.newsbox .w-nav .nav-item {
    position: relative;
    transition: color .2s ease, opacity .2s ease
}

.newsbox .w-nav .nav-item::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -6px;
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, rgba(124, 203, 255, 0) 0%, rgba(124, 203, 255, 0.85) 50%, rgba(124, 203, 255, 0) 100%);
    transform: translateX(-50%);
    transition: width .35s cubic-bezier(0.22, 1, 0.36, 1)
}

.newsbox .w-nav .nav-item:hover::after {
    width: 70%
}

.newsbox .w-nav .nav-item.active::after {
    width: 100%
}

body:not(.is-ready) .wrapper {
    opacity: 0
}

body.is-ready .wrapper {
    opacity: 1;
    transition: opacity .5s ease .1s
}

.modal_holder .auth_modal {
    transform: scale(0.96);
    transition: transform .25s cubic-bezier(0.22, 1, 0.36, 1)
}

.modal_holder.active .auth_modal {
    transform: scale(1)
}

.header-button,
.nav-button,
.rank-button,
.shop-buy,
.cdc-button,
.cdc-action a,
.mc-cta,
.hc-cta,
.rb-button,
.submit-button .submit {
    transition: transform .18s ease, filter .18s ease, box-shadow .2s ease, background-color .2s ease !important
}

.header-button:active,
.nav-button:active,
.rank-button:active,
.shop-buy:active,
.cdc-button:active,
.cdc-action a:active,
.mc-cta:active,
.hc-cta:active,
.rb-button:active,
.submit-button .submit:active {
    transform: translateY(1px) scale(0.985)
}

.shop-item,
.help-channel,
.mirror-card,
.step-card,
.req-card {
    will-change: transform
}

.pixarts-nav .l-menu a,
.pixarts-nav .r-menu a {
    transition: color .2s ease, text-shadow .25s ease
}

.pixarts-nav .l-menu a:hover,
.pixarts-nav .r-menu a:hover {
    text-shadow: 0 0 12px rgba(124, 203, 255, .55)
}

.pixarts-nav .l-menu a:not(:hover) img,
.pixarts-nav .r-menu a:not(:hover) img {
    transition: filter .25s ease
}

.faq-item .faq-q .faq-arrow {
    transition: transform .25s cubic-bezier(0.22, 1, 0.36, 1), background-color .2s ease, color .2s ease
}

.modal_holder .input_holder input,
.contact-form input,
.contact-form textarea,
.contact-form select,
.faq-search {
    transition: outline .2s ease, border-color .2s ease, background .2s ease, box-shadow .2s ease
}

.modal_holder .input_holder input:focus,
.modal_holder .input_holder input:focus-visible,
.contact-form input:focus,
.contact-form input:focus-visible,
.contact-form textarea:focus,
.contact-form textarea:focus-visible,
.contact-form select:focus,
.contact-form select:focus-visible,
.faq-search:focus,
.faq-search:focus-visible {
    box-shadow: 0 0 0 3px rgba(22, 140, 255, .28)
}

.ranking-contents .tfield>* {
    transition: color .2s ease
}

img.lazy-fade {
    opacity: 0;
    transition: opacity .5s ease
}

img.lazy-fade.is-loaded {
    opacity: 1
}

@media(prefers-reduced-motion: reduce) {

    .reveal,
    .reveal-left,
    .reveal-right,
    .reveal-scale,
    .reveal-rise,
    .hero-rise {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
        animation: none !important
    }

    .banner-character.reveal.is-visible,
    .separate-sections.reveal.is-visible strong,
    .side-buttons a.reveal.is-visible,
    .side-buttons a.reveal.is-visible::before {
        animation: none !important
    }

    .banner-character.reveal.is-visible {
        filter: none !important
    }

    .modal_holder .auth_modal {
        transform: none !important;
        transition: none !important
    }

    body:not(.is-ready) .wrapper {
        opacity: 1
    }

    img.lazy-fade {
        opacity: 1 !important;
        transition: none !important
    }
}

body.home-page .home-discord-embed {
    display: grid;
    grid-template-columns: 1fr 460px;
    align-items: stretch;
    gap: 64px;
    max-width: 1280px;
    margin: 0 auto 340px;
    padding: 80px 70px 70px;
    background-color: #050911;
    border: 1px solid rgba(214, 173, 109, .32);
    outline: 1px solid #0a0d1b;
    box-shadow: 0 36px 80px rgba(2, 5, 18, .72), 0 0 0 1px rgba(214, 173, 109, .08), inset 0 1px 0 hsla(0, 0%, 100%, .04);
    position: relative;
    overflow: hidden
}

body.home-page .home-discord-embed::before {
    content: "";
    position: absolute;
    inset: -30px;
    background-image: image-set(url("../img/FudoDiscord.webp") type("image/webp"), url("../img/FudoDiscord.png") type("image/png"));
    background-size: cover;
    background-position: center 35%;
    background-repeat: no-repeat;
    filter: blur(3px) brightness(0.62) saturate(1.1) contrast(1.05);
    pointer-events: none;
    z-index: 0;
    animation: hde-bg-drift 18s ease-in-out infinite alternate
}

body.home-page .home-discord-embed::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 60% 50% at 8% 0%, rgba(214, 173, 109, 0.18), transparent 55%), radial-gradient(ellipse 60% 80% at 100% 100%, rgba(80, 140, 230, 0.22), transparent 60%), linear-gradient(180deg, rgba(4, 8, 22, 0.2) 0%, rgba(4, 8, 22, 0.62) 100%);
    pointer-events: none;
    z-index: 0
}

body.home-page .home-discord-embed>* {
    position: relative;
    z-index: 1
}

body.home-page .home-discord-embed .hde-side {
    display: flex;
    flex-direction: column;
    justify-content: center;
    max-width: 600px
}

body.home-page .home-discord-embed .hde-flourish {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 20px
}

body.home-page .home-discord-embed .hde-flourish img {
    height: 16px;
    width: auto;
    opacity: .7;
    filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.4))
}

body.home-page .home-discord-embed .hde-flourish span {
    font-family: "aAbsoluteEmpire", "Open Sans", sans-serif;
    font-size: 18px;
    font-weight: 400;
    letter-spacing: 3px;
    color: #e8d5a8;
    text-transform: uppercase;
    text-shadow: 0 2px 6px rgba(0, 0, 0, .6);
    white-space: nowrap
}

body.home-page .home-discord-embed h3 {
    margin: 0 0 22px;
    font-family: "aAbsoluteEmpire", "Open Sans", sans-serif;
    font-size: 56px;
    font-weight: 400;
    line-height: 1;
    letter-spacing: 1.5px;
    color: #f5e7c8;
    text-shadow: 0 4px 22px rgba(214, 173, 109, .35), 0 1px 0 rgba(0, 0, 0, .55)
}

body.home-page .home-discord-embed h3 em {
    display: block;
    margin-top: 6px;
    color: #ffe3a3;
    font-style: normal;
    font-size: .78em;
    letter-spacing: 4px;
    text-shadow: 0 0 24px rgba(255, 215, 130, .45), 0 2px 0 rgba(0, 0, 0, .55)
}

body.home-page .home-discord-embed p {
    margin: 0 0 26px;
    max-width: 540px;
    color: #cfd6e8;
    font-size: 15.5px;
    line-height: 1.65;
    text-shadow: 0 1px 4px rgba(0, 0, 0, .55)
}

body.home-page .home-discord-embed .hde-bullets {
    list-style: none;
    padding: 0;
    margin: 0 0 36px;
    display: flex;
    flex-direction: column;
    gap: 10px
}

body.home-page .home-discord-embed .hde-bullets li {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 16px;
    background: linear-gradient(90deg, rgba(214, 173, 109, 0.1) 0%, rgba(214, 173, 109, 0.03) 60%, transparent 100%);
    border: 1px solid rgba(214, 173, 109, .18);
    border-left: 2px solid rgba(214, 173, 109, .55);
    border-radius: 4px;
    color: #c6cee0;
    font-size: 14px;
    line-height: 1.35;
    transition: background .3s ease, border-color .3s ease, transform .3s ease
}

body.home-page .home-discord-embed .hde-bullets li:hover {
    background: linear-gradient(90deg, rgba(214, 173, 109, 0.18) 0%, rgba(214, 173, 109, 0.06) 60%, transparent 100%);
    border-color: rgba(214, 173, 109, .32);
    transform: translateX(3px)
}

body.home-page .home-discord-embed .hde-bullets .hde-bullet-icon {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, rgba(255, 215, 130, 0.32) 0%, rgba(120, 88, 50, 0.42) 70%, rgba(60, 44, 25, 0.55) 100%);
    border: 1px solid rgba(214, 173, 109, .45);
    box-shadow: inset 0 1px 0 rgba(255, 230, 180, .25), 0 2px 6px rgba(0, 0, 0, .45);
    color: #f5e7c8;
    transition: transform .3s cubic-bezier(0.22, 1, 0.36, 1), box-shadow .3s ease
}

body.home-page .home-discord-embed .hde-bullets .hde-bullet-icon svg {
    display: block
}

body.home-page .home-discord-embed .hde-bullets li:hover .hde-bullet-icon {
    transform: scale(1.08) rotate(-3deg);
    box-shadow: inset 0 1px 0 rgba(255, 230, 180, .4), 0 4px 12px rgba(214, 173, 109, .4)
}

body.home-page .home-discord-embed .hde-bullets .hde-bullet-text {
    display: flex;
    flex-direction: column;
    gap: 1px
}

body.home-page .home-discord-embed .hde-bullets .hde-bullet-text strong {
    color: #f5e7c8;
    font-weight: 700;
    font-size: 14.5px;
    letter-spacing: .3px
}

body.home-page .home-discord-embed .hde-bullets .hde-bullet-text span {
    color: #98a3bb;
    font-size: 12.5px;
    font-weight: 400
}

body.home-page .home-discord-embed .hde-cta {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    align-self: flex-start;
    padding: 16px 34px 16px 30px;
    background: radial-gradient(ellipse 80% 100% at 50% -20%, rgba(255, 255, 255, 0.18), transparent 60%), linear-gradient(180deg, #5865f2 0%, #4752c4 100%);
    color: #fff;
    font-family: "Cinzel", serif;
    font-size: 14.5px;
    font-weight: 700;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    border: 1px solid rgba(214, 173, 109, .32);
    border-radius: 6px;
    box-shadow: 0 14px 32px -8px rgba(88, 101, 242, .55), 0 4px 12px rgba(0, 0, 0, .45), inset 0 1px 0 hsla(0, 0%, 100%, .22), inset 0 -2px 0 rgba(0, 0, 0, .28);
    transition: transform .25s cubic-bezier(0.22, 1, 0.36, 1), box-shadow .25s ease, filter .25s ease, border-color .25s ease;
    text-decoration: none;
    position: relative;
    overflow: hidden;
    isolation: isolate
}

body.home-page .home-discord-embed .hde-cta::before {
    content: "";
    position: absolute;
    top: 0;
    left: -120%;
    width: 60%;
    height: 100%;
    background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.22) 50%, transparent 100%);
    transform: skewX(-20deg);
    transition: left .7s cubic-bezier(0.22, 1, 0.36, 1);
    pointer-events: none;
    z-index: 1
}

body.home-page .home-discord-embed .hde-cta svg {
    flex-shrink: 0;
    position: relative;
    z-index: 2;
    filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.35)) drop-shadow(0 1px 0 rgba(0, 0, 0, 0.4));
    transition: transform .3s cubic-bezier(0.22, 1, 0.36, 1)
}

body.home-page .home-discord-embed .hde-cta span {
    position: relative;
    z-index: 2;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .4)
}

body.home-page .home-discord-embed .hde-cta:hover {
    transform: translateY(-3px);
    filter: brightness(1.08);
    border-color: rgba(214, 173, 109, .55);
    box-shadow: 0 22px 46px -10px rgba(88, 101, 242, .75), 0 6px 16px rgba(0, 0, 0, .5), 0 0 0 1px rgba(214, 173, 109, .25), inset 0 1px 0 hsla(0, 0%, 100%, .32), inset 0 -2px 0 rgba(0, 0, 0, .28)
}

body.home-page .home-discord-embed .hde-cta:hover::before {
    left: 130%
}

body.home-page .home-discord-embed .hde-cta:hover svg {
    transform: rotate(-8deg) scale(1.08)
}

body.home-page .home-discord-embed .hde-cta:active {
    transform: translateY(-1px);
    filter: brightness(0.96);
    transition-duration: .08s
}

body.home-page .home-discord-embed .hde-widget-wrap {
    position: relative;
    padding: 4px;
    background: linear-gradient(180deg, rgba(35, 39, 65, 0.85) 0%, rgba(20, 22, 38, 0.85) 100%);
    border: 1px solid rgba(124, 203, 255, .14);
    border-radius: 10px;
    box-shadow: 0 28px 60px rgba(2, 5, 18, .65), 0 0 0 1px hsla(0, 0%, 100%, .02), inset 0 1px 0 hsla(0, 0%, 100%, .05);
    align-self: center
}

body.home-page .home-discord-embed .hde-widget-wrap::before {
    content: "";
    position: absolute;
    inset: -32px;
    background: radial-gradient(ellipse 75% 65% at 50% 50%, rgba(88, 101, 242, 0.42), rgba(88, 101, 242, 0.08) 55%, transparent 75%);
    z-index: -1;
    filter: blur(26px);
    animation: hde-pulse 4s ease-in-out infinite alternate
}

body.home-page .home-discord-embed .hde-widget-wrap::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(214, 173, 109, 0.45) 0%, transparent 8%) top left/28px 28px no-repeat, linear-gradient(315deg, rgba(214, 173, 109, 0.45) 0%, transparent 8%) bottom right/28px 28px no-repeat;
    pointer-events: none;
    mix-blend-mode: screen;
    opacity: .7
}

body.home-page .home-discord-embed .hde-widget-wrap .hde-live-badge {
    position: absolute;
    top: -14px;
    left: 18px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    background: linear-gradient(180deg, #1a2030 0%, #0d1220 100%);
    border: 1px solid rgba(64, 200, 100, .65);
    border-radius: 999px;
    color: #aef0c4;
    font-family: "Open Sans", sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .55), 0 0 14px rgba(64, 200, 100, .25), inset 0 1px 0 hsla(0, 0%, 100%, .08);
    pointer-events: none
}

body.home-page .home-discord-embed .hde-widget-wrap .hde-live-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #3fd97a;
    box-shadow: 0 0 0 0 rgba(63, 217, 122, .7);
    animation: hde-live-pulse 1.8s ease-out infinite
}

body.home-page .home-discord-embed .hde-widget-wrap .hde-widget {
    display: block;
    background: #1e2233;
    position: relative;
    z-index: 1;
    border-radius: 7px;
    width: 100%
}

@media(max-width: 1180px) {
    body.home-page .home-discord-embed {
        grid-template-columns: 1fr 400px;
        gap: 48px;
        padding: 64px 50px 56px
    }

    body.home-page .home-discord-embed h3 {
        font-size: 46px
    }
}

@media(max-width: 960px) {
    body.home-page .home-discord-embed {
        grid-template-columns: 1fr;
        gap: 40px;
        padding: 56px 36px 48px;
        margin-bottom: 320px;
        justify-items: center
    }

    body.home-page .home-discord-embed .hde-side {
        max-width: 100%;
        text-align: center;
        align-items: center
    }

    body.home-page .home-discord-embed .hde-side .hde-flourish {
        justify-content: center
    }

    body.home-page .home-discord-embed .hde-side .hde-bullets li {
        justify-content: center
    }

    body.home-page .home-discord-embed .hde-side .hde-cta {
        align-self: center
    }

    body.home-page .home-discord-embed .hde-side h3 {
        font-size: 42px
    }

    body.home-page .home-discord-embed .hde-side p {
        margin-left: auto;
        margin-right: auto
    }

    body.home-page .home-discord-embed .hde-widget-wrap .hde-widget {
        width: 100%;
        max-width: 420px;
        height: 580px
    }
}

@media(max-width: 480px) {
    body.home-page .home-discord-embed {
        padding: 40px 22px 36px
    }

    body.home-page .home-discord-embed h3 {
        font-size: 32px;
        letter-spacing: 1px
    }

    body.home-page .home-discord-embed .hde-flourish span {
        font-size: 15px;
        letter-spacing: 2px
    }

    body.home-page .home-discord-embed .hde-bullets {
        text-align: left
    }

    body.home-page .home-discord-embed .hde-bullets li {
        text-align: left
    }

    body.home-page .home-discord-embed .hde-cta {
        padding: 14px 26px;
        font-size: 13.5px
    }

    body.home-page .home-discord-embed .hde-widget-wrap .hde-widget {
        height: 520px
    }
}

@keyframes hde-bg-drift {
    0% {
        transform: scale(1) translate(0, 0)
    }

    50% {
        transform: scale(1.04) translate(-8px, -5px)
    }

    100% {
        transform: scale(1.02) translate(6px, 4px)
    }
}

@keyframes hde-pulse {
    0% {
        opacity: .5;
        transform: scale(0.94)
    }

    100% {
        opacity: 1;
        transform: scale(1.06)
    }
}

@keyframes hde-live-pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(63, 217, 122, .7)
    }

    70% {
        box-shadow: 0 0 0 9px rgba(63, 217, 122, 0)
    }

    100% {
        box-shadow: 0 0 0 0 rgba(63, 217, 122, 0)
    }
}

@media(prefers-reduced-motion: reduce) {

    .home-discord-embed::before,
    .home-discord-embed .hde-widget-wrap::before,
    .home-discord-embed .hde-live-dot {
        animation: none !important
    }
}

body.rankings-page .ranking--last {
    margin-bottom: 0;
    padding-bottom: 320px
}

body.rankings-page .server-pulse {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 14px;
    max-width: 1280px;
    margin: 30px auto 20px;
    padding: 0
}

body.rankings-page .server-pulse .sp-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 22px 18px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.55) 0%, rgba(230, 216, 192, 0.4) 100%);
    border: 1px solid #d8b888;
    outline: 1px solid #1f1311;
    box-shadow: 0 6px 22px rgba(52, 19, 19, .12);
    text-align: center;
    transition: .2s;
    position: relative
}

body.rankings-page .server-pulse .sp-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 26px rgba(52, 19, 19, .18)
}

body.rankings-page .server-pulse .sp-item .sp-icon {
    width: 28px;
    height: 28px;
    color: #c58e5c;
    margin-bottom: 4px
}

body.rankings-page .server-pulse .sp-item strong {
    font-family: "aAbsoluteEmpire", "Open Sans", sans-serif;
    font-size: 32px;
    line-height: 1;
    color: #463d3a;
    text-shadow: 0 1px 0 hsla(0, 0%, 100%, .7);
    display: flex;
    align-items: center;
    gap: 8px
}

body.rankings-page .server-pulse .sp-item span {
    font-size: 11px;
    font-weight: 700;
    color: #7b6e63;
    text-transform: uppercase;
    letter-spacing: 1px
}

body.rankings-page .server-pulse .sp-item.sp-online .sp-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #4caf50;
    box-shadow: 0 0 8px rgba(76, 175, 80, .7);
    animation: sp-pulse 2.2s infinite
}

body.rankings-page .server-pulse .sp-item.sp-online[data-online="0"] .sp-dot {
    background: #999;
    box-shadow: none;
    animation: none
}

body.rankings-page .server-pulse .sp-item.sp-meta {
    justify-content: center
}

body.rankings-page .server-pulse .sp-item.sp-meta small {
    font-size: 10px;
    color: #999695;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 700
}

body.rankings-page .server-pulse .sp-item.sp-meta strong {
    font-family: inherit;
    font-size: 13px;
    color: #c58e5c;
    text-shadow: none
}

@keyframes sp-pulse {

    0%,
    100% {
        opacity: 1;
        transform: scale(1)
    }

    50% {
        opacity: .55;
        transform: scale(0.85)
    }
}

body.rankings-page .podium {
    display: grid;
    grid-template-columns: 1fr 1.25fr 1fr;
    gap: 18px;
    align-items: end;
    max-width: 980px;
    margin: 0 auto 40px
}

body.rankings-page .podium .podium-card {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.7) 0%, rgba(230, 216, 192, 0.55) 100%);
    border: 1px solid #d8b888;
    outline: 1px solid #1f1311;
    box-shadow: 0 8px 24px rgba(52, 19, 19, .18);
    padding: 24px 18px 22px;
    text-align: center;
    position: relative;
    transition: .2s
}

body.rankings-page .podium .podium-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 30px rgba(52, 19, 19, .28)
}

body.rankings-page .podium .podium-card .pc-rank {
    position: absolute;
    top: -18px;
    left: 50%;
    transform: translateX(-50%);
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "aAbsoluteEmpire", "Open Sans", sans-serif;
    font-size: 22px;
    color: #fff;
    background: linear-gradient(180deg, #c58e5c 0%, #7a4d20 100%);
    border: 2px solid #f0c060;
    border-radius: 50%;
    box-shadow: 0 4px 10px rgba(52, 19, 19, .3)
}

body.rankings-page .podium .podium-card .pc-name {
    font-family: "aAbsoluteEmpire", "Open Sans", sans-serif;
    font-size: 22px;
    color: #463d3a;
    margin: 10px 0 6px;
    text-shadow: 0 1px 0 hsla(0, 0%, 100%, .7);
    word-break: break-word
}

body.rankings-page .podium .podium-card .pc-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    margin-bottom: 14px
}

body.rankings-page .podium .podium-card .pc-meta .pc-class {
    font-size: 11px;
    font-weight: 700;
    padding: 3px 10px;
    border: 1px solid currentColor;
    text-transform: uppercase;
    letter-spacing: .5px
}

body.rankings-page .podium .podium-card .pc-meta .pc-class.pc-class--red {
    color: #ff5f5b
}

body.rankings-page .podium .podium-card .pc-meta .pc-class.pc-class--blue {
    color: #2f7eb8
}

body.rankings-page .podium .podium-card .pc-meta .pc-class.pc-class--gold {
    color: #c58e5c
}

body.rankings-page .podium .podium-card .pc-meta .pc-guild {
    font-size: 11px;
    color: #7b6e63;
    font-weight: 600
}

body.rankings-page .podium .podium-card .pc-stats {
    display: flex;
    justify-content: center;
    gap: 18px;
    padding-top: 12px;
    border-top: 1px solid rgba(123, 110, 99, .2)
}

body.rankings-page .podium .podium-card .pc-stats>div {
    display: flex;
    flex-direction: column;
    line-height: 1.1
}

body.rankings-page .podium .podium-card .pc-stats strong {
    font-family: "aAbsoluteEmpire", "Open Sans", sans-serif;
    font-size: 18px;
    color: #463d3a
}

body.rankings-page .podium .podium-card .pc-stats span {
    font-size: 9px;
    color: #999695;
    text-transform: uppercase;
    letter-spacing: .8px;
    font-weight: 700;
    margin-top: 2px
}

body.rankings-page .podium .podium-card.podium-card--first {
    padding: 36px 22px 26px;
    background: linear-gradient(180deg, rgba(255, 248, 220, 0.85) 0%, rgba(240, 192, 96, 0.35) 100%);
    border-color: #f0c060;
    box-shadow: 0 12px 32px rgba(161, 112, 48, .35), 0 0 0 1px rgba(240, 192, 96, .4)
}

body.rankings-page .podium .podium-card.podium-card--first .pc-crown {
    position: absolute;
    top: -30px;
    left: 50%;
    transform: translateX(-50%);
    width: 70px;
    height: 44px;
    filter: drop-shadow(0 4px 6px rgba(52, 19, 19, 0.4))
}

body.rankings-page .podium .podium-card.podium-card--first .pc-rank {
    top: 14px;
    background: linear-gradient(180deg, #f0c060 0%, #a17030 100%);
    border-color: #fff8dc;
    box-shadow: 0 4px 14px rgba(240, 192, 96, .55)
}

body.rankings-page .podium .podium-card.podium-card--first .pc-name {
    font-size: 26px;
    margin-top: 36px
}

body.rankings-page .podium .podium-card.podium-card--first .pc-stats strong {
    font-size: 22px
}

body.rankings-page .podium .podium-card.podium-card--second .pc-rank {
    background: linear-gradient(180deg, #c0c0c0 0%, #7a7a7a 100%);
    border-color: #e0e0e0
}

body.rankings-page .podium .podium-card.podium-card--third .pc-rank {
    background: linear-gradient(180deg, #cd7f32 0%, #6e3f15 100%);
    border-color: #e0a070
}

body.rankings-page .ranking-empty {
    padding: 50px 30px 60px;
    text-align: center
}

body.rankings-page .ranking-empty .re-illus {
    width: 90px;
    height: auto;
    margin-bottom: 14px;
    opacity: .7
}

body.rankings-page .ranking-empty strong {
    display: block;
    font-family: "aAbsoluteEmpire", "Open Sans", sans-serif;
    font-size: 24px;
    color: #463d3a;
    margin-bottom: 8px;
    text-shadow: 0 1px 0 hsla(0, 0%, 100%, .6)
}

body.rankings-page .ranking-empty span {
    display: block;
    max-width: 480px;
    margin: 0 auto;
    font-size: 13px;
    color: #7b6e63;
    line-height: 1.55
}

body.rankings-page .ranking-empty span b {
    color: #c58e5c;
    font-weight: 700
}

body.rankings-page .ranking-empty span code {
    font-family: monospace;
    font-size: 12px;
    color: #c58e5c;
    background: rgba(40, 27, 23, .05);
    padding: 1px 4px
}

body.rankings-page .rank-desktop .tfield--top1 {
    background: linear-gradient(90deg, rgba(240, 192, 96, 0.18) 0%, rgba(240, 192, 96, 0) 100%)
}

body.rankings-page .rank-desktop .tfield--top1 .order {
    color: #a17030;
    font-weight: 700
}

body.rankings-page .rank-desktop .tfield--top2 {
    background: linear-gradient(90deg, rgba(192, 192, 192, 0.16) 0%, rgba(192, 192, 192, 0) 100%)
}

body.rankings-page .rank-desktop .tfield--top2 .order {
    color: #555;
    font-weight: 700
}

body.rankings-page .rank-desktop .tfield--top3 {
    background: linear-gradient(90deg, rgba(205, 127, 50, 0.16) 0%, rgba(205, 127, 50, 0) 100%)
}

body.rankings-page .rank-desktop .tfield--top3 .order {
    color: #6e3f15;
    font-weight: 700
}

body.rankings-page .rank-cards {
    display: none
}

body.rankings-page .rank-desktop {
    display: block
}

body.rankings-page .rank-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.6) 0%, rgba(230, 216, 192, 0.35) 100%);
    border: 1px solid rgba(216, 184, 136, .6);
    outline: 1px solid rgba(31, 19, 17, .6);
    margin: 0 14px 10px;
    transition: .2s
}

body.rankings-page .rank-card:hover {
    filter: brightness(1.05)
}

body.rankings-page .rank-card .rc-rank {
    flex: 0 0 auto;
    font-family: "aAbsoluteEmpire", "Open Sans", sans-serif;
    font-size: 24px;
    color: #c58e5c;
    min-width: 40px;
    text-align: center
}

body.rankings-page .rank-card .rc-body {
    flex: 1;
    min-width: 0
}

body.rankings-page .rank-card .rc-name {
    font-weight: 700;
    font-size: 14px;
    color: #463d3a;
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

body.rankings-page .rank-card .rc-meta {
    display: flex;
    gap: 8px;
    flex-wrap: wrap
}

body.rankings-page .rank-card .rc-meta .rc-class {
    font-size: 10px;
    font-weight: 700;
    padding: 2px 7px;
    border: 1px solid currentColor;
    text-transform: uppercase;
    letter-spacing: .4px
}

body.rankings-page .rank-card .rc-meta .rc-class.rc-class--red {
    color: #ff5f5b
}

body.rankings-page .rank-card .rc-meta .rc-class.rc-class--blue {
    color: #2f7eb8
}

body.rankings-page .rank-card .rc-meta .rc-class.rc-class--gold {
    color: #c58e5c
}

body.rankings-page .rank-card .rc-meta .rc-guild {
    font-size: 10.5px;
    color: #7b6e63;
    font-weight: 600
}

body.rankings-page .rank-card .rc-stats {
    flex: 0 0 auto;
    display: flex;
    gap: 14px;
    text-align: right
}

body.rankings-page .rank-card .rc-stats>div {
    display: flex;
    flex-direction: column;
    line-height: 1.05
}

body.rankings-page .rank-card .rc-stats strong {
    font-family: "aAbsoluteEmpire", "Open Sans", sans-serif;
    font-size: 18px;
    color: #463d3a
}

body.rankings-page .rank-card .rc-stats span {
    font-size: 9px;
    color: #999695;
    text-transform: uppercase;
    letter-spacing: .6px;
    font-weight: 700;
    margin-top: 1px
}

body.rankings-page .rank-card--top1 .rc-rank {
    color: #a17030
}

body.rankings-page .rank-card--top1 {
    border-color: #f0c060;
    background: linear-gradient(180deg, rgba(255, 248, 220, 0.85) 0%, rgba(240, 192, 96, 0.25) 100%)
}

body.rankings-page .rank-card--top2 .rc-rank {
    color: #555
}

body.rankings-page .rank-card--top2 {
    border-color: silver
}

body.rankings-page .rank-card--top3 .rc-rank {
    color: #6e3f15
}

body.rankings-page .rank-card--top3 {
    border-color: #cd7f32
}

@media(max-width: 1024px) {
    body.rankings-page .podium {
        grid-template-columns: 1fr;
        max-width: 460px;
        gap: 24px
    }

    body.rankings-page .podium .podium-card--first {
        order: -1
    }
}

@media(max-width: 768px) {
    body.rankings-page .server-pulse {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
        margin: 20px 14px
    }

    body.rankings-page .server-pulse .sp-item {
        padding: 16px 12px
    }

    body.rankings-page .server-pulse .sp-item strong {
        font-size: 24px
    }

    body.rankings-page .server-pulse .sp-item .sp-icon {
        width: 22px;
        height: 22px
    }

    body.rankings-page .server-pulse .sp-meta {
        grid-column: 1/-1;
        padding: 12px
    }

    body.rankings-page .podium {
        margin-bottom: 30px
    }

    body.rankings-page .podium .podium-card {
        padding: 20px 16px
    }

    body.rankings-page .podium .podium-card .pc-name {
        font-size: 20px
    }

    body.rankings-page .podium .podium-card .pc-stats {
        gap: 14px
    }

    body.rankings-page .podium .podium-card .pc-stats strong {
        font-size: 16px
    }

    body.rankings-page .podium .podium-card.podium-card--first {
        padding: 32px 18px 22px
    }

    body.rankings-page .podium .podium-card.podium-card--first .pc-name {
        font-size: 22px
    }

    body.rankings-page .podium .podium-card.podium-card--first .pc-stats strong {
        font-size: 18px
    }

    body.rankings-page .rank-desktop {
        display: none
    }

    body.rankings-page .rank-cards {
        display: block;
        padding-bottom: 18px
    }

    body.rankings-page .rank-card .rc-rank {
        font-size: 20px;
        min-width: 32px
    }

    body.rankings-page .rank-card .rc-stats {
        gap: 10px
    }

    body.rankings-page .rank-card .rc-stats strong {
        font-size: 16px
    }

    body.rankings-page .ranking-empty {
        padding: 35px 18px 40px
    }

    body.rankings-page .ranking-empty .re-illus {
        width: 70px
    }

    body.rankings-page .ranking-empty strong {
        font-size: 20px
    }

    body.rankings-page .ranking-empty span {
        font-size: 12px
    }
}

@media(max-width: 420px) {
    body.rankings-page .server-pulse {
        grid-template-columns: 1fr 1fr
    }

    body.rankings-page .rank-card {
        flex-wrap: wrap
    }

    body.rankings-page .rank-card .rc-stats {
        width: 100%;
        justify-content: flex-end;
        padding-top: 4px;
        border-top: 1px dashed rgba(123, 110, 99, .2);
        margin-top: 4px
    }
}

body.community-page .cm-eyebrow {
    display: inline-block;
    margin-bottom: 12px;
    padding: 5px 14px;
    background: linear-gradient(180deg, #f7d695, #d6ad6d 60%, #b87a32);
    color: #1a0e08;
    font-family: "Cinzel", serif;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 2.4px;
    text-transform: uppercase;
    box-shadow: 0 6px 18px rgba(214, 173, 109, .34)
}

body.community-page .community-hero {
    position: relative;
    max-width: 1080px;
    margin: 0 auto 40px;
    padding: 56px 60px;
    background-color: #1a0e08;
    background-image: url("../img/news-bg.jpg");
    background-image: image-set(url("../img/news-bg.webp") type("image/webp"), url("../img/news-bg.jpg") type("image/jpeg"));
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    outline: 1px solid #1f1311;
    border: 1px solid #d8b888;
    box-shadow: 0 24px 60px rgba(52, 19, 19, .32);
    overflow: hidden
}

body.community-page .community-hero .community-hero-ornament {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 90% 10%, rgba(232, 80, 72, 0.22), transparent 55%), radial-gradient(circle at 10% 90%, rgba(214, 173, 109, 0.22), transparent 55%), linear-gradient(180deg, rgba(0, 0, 0, 0.42), rgba(0, 0, 0, 0.62));
    pointer-events: none
}

body.community-page .community-hero .community-hero-body {
    position: relative;
    z-index: 1;
    max-width: 720px
}

body.community-page .community-hero .community-hero-body h1 {
    margin: 0 0 18px;
    font-family: "Cinzel", serif;
    font-size: 44px;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.5px;
    color: #f7d695;
    text-shadow: 0 4px 18px rgba(214, 173, 109, .45)
}

body.community-page .community-hero .community-hero-body p {
    margin: 0 0 28px;
    color: #d8c4ad;
    font-size: 15px;
    line-height: 1.7;
    max-width: 620px
}

body.community-page .community-hero .community-hero-actions {
    display: inline-flex;
    align-items: center;
    gap: 28px;
    flex-wrap: wrap;
    position: relative;
    z-index: 1
}

body.community-page .community-hero .community-hero-actions .cdc-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 270px;
    height: 84px;
    background-image: url(../img/header-button.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    transition: .2s
}

body.community-page .community-hero .community-hero-actions .cdc-button:hover {
    filter: brightness(115%);
    transform: translateY(-1px)
}

body.community-page .community-hero .community-hero-actions .cdc-button span {
    position: relative;
    top: -4px;
    font-size: 16px;
    font-weight: bold;
    color: #33211d;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    text-shadow: .454px .891px 1px #fceca0
}

body.community-page .community-hero .community-hero-actions .cm-secondary {
    color: #d8c4ad;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .4px;
    border-bottom: 1px solid rgba(0, 0, 0, 0);
    transition: color .15s ease, border-color .15s ease
}

body.community-page .community-hero .community-hero-actions .cm-secondary:hover {
    color: #f7d695;
    border-bottom-color: rgba(247, 214, 149, .5)
}

body.community-page .community-channels {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
    max-width: 1080px;
    margin: 0 auto 40px
}

body.community-page .cm-channel {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    padding: 22px 24px 50px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0)), rgba(26, 14, 8, .78);
    border: 1px solid #d8b888;
    outline: 1px solid #1f1311;
    box-shadow: 0 14px 28px rgba(52, 19, 19, .28);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
    color: inherit;
    text-decoration: none;
    position: relative;
    min-height: 140px
}

body.community-page .cm-channel:hover {
    transform: translateY(-3px);
    border-color: #f0c060;
    box-shadow: 0 20px 40px rgba(52, 19, 19, .42)
}

body.community-page .cm-channel:hover .cm-channel-cta {
    color: #f7d695
}

body.community-page .cm-channel .cm-channel-icon {
    flex-shrink: 0;
    width: 54px;
    height: 54px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    font-size: 26px;
    background: rgba(214, 173, 109, .12);
    border: 1px solid rgba(214, 173, 109, .35)
}

body.community-page .cm-channel .cm-channel-icon[data-tone=indigo] {
    background: rgba(106, 169, 255, .12);
    border-color: rgba(106, 169, 255, .4)
}

body.community-page .cm-channel .cm-channel-icon[data-tone=gold] {
    background: rgba(214, 173, 109, .16);
    border-color: rgba(214, 173, 109, .42)
}

body.community-page .cm-channel .cm-channel-icon[data-tone=emerald] {
    background: rgba(78, 210, 154, .12);
    border-color: rgba(78, 210, 154, .4)
}

body.community-page .cm-channel .cm-channel-icon[data-tone=rose] {
    background: rgba(232, 80, 72, .12);
    border-color: rgba(232, 80, 72, .4)
}

body.community-page .cm-channel .cm-channel-body {
    flex: 1;
    min-width: 0;
    line-height: 1.5
}

body.community-page .cm-channel .cm-channel-body strong {
    display: block;
    margin-bottom: 6px;
    color: #f7d695;
    font-family: "Cinzel", serif;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: .3px
}

body.community-page .cm-channel .cm-channel-body span {
    display: block;
    color: #d8c4ad;
    font-size: 13px;
    line-height: 1.55
}

body.community-page .cm-channel .cm-channel-cta {
    position: absolute;
    right: 24px;
    bottom: 18px;
    color: #d6ad6d;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .5px;
    transition: color .15s ease
}

body.community-page .community-quicklinks {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    max-width: 1080px;
    margin: 0 auto 40px
}

body.community-page .cm-quick {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 22px 18px;
    text-align: center;
    background: rgba(26, 14, 8, .62);
    border: 1px solid rgba(214, 173, 109, .22);
    outline: 1px solid #1f1311;
    text-decoration: none;
    transition: transform .18s ease, border-color .18s ease
}

body.community-page .cm-quick:hover {
    transform: translateY(-2px);
    border-color: rgba(214, 173, 109, .5)
}

body.community-page .cm-quick .cm-quick-icon {
    font-size: 32px;
    line-height: 1;
    margin-bottom: 4px
}

body.community-page .cm-quick strong {
    color: #f7d695;
    font-family: "Cinzel", serif;
    font-size: 14.5px;
    font-weight: 700;
    letter-spacing: .3px
}

body.community-page .cm-quick span {
    color: #b8a890;
    font-size: 12px;
    line-height: 1.5
}

body.community-page .community-rules {
    max-width: 1080px;
    margin: 0 auto 50px
}

body.community-page .cm-steps {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px
}

body.community-page .cm-steps li {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    padding: 20px 22px;
    background: rgba(26, 14, 8, .55);
    border-left: 3px solid #d6ad6d;
    border-top: 1px solid rgba(214, 173, 109, .18);
    border-right: 1px solid rgba(214, 173, 109, .18);
    border-bottom: 1px solid rgba(214, 173, 109, .18)
}

body.community-page .cm-steps .cm-step-num {
    flex-shrink: 0;
    font-family: "Cinzel", serif;
    font-size: 30px;
    font-weight: 700;
    color: #d6ad6d;
    letter-spacing: -0.5px;
    line-height: 1;
    padding-top: 2px;
    min-width: 46px
}

body.community-page .cm-steps strong {
    display: block;
    margin-bottom: 5px;
    color: #f7d695;
    font-family: "Cinzel", serif;
    font-size: 15px;
    font-weight: 700
}

body.community-page .cm-steps p {
    margin: 0;
    color: #d8c4ad;
    font-size: 13px;
    line-height: 1.55
}

body.community-page .cm-steps code {
    padding: 1px 7px;
    background: rgba(214, 173, 109, .14);
    border: 1px solid rgba(214, 173, 109, .3);
    color: #f7d695;
    font-family: "JetBrains Mono", Consolas, monospace;
    font-size: 11.5px;
    letter-spacing: .5px
}

body.community-page .community-cta-bottom {
    max-width: 760px;
    margin: 0 auto 320px;
    padding: 50px 40px;
    text-align: center;
    background-color: #1a0e08;
    background-image: url("../img/news-bg.jpg");
    background-image: image-set(url("../img/news-bg.webp") type("image/webp"), url("../img/news-bg.jpg") type("image/jpeg"));
    background-size: cover;
    background-position: center;
    outline: 1px solid #1f1311;
    border: 1px solid #d8b888;
    position: relative;
    overflow: hidden
}

body.community-page .community-cta-bottom::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 0%, rgba(214, 173, 109, 0.22), transparent 65%), linear-gradient(180deg, rgba(0, 0, 0, 0.42), rgba(0, 0, 0, 0.62));
    pointer-events: none
}

body.community-page .community-cta-bottom>* {
    position: relative;
    z-index: 1
}

body.community-page .community-cta-bottom h3 {
    margin: 0 0 12px;
    font-family: "Cinzel", serif;
    font-size: 30px;
    font-weight: 700;
    color: #f7d695
}

body.community-page .community-cta-bottom p {
    margin: 0 auto 28px;
    max-width: 540px;
    color: #d8c4ad;
    font-size: 15px;
    line-height: 1.65
}

body.community-page .community-cta-bottom .cdc-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 270px;
    height: 84px;
    background-image: url(../img/header-button.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    transition: .2s
}

body.community-page .community-cta-bottom .cdc-button:hover {
    filter: brightness(115%);
    transform: translateY(-1px)
}

body.community-page .community-cta-bottom .cdc-button span {
    position: relative;
    top: -4px;
    font-size: 16px;
    font-weight: bold;
    color: #33211d;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    text-shadow: .454px .891px 1px #fceca0
}

@media(max-width: 920px) {
    body.community-page .community-channels {
        grid-template-columns: 1fr
    }

    body.community-page .community-quicklinks {
        grid-template-columns: repeat(2, 1fr)
    }

    body.community-page .cm-steps {
        grid-template-columns: 1fr
    }
}

@media(max-width: 600px) {
    body.community-page .community-hero {
        padding: 40px 24px
    }

    body.community-page .community-hero .community-hero-body h1 {
        font-size: 30px
    }

    body.community-page .community-hero .community-hero-body p {
        font-size: 14px
    }

    body.community-page .community-hero .community-hero-actions {
        gap: 18px
    }

    body.community-page .community-quicklinks {
        grid-template-columns: 1fr
    }

    body.community-page .cm-channel {
        padding: 18px 18px 42px
    }

    body.community-page .cm-channel .cm-channel-cta {
        right: 18px;
        bottom: 14px
    }

    body.community-page .cm-steps li {
        padding: 16px 18px;
        gap: 14px
    }

    body.community-page .cm-steps .cm-step-num {
        font-size: 26px;
        min-width: 36px
    }

    body.community-page .community-cta-bottom {
        padding: 36px 24px
    }

    body.community-page .community-cta-bottom h3 {
        font-size: 24px
    }
}

body.support-page .help-channels {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    max-width: 1280px;
    margin: 0 auto 30px
}

body.support-page .help-channels .help-channel {
    background-image: url("../img/news-bg.jpg");
    background-image: image-set(url("../img/news-bg.webp") type("image/webp"), url("../img/news-bg.jpg") type("image/jpeg"));
    background-size: cover;
    outline: 1px solid #1f1311;
    border: 1px solid #d8b888;
    padding: 28px 22px 22px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: .2s
}

body.support-page .help-channels .help-channel:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(52, 19, 19, .25)
}

body.support-page .help-channels .help-channel .hc-icon {
    width: 64px;
    height: 64px;
    margin-bottom: 14px
}

body.support-page .help-channels .help-channel .hc-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    outline: 1px solid #1f1311;
    border: 1px solid #f7d58a
}

body.support-page .help-channels .help-channel .hc-name {
    font-family: "aAbsoluteEmpire", "Open Sans", sans-serif;
    font-size: 22px;
    color: #463d3a;
    margin-bottom: 8px;
    text-shadow: 0 1px 0 hsla(0, 0%, 100%, .6)
}

body.support-page .help-channels .help-channel .hc-desc {
    font-size: 12px;
    color: #7b6e63;
    line-height: 1.5;
    margin-bottom: 16px;
    min-height: 52px
}

body.support-page .help-channels .help-channel .hc-desc b {
    color: #0e4e8f;
    font-weight: 700
}

body.support-page .help-channels .help-channel .hc-cta {
    width: 100%;
    height: 40px;
    background-image: url(../img/rank-button.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px
}

body.support-page .help-channels .help-channel .hc-cta span {
    position: relative;
    top: -3px;
    font-size: 12px;
    font-weight: 700;
    color: #33211d;
    text-transform: uppercase;
    text-shadow: .454px .891px 1px #fceca0
}

body.support-page .help-channels .help-channel .hc-meta {
    font-size: 10px;
    color: #999695;
    letter-spacing: .5px;
    text-transform: uppercase;
    font-weight: 600
}

body.support-page .help-channels .help-channel.help-channel-disabled {
    pointer-events: none;
    filter: grayscale(0.7) brightness(0.95);
    opacity: .75
}

body.support-page .faq-widget .faq-search-wrap {
    position: relative;
    padding: 18px 30px 0
}

body.support-page .faq-widget .faq-search-wrap .faq-search {
    width: 100%;
    height: 44px;
    padding: 0 50px 0 18px;
    background: rgba(2, 7, 18, .04);
    border: 1px solid rgba(123, 110, 99, .3);
    color: #463d3a;
    font-size: 13px;
    font-family: inherit;
    outline: none;
    box-sizing: border-box;
    transition: .2s
}

body.support-page .faq-widget .faq-search-wrap .faq-search::placeholder {
    color: rgba(123, 110, 99, .6)
}

body.support-page .faq-widget .faq-search-wrap .faq-search:focus {
    border-color: #168cff;
    background: rgba(2, 7, 18, .02)
}

body.support-page .faq-widget .faq-search-wrap .faq-search-icon {
    position: absolute;
    right: 48px;
    top: 26px;
    width: 22px;
    height: 22px;
    background-color: #06162e;
    color: #7ccbff;
    font-weight: 700;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none
}

body.support-page .faq-widget .faq-empty {
    display: none;
    text-align: center;
    padding: 30px 20px 40px;
    color: #999695;
    font-style: italic;
    font-size: 13px
}

body.support-page .faq-widget.faq-no-results .faq-empty {
    display: block
}

body.support-page .faq-widget.faq-no-results .faq-item {
    display: none
}

body.support-page .faq-widget .faq-item.faq-hidden {
    display: none
}

body.support-page .contact-card {
    background-image: url("../img/news-bg.jpg");
    background-image: image-set(url("../img/news-bg.webp") type("image/webp"), url("../img/news-bg.jpg") type("image/jpeg"));
    background-size: cover;
    outline: 1px solid #1f1311;
    border: 1px solid #d8b888;
    box-shadow: 0 10px 30px rgba(52, 19, 19, .15);
    padding: 32px 40px 36px;
    position: relative;
    margin-bottom: 50px
}

body.support-page .contact-card .contact-card-head {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding-bottom: 22px;
    margin-bottom: 22px;
    border-bottom: 1px solid rgba(123, 110, 99, .2)
}

body.support-page .contact-card .contact-card-head img {
    width: 10px;
    height: 10px;
    margin-bottom: 6px
}

body.support-page .contact-card .contact-card-head h2 {
    margin: 0 0 6px;
    font-size: 22px;
    font-family: "aAbsoluteEmpire", "Open Sans", sans-serif;
    font-weight: 400;
    color: #463d3a;
    text-shadow: 0 1px 0 hsla(0, 0%, 100%, .6)
}

body.support-page .contact-card .contact-card-head p {
    margin: 0;
    font-size: 13px;
    color: #7b6e63;
    line-height: 1.5
}

body.support-page .contact-card .contact-form .cf-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 18px
}

body.support-page .contact-card .contact-form .cf-field {
    margin-bottom: 18px
}

body.support-page .contact-card .contact-form .cf-field label {
    display: block;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.5px;
    color: #0e4e8f;
    text-transform: uppercase;
    margin-bottom: 6px
}

body.support-page .contact-card .contact-form .cf-field .cf-input {
    position: relative;
    background: rgba(2, 7, 18, .04);
    border: 1px solid rgba(123, 110, 99, .3);
    transition: .2s
}

body.support-page .contact-card .contact-form .cf-field .cf-input:focus-within {
    border-color: #168cff;
    background: rgba(2, 7, 18, .02);
    box-shadow: 0 0 0 3px rgba(22, 140, 255, .15)
}

body.support-page .contact-card .contact-form .cf-field .cf-input .cf-icon {
    position: absolute;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-right: 1px solid rgba(123, 110, 99, .2);
    pointer-events: none
}

body.support-page .contact-card .contact-form .cf-field .cf-input input,
body.support-page .contact-card .contact-form .cf-field .cf-input select,
body.support-page .contact-card .contact-form .cf-field .cf-input textarea {
    width: 100%;
    background: rgba(0, 0, 0, 0);
    border: none;
    outline: none;
    color: #463d3a;
    font-family: inherit;
    font-size: 13px;
    box-sizing: border-box;
    padding: 0 16px;
    height: 44px
}

body.support-page .contact-card .contact-form .cf-field .cf-input input::placeholder,
body.support-page .contact-card .contact-form .cf-field .cf-input select::placeholder,
body.support-page .contact-card .contact-form .cf-field .cf-input textarea::placeholder {
    color: rgba(123, 110, 99, .55)
}

body.support-page .contact-card .contact-form .cf-field .cf-input:has(.cf-icon) input {
    padding-left: 56px
}

body.support-page .contact-card .contact-form .cf-field .cf-input select {
    appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, #0E4E8F 50%), linear-gradient(135deg, #0E4E8F 50%, transparent 50%);
    background-position: calc(100% - 18px) center, calc(100% - 13px) center;
    background-size: 5px 5px;
    background-repeat: no-repeat;
    cursor: pointer
}

body.support-page .contact-card .contact-form .cf-field .cf-input.cf-input-textarea {
    padding: 12px 0
}

body.support-page .contact-card .contact-form .cf-field .cf-input.cf-input-textarea textarea {
    height: auto;
    padding: 0 16px;
    resize: vertical;
    line-height: 1.5
}

body.support-page .contact-card .contact-form .cf-attach {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    margin-bottom: 22px;
    background: rgba(2, 7, 18, .03);
    border: 1px dashed rgba(123, 110, 99, .4);
    cursor: pointer;
    transition: .2s
}

body.support-page .contact-card .contact-form .cf-attach:hover {
    background: rgba(2, 7, 18, .05);
    border-color: #168cff
}

body.support-page .contact-card .contact-form .cf-attach .cf-attach-icon {
    width: 26px;
    height: 26px;
    background-color: #06162e;
    color: #7ccbff;
    font-weight: 700;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 0 0 1px rgba(22, 140, 255, .2)
}

body.support-page .contact-card .contact-form .cf-attach span:last-child {
    font-size: 12px;
    color: #7b6e63
}

body.support-page .contact-card .contact-form .cf-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 25px;
    padding-top: 22px;
    border-top: 1px solid rgba(123, 110, 99, .2)
}

body.support-page .contact-card .contact-form .cf-actions .cf-actions-meta {
    font-size: 11px;
    color: #999695
}

body.support-page .contact-card .contact-form .cf-actions .cf-actions-meta b {
    color: #0e4e8f
}

body.support-page .contact-card .contact-form .cf-actions .submit-button {
    display: flex;
    align-items: center
}

body.support-page .contact-card .contact-form .cf-actions .submit-button img {
    display: block;
    width: 156px;
    height: 12px
}

body.support-page .contact-card .contact-form .cf-actions .submit-button .submit {
    margin: 0 18px;
    width: 160px;
    height: 50px;
    background-image: url(../img/rank-button.png);
    background-size: cover;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: .2s
}

body.support-page .contact-card .contact-form .cf-actions .submit-button .submit:hover {
    filter: brightness(115%)
}

body.support-page .contact-card .contact-form .cf-actions .submit-button .submit span {
    position: relative;
    top: -4px;
    font-size: 13px;
    font-weight: 700;
    color: #33211d;
    text-transform: uppercase;
    text-shadow: .454px .891px 1px #fceca0
}

body.support-page .report-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 35px;
    max-width: 1280px;
    margin: 0 auto 380px;
    padding: 28px 38px;
    background: linear-gradient(135deg, rgba(58, 18, 18, 0.92) 0%, rgba(26, 10, 10, 0.95) 100%), url(../img/news-bg.jpg);
    background-size: cover;
    background-blend-mode: multiply;
    outline: 1px solid #1f1311;
    border: 1px solid rgba(220, 66, 91, .5);
    box-shadow: 0 10px 30px rgba(26, 10, 10, .45), inset 0 0 80px rgba(220, 66, 91, .08);
    position: relative
}

body.support-page .report-banner .rb-content {
    display: flex;
    align-items: center;
    gap: 22px;
    flex: 1;
    min-width: 0
}

body.support-page .report-banner .rb-icon {
    flex-shrink: 0;
    width: 64px;
    height: 64px;
    border: 2px solid #dc425b;
    background: rgba(220, 66, 91, .12);
    color: #ff5f5b;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "aAbsoluteEmpire", "Open Sans", sans-serif;
    font-size: 38px;
    font-weight: 400;
    line-height: 1;
    text-shadow: 0 0 12px rgba(220, 66, 91, .6)
}

body.support-page .report-banner .rb-text .rb-title {
    font-family: "aAbsoluteEmpire", "Open Sans", sans-serif;
    font-size: 22px;
    color: #f7d58a;
    margin-bottom: 6px;
    text-shadow: 0 1px 0 rgba(0, 0, 0, .6);
    line-height: 1.1
}

body.support-page .report-banner .rb-text .rb-desc {
    font-size: 13px;
    color: rgba(241, 224, 188, .75);
    line-height: 1.5
}

body.support-page .report-banner .rb-button {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 220px;
    height: 60px;
    background: linear-gradient(180deg, #dc425b 0%, #8a1a28 100%);
    border: 1px solid #ff5f5b;
    box-shadow: 0 4px 15px rgba(220, 66, 91, .35);
    transition: .2s
}

body.support-page .report-banner .rb-button:hover {
    filter: brightness(115%);
    transform: translateY(-2px);
    box-shadow: 0 6px 22px rgba(220, 66, 91, .5)
}

body.support-page .report-banner .rb-button span {
    font-size: 13px;
    font-weight: 800;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .6)
}

@media(max-width: 1024px) {
    body.support-page .help-channels {
        grid-template-columns: repeat(2, 1fr)
    }

    body.support-page .contact-card {
        padding: 28px 28px 30px
    }

    body.support-page .report-banner {
        padding: 24px 28px;
        gap: 22px
    }

    body.support-page .report-banner .rb-content {
        gap: 18px
    }

    body.support-page .report-banner .rb-button {
        width: 180px;
        height: 54px
    }
}

@media(max-width: 768px) {
    body.support-page .help-channels {
        grid-template-columns: 1fr;
        gap: 12px
    }

    body.support-page .help-channels .help-channel {
        padding: 22px 18px 18px
    }

    body.support-page .faq-widget .faq-search-wrap {
        padding: 14px 15px 0
    }

    body.support-page .faq-widget .faq-search-wrap .faq-search-icon {
        right: 27px;
        top: 22px
    }

    body.support-page .contact-card {
        padding: 22px 18px 24px
    }

    body.support-page .contact-card .contact-card-head h2 {
        font-size: 18px
    }

    body.support-page .contact-card .contact-card-head p {
        font-size: 12px
    }

    body.support-page .contact-card .contact-form .cf-row {
        grid-template-columns: 1fr;
        gap: 0
    }

    body.support-page .contact-card .contact-form .cf-actions {
        flex-direction: column;
        align-items: center;
        gap: 16px;
        text-align: center
    }

    body.support-page .contact-card .contact-form .cf-actions .submit-button {
        justify-content: center
    }

    body.support-page .contact-card .contact-form .cf-actions .submit-button img {
        width: 70px;
        height: 8px
    }

    body.support-page .contact-card .contact-form .cf-actions .submit-button .submit {
        margin: 0 10px;
        width: 180px;
        height: 50px;
        flex-shrink: 0
    }

    body.support-page .contact-card .contact-form .cf-actions .submit-button .submit span {
        font-size: 12px;
        white-space: nowrap;
        letter-spacing: .5px
    }

    body.support-page .report-banner {
        flex-direction: column;
        text-align: center;
        padding: 22px 18px;
        margin-bottom: 160px
    }

    body.support-page .report-banner .rb-content {
        flex-direction: column;
        text-align: center;
        gap: 14px
    }

    body.support-page .report-banner .rb-button {
        width: 100%;
        max-width: 280px
    }
}

body.download-page .client-download-card {
    display: grid;
    grid-template-columns: 220px 1fr auto;
    align-items: center;
    gap: 50px;
    background-image: url("../img/news-bg.jpg");
    background-image: image-set(url("../img/news-bg.webp") type("image/webp"), url("../img/news-bg.jpg") type("image/jpeg"));
    background-size: cover;
    background-repeat: no-repeat;
    outline: 1px solid #1f1311;
    border: 1px solid #d8b888;
    box-shadow: 0 12px 30px rgba(52, 19, 19, .18);
    padding: 40px 50px;
    max-width: 1280px;
    margin: 0 auto 30px;
    position: relative
}

body.download-page .client-download-card .cdc-logo img {
    width: 100%;
    max-width: 220px;
    height: auto;
    object-fit: contain;
    display: block;
    filter: drop-shadow(0 4px 12px rgba(52, 19, 19, 0.3))
}

body.download-page .client-download-card .cdc-info {
    min-width: 0
}

body.download-page .client-download-card .cdc-info .cdc-version-tag {
    display: inline-block;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.5px;
    color: #0e4e8f;
    border: 1px solid rgba(14, 78, 143, .5);
    background: rgba(2, 7, 18, .04);
    padding: 4px 12px;
    margin-bottom: 12px;
    text-transform: uppercase;
    box-shadow: 0 0 8px rgba(22, 140, 255, .12)
}

body.download-page .client-download-card .cdc-info .cdc-title {
    font-family: "aAbsoluteEmpire", "Open Sans", sans-serif;
    font-size: 42px;
    color: #463d3a;
    text-shadow: 0 1px 0 hsla(0, 0%, 100%, .7);
    margin-bottom: 8px;
    line-height: 1
}

body.download-page .client-download-card .cdc-info .cdc-tagline {
    font-size: 13px;
    line-height: 1.5;
    color: #7b6e63;
    margin-bottom: 18px;
    max-width: 480px
}

body.download-page .client-download-card .cdc-info .cdc-meta {
    display: flex;
    gap: 0;
    flex-wrap: wrap
}

body.download-page .client-download-card .cdc-info .cdc-meta .cdc-meta-item {
    font-size: 13px;
    color: #463d3a;
    padding: 0 22px;
    border-right: 1px solid rgba(123, 110, 99, .25)
}

body.download-page .client-download-card .cdc-info .cdc-meta .cdc-meta-item:first-child {
    padding-left: 0
}

body.download-page .client-download-card .cdc-info .cdc-meta .cdc-meta-item:last-child {
    border-right: 0
}

body.download-page .client-download-card .cdc-info .cdc-meta .cdc-meta-item b {
    display: block;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1px;
    color: #0e4e8f;
    text-transform: uppercase;
    margin-bottom: 3px
}

body.download-page .client-download-card .cdc-action {
    text-align: center;
    min-width: 270px
}

body.download-page .client-download-card .cdc-action .cdc-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 270px;
    height: 84px;
    background-image: url(../img/header-button.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    margin-bottom: 14px;
    transition: .2s
}

body.download-page .client-download-card .cdc-action .cdc-button:hover {
    filter: brightness(115%);
    transform: translateY(-1px)
}

body.download-page .client-download-card .cdc-action .cdc-button span {
    position: relative;
    top: -4px;
    font-size: 18px;
    font-weight: bold;
    color: #33211d;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    text-shadow: .454px .891px 1px #fceca0
}

body.download-page .client-download-card .cdc-action .cdc-os-row {
    display: flex;
    gap: 22px;
    justify-content: center;
    margin-bottom: 10px
}

body.download-page .client-download-card .cdc-action .cdc-os-row .cdc-os {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 12px;
    color: #7b6e63;
    font-weight: 600
}

body.download-page .client-download-card .cdc-action .cdc-os-row .cdc-os img {
    width: 18px;
    height: 18px;
    object-fit: contain
}

body.download-page .client-download-card .cdc-action .cdc-checksum {
    font-size: 10px;
    color: #999695;
    letter-spacing: .5px;
    font-family: monospace
}

body.download-page .client-download-card .cdc-action .cdc-checksum a {
    color: #0e4e8f;
    font-weight: 600;
    transition: color .2s
}

body.download-page .client-download-card .cdc-action .cdc-checksum a:hover {
    color: #168cff;
    text-decoration: underline
}

body.download-page .mirrors-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    max-width: 1280px;
    margin: 0 auto 30px
}

body.download-page .mirrors-grid .mirror-card {
    background-image: url("../img/news-bg.jpg");
    background-image: image-set(url("../img/news-bg.webp") type("image/webp"), url("../img/news-bg.jpg") type("image/jpeg"));
    background-size: cover;
    outline: 1px solid #1f1311;
    border: 1px solid #d8b888;
    padding: 28px 20px 22px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: .2s
}

body.download-page .mirrors-grid .mirror-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(52, 19, 19, .25)
}

body.download-page .mirrors-grid .mirror-card .mc-icon {
    width: 60px;
    height: 60px;
    margin-bottom: 12px
}

body.download-page .mirrors-grid .mirror-card .mc-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    outline: 1px solid #1f1311;
    border: 1px solid #f7d58a
}

body.download-page .mirrors-grid .mirror-card .mc-name {
    font-size: 15px;
    font-weight: 700;
    color: #463d3a;
    margin-bottom: 4px;
    font-family: "aAbsoluteEmpire", "Open Sans", sans-serif;
    letter-spacing: .5px
}

body.download-page .mirrors-grid .mirror-card .mc-desc {
    font-size: 11px;
    color: #7b6e63;
    margin-bottom: 14px;
    min-height: 16px
}

body.download-page .mirrors-grid .mirror-card .mc-cta {
    width: 100%;
    height: 40px;
    background-image: url(../img/rank-button.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center
}

body.download-page .mirrors-grid .mirror-card .mc-cta span {
    position: relative;
    top: -3px;
    font-size: 12px;
    font-weight: 700;
    color: #33211d;
    text-transform: uppercase;
    text-shadow: .454px .891px 1px #fceca0
}

body.download-page .mirrors-grid .mirror-card.mirror-card-disabled {
    pointer-events: none;
    filter: grayscale(1) brightness(0.92);
    opacity: .7
}

body.download-page .install-steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    max-width: 1280px;
    margin: 0 auto 30px
}

body.download-page .install-steps .step-card {
    background-image: url("../img/news-bg.jpg");
    background-image: image-set(url("../img/news-bg.webp") type("image/webp"), url("../img/news-bg.jpg") type("image/jpeg"));
    background-size: cover;
    outline: 1px solid #1f1311;
    border: 1px solid #d8b888;
    padding: 25px 22px 28px;
    position: relative;
    text-align: center
}

body.download-page .install-steps .step-card .sc-number {
    font-family: "aAbsoluteEmpire", "Open Sans", sans-serif;
    font-size: 44px;
    color: #0e4e8f;
    line-height: 1;
    margin-bottom: 10px;
    text-shadow: 0 2px 0 rgba(42, 16, 12, .18), 0 0 18px rgba(22, 140, 255, .25)
}

body.download-page .install-steps .step-card .sc-title {
    font-size: 16px;
    font-weight: 700;
    color: #463d3a;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 1px
}

body.download-page .install-steps .step-card .sc-desc {
    font-size: 12px;
    color: #7b6e63;
    line-height: 1.55
}

body.download-page .install-steps .step-card .sc-desc b {
    color: #d94c43;
    font-weight: 700
}

body.download-page .install-steps .step-card .sc-desc code {
    font-family: monospace;
    font-size: 11px;
    background: rgba(40, 27, 23, .08);
    padding: 1px 5px;
    color: #463d3a
}

body.download-page .req-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 25px;
    max-width: 1280px;
    margin: 0 auto 30px
}

body.download-page .req-cards .req-card {
    background-image: url("../img/news-bg.jpg");
    background-image: image-set(url("../img/news-bg.webp") type("image/webp"), url("../img/news-bg.jpg") type("image/jpeg"));
    background-size: cover;
    outline: 1px solid #1f1311;
    border: 1px solid #d8b888;
    padding: 25px 30px 30px
}

body.download-page .req-cards .req-card .rc-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 12px;
    margin-bottom: 14px;
    border-bottom: 1px solid rgba(123, 110, 99, .2)
}

body.download-page .req-cards .req-card .rc-head img {
    width: 10px;
    height: 10px
}

body.download-page .req-cards .req-card .rc-head span {
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 2px;
    color: #463d3a;
    text-transform: uppercase
}

body.download-page .req-cards .req-card .rc-list {
    list-style: none;
    padding: 0;
    margin: 0
}

body.download-page .req-cards .req-card .rc-list li {
    display: grid;
    grid-template-columns: 100px 1fr;
    gap: 10px;
    padding: 7px 0;
    font-size: 13px;
    color: #463d3a;
    border-bottom: 1px solid rgba(123, 110, 99, .1)
}

body.download-page .req-cards .req-card .rc-list li:last-child {
    border-bottom: 0
}

body.download-page .req-cards .req-card .rc-list li b {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1px;
    color: #0e4e8f;
    text-transform: uppercase;
    align-self: center
}

body.download-page .req-cards .req-card.req-card-rec {
    border-color: #168cff;
    box-shadow: 0 0 25px rgba(22, 140, 255, .25)
}

body.download-page .req-cards .req-card.req-card-rec .rc-head span {
    color: #0e4e8f
}

@media(max-width: 1100px) {
    body.download-page .client-download-card {
        grid-template-columns: 160px 1fr;
        gap: 30px;
        padding: 30px 35px
    }

    body.download-page .client-download-card .cdc-logo img {
        max-width: 160px
    }

    body.download-page .client-download-card .cdc-info .cdc-title {
        font-size: 34px
    }

    body.download-page .client-download-card .cdc-info .cdc-tagline {
        display: none
    }

    body.download-page .client-download-card .cdc-action {
        grid-column: 1/-1;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 25px;
        min-width: 0;
        padding-top: 22px;
        margin-top: 4px;
        border-top: 1px solid rgba(123, 110, 99, .2)
    }

    body.download-page .client-download-card .cdc-action .cdc-button {
        margin-bottom: 0
    }

    body.download-page .client-download-card .cdc-action .cdc-os-row {
        margin-bottom: 0
    }

    body.download-page .mirrors-grid {
        grid-template-columns: repeat(2, 1fr)
    }

    body.download-page .install-steps {
        grid-template-columns: repeat(2, 1fr)
    }
}

@media(max-width: 768px) {
    body.download-page .client-download-card {
        grid-template-columns: 1fr;
        text-align: center;
        padding: 25px 20px;
        gap: 18px
    }

    body.download-page .client-download-card .cdc-logo {
        justify-self: center
    }

    body.download-page .client-download-card .cdc-logo img {
        max-width: 130px
    }

    body.download-page .client-download-card .cdc-info {
        text-align: center
    }

    body.download-page .client-download-card .cdc-info .cdc-title {
        font-size: 28px
    }

    body.download-page .client-download-card .cdc-info .cdc-meta {
        justify-content: center
    }

    body.download-page .client-download-card .cdc-info .cdc-meta .cdc-meta-item {
        padding: 0 14px;
        font-size: 12px
    }

    body.download-page .client-download-card .cdc-action {
        grid-column: auto;
        flex-direction: column;
        gap: 12px;
        padding-top: 18px;
        margin-top: 0
    }

    body.download-page .client-download-card .cdc-action .cdc-button {
        width: 240px;
        height: 74px
    }

    body.download-page .client-download-card .cdc-action .cdc-button span {
        font-size: 16px
    }

    body.download-page .mirrors-grid {
        gap: 10px
    }

    body.download-page .install-steps {
        grid-template-columns: 1fr;
        gap: 12px
    }

    body.download-page .req-cards {
        grid-template-columns: 1fr;
        gap: 15px
    }
}

@media(max-width: 480px) {
    body.download-page .mirrors-grid {
        grid-template-columns: 1fr
    }

    body.download-page .mirrors-grid .mirror-card {
        padding: 22px 18px 18px
    }

    body.download-page .client-download-card .cdc-info .cdc-title {
        font-size: 24px
    }

    body.download-page .client-download-card .cdc-info .cdc-meta .cdc-meta-item {
        padding: 0 10px;
        font-size: 11px
    }
}

.error-page .pixarts-site-content {
    padding-bottom: 720px
}

.error-page .pixarts-container.relative {
    position: relative;
    z-index: 2
}

.error-page .page-404 {
    position: relative;
    max-width: 980px;
    margin: 60px auto 80px;
    padding: 70px 50px 80px;
    text-align: center;
    isolation: isolate;
    background: radial-gradient(ellipse 80% 60% at 50% 30%, rgba(20, 30, 60, 0.55) 0%, rgba(8, 12, 28, 0.85) 70%), linear-gradient(180deg, rgba(8, 12, 28, 0.7) 0%, rgba(4, 8, 22, 0.85) 100%);
    border: 1px solid rgba(214, 173, 109, .22);
    outline: 1px solid rgba(10, 16, 38, .6);
    border-radius: 12px;
    box-shadow: 0 30px 70px rgba(2, 5, 18, .65), 0 0 0 1px rgba(214, 173, 109, .06), inset 0 1px 0 hsla(0, 0%, 100%, .05)
}

.error-page .page-404-glow {
    position: absolute;
    inset: 8% 12%;
    background: radial-gradient(ellipse 60% 55% at 50% 35%, rgba(22, 140, 255, 0.18) 0%, transparent 60%), radial-gradient(ellipse 50% 40% at 50% 65%, rgba(214, 173, 109, 0.1) 0%, transparent 65%);
    filter: blur(20px);
    z-index: -1;
    pointer-events: none
}

.error-page .page-404-ornament {
    position: absolute;
    top: -10px;
    width: 180px;
    height: 180px;
    opacity: .35;
    pointer-events: none;
    z-index: -1;
    background: radial-gradient(circle at 50% 50%, rgba(214, 173, 109, 0.5) 0%, rgba(214, 173, 109, 0.1) 30%, transparent 70%);
    filter: blur(4px);
    animation: page404OrnamentFloat 8s ease-in-out infinite
}

.error-page .page-404-ornament-left {
    left: -40px
}

.error-page .page-404-ornament-right {
    right: -40px;
    animation-delay: 1.2s
}

@keyframes page404OrnamentFloat {

    0%,
    100% {
        transform: translateY(0) scale(1);
        opacity: .3
    }

    50% {
        transform: translateY(-8px) scale(1.05);
        opacity: .45
    }
}

.error-page .page-404-art {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 36px;
    line-height: 1;
    user-select: none
}

.error-page .page-404-digit {
    font-family: "aAbsoluteEmpire", "Open Sans", sans-serif;
    font-size: 180px;
    font-weight: 400;
    color: #f5e7c8;
    text-shadow: 0 4px 24px rgba(214, 173, 109, .55), 0 2px 0 rgba(0, 0, 0, .5);
    background: linear-gradient(180deg, #fff8e4 0%, #e8c987 35%, #c79a5b 70%, #8a5a14 100%);
    background-size: 100% 200%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: rgba(0, 0, 0, 0);
    animation: page404Glow 4s ease-in-out infinite
}

.error-page .page-404-digit-4:nth-child(1) {
    animation-delay: 0s
}

.error-page .page-404-digit-4:nth-child(3) {
    animation-delay: 1.5s
}

@keyframes page404Glow {

    0%,
    100% {
        background-position: 0 0;
        filter: drop-shadow(0 0 12px rgba(255, 200, 110, 0.35))
    }

    50% {
        background-position: 0 100%;
        filter: drop-shadow(0 0 24px rgba(255, 200, 110, 0.55))
    }
}

.error-page .page-404-digit-0 {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1em
}

.error-page .page-404-zero {
    position: relative;
    z-index: 1
}

.error-page .page-404-orbit {
    position: absolute;
    inset: 18%;
    border-radius: 50%;
    border: 2px solid rgba(0, 0, 0, 0);
    border-top-color: rgba(22, 140, 255, .65);
    border-right-color: rgba(124, 203, 255, .35);
    box-shadow: inset 0 0 28px rgba(22, 140, 255, .18), 0 0 22px rgba(22, 140, 255, .2);
    animation: page404Orbit 4s linear infinite
}

@keyframes page404Orbit {
    from {
        transform: rotate(0deg)
    }

    to {
        transform: rotate(360deg)
    }
}

.error-page .page-404-body {
    position: relative;
    max-width: 600px;
    margin: 0 auto
}

.error-page .page-404-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 18px
}

.error-page .page-404-eyebrow img {
    height: 14px;
    width: auto;
    opacity: .7
}

.error-page .page-404-eyebrow span {
    font-family: "aAbsoluteEmpire", "Open Sans", sans-serif;
    font-size: 14px;
    letter-spacing: 4px;
    color: #e8d5a8;
    text-transform: uppercase;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .5)
}

.error-page .page-404-title {
    margin: 0 0 16px;
    font-family: "aAbsoluteEmpire", "Open Sans", sans-serif;
    font-size: 38px;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: 1.5px;
    color: #f5e7c8;
    text-shadow: 0 3px 14px rgba(214, 173, 109, .35), 0 1px 0 rgba(0, 0, 0, .5)
}

.error-page .page-404-msg {
    margin: 0 0 28px;
    color: #cfd6e8;
    font-size: 15px;
    line-height: 1.7;
    text-shadow: 0 1px 4px rgba(0, 0, 0, .55)
}

.error-page .page-404-msg strong {
    color: #f5e7c8;
    font-weight: 700
}

.error-page .page-404-actions {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 22px;
    flex-wrap: wrap;
    margin-bottom: 36px
}

.error-page .page-404-actions .cdc-button {
    min-width: 240px
}

.error-page .page-404-actions .cm-secondary {
    color: #7ccbff;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .5px;
    text-decoration: none;
    transition: color .2s ease, text-shadow .2s ease
}

.error-page .page-404-actions .cm-secondary:hover {
    color: #ddf5ff;
    text-shadow: 0 0 12px rgba(22, 140, 255, .55)
}

.error-page .page-404-quick {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding-top: 26px;
    border-top: 1px solid rgba(214, 173, 109, .18);
    list-style: none
}

.error-page .page-404-quick li a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 18px;
    background: hsla(0, 0%, 100%, .03);
    border: 1px solid rgba(124, 203, 255, .18);
    border-radius: 999px;
    color: #cfd6e8;
    font-size: 12.5px;
    font-weight: 600;
    text-decoration: none;
    transition: background .2s ease, color .2s ease, transform .2s ease, border-color .2s ease, box-shadow .2s ease
}

.error-page .page-404-quick li a img {
    width: 16px;
    height: 16px;
    opacity: .55;
    transition: opacity .2s ease
}

.error-page .page-404-quick li a:hover {
    background: rgba(40, 64, 110, .32);
    color: #ddf5ff;
    border-color: rgba(124, 203, 255, .5);
    transform: translateY(-2px);
    box-shadow: 0 6px 18px -6px rgba(22, 140, 255, .35)
}

.error-page .page-404-quick li a:hover img {
    opacity: 1
}

@media(max-width: 768px) {
    .error-page .pixarts-site-content {
        padding-bottom: 320px
    }

    .error-page .page-404 {
        margin: 30px 16px 50px;
        padding: 40px 22px 50px
    }

    .error-page .page-404-digit {
        font-size: 110px
    }

    .error-page .page-404-art {
        gap: 4px;
        margin-bottom: 24px
    }

    .error-page .page-404-title {
        font-size: 26px
    }

    .error-page .page-404-msg {
        font-size: 13.5px
    }

    .error-page .page-404-actions {
        gap: 14px;
        flex-direction: column
    }

    .error-page .page-404-actions .cdc-button {
        min-width: 220px
    }

    .error-page .page-404-ornament {
        display: none
    }
}

@media(prefers-reduced-motion: reduce) {

    .error-page .page-404-digit,
    .error-page .page-404-ornament,
    .error-page .page-404-orbit {
        animation: none !important
    }
}

@media(max-width: 1024px) {
    .shop-grid {
        grid-template-columns: repeat(3, 1fr)
    }

    .download-grid {
        grid-template-columns: 1fr;
        max-width: 600px
    }
}

@media(max-width: 768px) {
    .shop-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
        padding: 15px 15px 30px
    }

    .shop-grid .shop-item {
        padding: 8px 8px 12px
    }

    .shop-grid .shop-item .shop-item-info .shop-item-name {
        font-size: 12px;
        min-height: 30px
    }

    .shop-grid .shop-item .shop-item-info .shop-item-desc {
        display: none
    }

    .shop-grid .shop-item .shop-item-info .shop-item-price {
        font-size: 14px
    }

    .shop-grid .shop-item .shop-buy {
        width: 90px;
        height: 32px
    }

    .shop-grid .shop-item .shop-buy span {
        font-size: 11px
    }

    .download-grid {
        gap: 15px
    }

    .download-grid .download-card {
        padding: 25px 18px
    }

    .faq-list {
        padding: 10px 15px 30px
    }
}

@media(max-width: 1280px) {
    .wrapper {
        width: 100%;
        min-width: 0;
        overflow-x: clip
    }

    .pixarts-container {
        width: 100%;
        max-width: 1280px;
        padding: 0 20px;
        box-sizing: border-box
    }

    .pixarts-header {
        min-width: 0;
        height: auto;
        padding-bottom: 60px
    }

    .pixarts-nav {
        width: 100%;
        max-width: 100%
    }

    .pixarts-nav .l-menu,
    .pixarts-nav .r-menu,
    .pixarts-nav .nav-auth {
        min-width: 0;
        width: auto
    }

    .footer:after,
    .footer .bottom-footer:before {
        width: 100%;
        left: 0;
        background-size: cover
    }
}

@media(max-width: 1024px) {
    .pixarts-header {
        height: auto;
        min-height: 720px
    }

    .pixarts-nav {
        width: 100%
    }

    .pixarts-nav .l-menu,
    .pixarts-nav .r-menu {
        min-width: 0;
        width: auto
    }

    .pixarts-nav .l-menu a,
    .pixarts-nav .r-menu a {
        margin: 0 15px
    }

    .pixarts-nav .l-menu a span,
    .pixarts-nav .r-menu a span {
        font-size: 13px
    }

    .pixarts-nav .nav-auth {
        min-width: 0;
        width: auto;
        gap: 12px
    }

    .pixarts-site-content .news-section-holder {
        top: 0;
        flex-direction: column;
        align-items: center
    }

    .pixarts-site-content .news-section-holder .banner-character {
        display: none
    }

    .pixarts-site-content .news-section-holder .side-addon {
        position: static;
        bottom: auto;
        margin: 18px 14px 0;
        right: auto
    }

    .widget {
        width: 100%;
        max-width: 647px
    }

    .newsbox {
        margin-left: 0;
        margin-right: 0
    }

    .side-buttons {
        flex-direction: row;
        flex-wrap: nowrap;
        width: 100%;
        max-width: 647px;
        min-width: 0;
        margin-top: 30px;
        background: none;
        gap: 12px
    }

    .side-buttons a {
        flex: 1 1 0;
        min-width: 0;
        height: auto;
        aspect-ratio: 156/140
    }

    .side-buttons a img {
        position: relative;
        left: auto;
        top: auto;
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block
    }

    .side-addon {
        position: relative !important;
        right: auto !important;
        bottom: auto !important;
        margin-top: 30px;
        justify-content: center;
        text-align: center;
        flex-wrap: wrap
    }

    .rank-section-holder {
        flex-direction: column;
        gap: 30px;
        padding-bottom: 200px
    }

    .rank-section-holder .widget.ranking {
        width: 100%;
        max-width: 647px;
        margin: 0 auto
    }
}

@media(max-width: 1280px) {
    .footer .banner-section {
        flex-direction: column;
        align-items: center;
        gap: 18px
    }

    .footer .banner-section .small-banner,
    .footer .banner-section .big-banner {
        width: 100%;
        min-width: 0;
        height: auto;
        margin: 0 auto;
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        overflow: hidden
    }

    .footer .banner-section .small-banner {
        max-width: 404px;
        aspect-ratio: 404/140
    }

    .footer .banner-section .big-banner {
        max-width: 846px;
        aspect-ratio: 846/140
    }
}

@media(max-width: 768px) {
    body {
        font-size: 13px
    }

    .pixarts-container {
        padding: 0 12px
    }

    .pixarts-nav {
        display: none
    }

    .pixarts-nav.mobile-open {
        display: flex;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        background: rgba(2, 7, 18, .97);
        z-index: 9000;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 80px 20px 40px;
        box-sizing: border-box;
        overflow-y: auto;
        gap: 20px
    }

    .pixarts-nav.mobile-open:before {
        display: none
    }

    .pixarts-nav.mobile-open .logo-head {
        display: none
    }

    .pixarts-nav.mobile-open .hero-rise,
    .pixarts-nav.mobile-open .l-menu,
    .pixarts-nav.mobile-open .r-menu,
    .pixarts-nav.mobile-open .nav-auth {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important
    }

    .pixarts-nav.mobile-open .l-menu,
    .pixarts-nav.mobile-open .r-menu {
        flex-direction: column;
        width: 100%;
        min-width: 0;
        gap: 25px
    }

    .pixarts-nav.mobile-open .l-menu a,
    .pixarts-nav.mobile-open .r-menu a {
        margin: 0;
        padding: 8px 0;
        text-align: center;
        width: 100%
    }

    .pixarts-nav.mobile-open .l-menu a:after,
    .pixarts-nav.mobile-open .r-menu a:after {
        display: none
    }

    .pixarts-nav.mobile-open .l-menu a img,
    .pixarts-nav.mobile-open .r-menu a img {
        position: relative;
        left: auto;
        top: auto;
        width: 32px;
        height: 32px;
        vertical-align: middle;
        margin-right: 10px
    }

    .pixarts-nav.mobile-open .l-menu a span,
    .pixarts-nav.mobile-open .r-menu a span {
        margin-left: 0;
        font-size: 16px
    }

    .pixarts-nav.mobile-open .nav-auth {
        flex-direction: column;
        width: 100%;
        gap: 16px;
        margin-top: 10px
    }

    .pixarts-nav.mobile-open .nav-login {
        font-size: 16px;
        text-align: center
    }

    .pixarts-nav.mobile-open .nav-button {
        align-self: center
    }

    .mobile-nav-toggle {
        display: flex
    }

    .mobile-header-logo {
        display: block
    }

    .pixarts-header {
        min-height: 0;
        padding-top: 80px;
        padding-bottom: 40px
    }

    .pixarts-header-contents .logo {
        position: relative;
        left: auto;
        top: auto;
        width: 100%;
        max-width: 280px;
        height: auto;
        margin: 0 auto
    }

    .pixarts-header-contents .logo img {
        width: 100%;
        height: auto
    }

    .pixarts-header-contents .elements-holder {
        flex-direction: column;
        margin: 25px auto 0;
        align-items: center;
        gap: 15px
    }

    .pixarts-header-contents .elements-holder .header-button {
        transform: scale(0.95)
    }

    .pixarts-header-contents .elements-holder .os_info {
        margin-left: 0;
        justify-content: center
    }

    .modal_holder .auth_modal {
        width: 95%;
        max-width: 420px
    }

    .modal_holder .auth_modal:after {
        display: none
    }

    .modal_holder .auth_modal .auth_content {
        padding-left: 18px;
        padding-right: 18px
    }

    .modal_holder .auth_modal .auth_content .form_field.half {
        max-width: 100%;
        width: 100%
    }

    .modal_holder .auth_modal .auth_content .addons {
        flex-direction: column;
        gap: 8px;
        text-align: center
    }

    .modal_holder .auth_modal .auth_content .addons .option {
        font-size: 12px
    }

    .modal_holder .auth_modal .widget-head {
        margin: 0 18px
    }

    .widget {
        max-width: 100%
    }

    .widget .widget-head {
        height: auto;
        flex-direction: column;
        margin: 0 15px;
        padding-top: 15px
    }

    .widget .widget-head .w-title {
        justify-content: center;
        flex-wrap: wrap;
        margin-bottom: 10px
    }

    .widget .widget-head .w-title .wt {
        font-size: 13px
    }

    .widget .widget-head .w-title .w-h-link {
        margin-left: 15px;
        padding-left: 15px
    }

    .widget .widget-head .w-nav {
        margin: 0 auto;
        justify-content: center;
        flex-wrap: wrap
    }

    .widget .widget-head .w-nav .nav-item {
        padding: 8px 10px;
        font-size: 12px
    }

    .widget .widget-head .w-nav .nav-item:after {
        display: none
    }

    .widget .widget-head .w-nav .nav-item.active span {
        color: #d9a36a;
        border-bottom: 1px solid #d9a36a
    }

    .widget:after {
        width: 100% !important;
        left: 0 !important;
        background-size: contain !important;
        background-position: bottom
    }

    .widget .media {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scroll-padding: 0 15px;
        padding: 0 15px 24px;
        gap: 10px;
        scrollbar-width: none
    }

    .widget .media::-webkit-scrollbar {
        display: none
    }

    .widget .media a {
        flex: 0 0 82%;
        scroll-snap-align: center;
        display: block;
        width: auto;
        transition: .2s
    }

    .widget .media a:hover {
        transform: none
    }

    .widget .media a img {
        width: 100%;
        height: auto;
        display: block;
        aspect-ratio: 4/3;
        object-fit: cover
    }

    .newsbox {
        top: 0
    }

    .newsbox .news-item {
        padding: 18px 15px
    }

    .newsbox .news-item .ni-opener {
        align-items: flex-start
    }

    .newsbox .news-item .ni-opener .avatar {
        min-width: 61px
    }

    .newsbox .news-item .ni-opener .avatar:after {
        display: none
    }

    .newsbox .news-item .ni-opener .ni .ni-title {
        font-size: 13px;
        white-space: normal;
        width: auto;
        line-height: 1.3
    }

    .newsbox .news-item .ni-contents {
        font-size: 12px;
        line-height: 20px
    }

    .side-buttons {
        top: 30px;
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        align-items: center;
        gap: 14px;
        width: 100%;
        max-width: 360px;
        margin: 30px auto 0
    }

    .side-buttons a {
        flex: none;
        width: 100%;
        max-width: 360px;
        height: auto;
        aspect-ratio: 156/140
    }

    .side-buttons a img {
        position: relative;
        left: auto;
        top: auto;
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block
    }

    .separate-sections {
        margin-top: 40px;
        margin-bottom: 30px
    }

    .separate-sections strong {
        font-size: 14px;
        padding: 0 15px
    }

    .separate-sections img {
        max-width: 30%;
        height: auto
    }

    .rank-section-holder {
        padding-bottom: 120px
    }

    .rank-section-holder .widget .ranking-contents .thead,
    .rank-section-holder .widget .ranking-contents .tfield {
        padding-left: 15px;
        padding-right: 15px;
        font-size: 12px
    }

    .rank-section-holder .widget .ranking-contents .thead .level,
    .rank-section-holder .widget .ranking-contents .tfield .level {
        display: none
    }

    .rank-section-holder .widget .ranking-contents .order {
        min-width: 24px
    }

    .rank-section-holder .widget .ranking-contents .player,
    .rank-section-holder .widget .ranking-contents .guild,
    .rank-section-holder .widget .ranking-contents .leader {
        min-width: 0;
        flex: 1;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        padding-right: 6px
    }

    .rank-section-holder .widget .ranking-contents .kingdom {
        min-width: 70px;
        text-align: right;
        font-size: 11px
    }

    .rank-section-holder .widget .ranking-contents .show-more img {
        width: 30%;
        height: auto
    }

    .footer {
        margin-top: -120px;
        background: radial-gradient(ellipse 60% 40% at 50% 78%, rgba(22, 140, 255, 0.1) 0%, transparent 70%), linear-gradient(180deg, rgba(6, 22, 46, 0) 0%, rgba(6, 22, 46, 0.45) 60px, #06162E 130px, #04101F 220px, #020712 100%);
        padding-top: 120px;
        padding-bottom: 0
    }

    .footer:after {
        opacity: .35;
        mix-blend-mode: screen
    }

    .footer .banner-section {
        margin-top: -80px;
        margin-bottom: 35px;
        padding: 0 14px;
        gap: 14px;
        position: relative;
        z-index: 2
    }

    .footer .banner-section .small-banner,
    .footer .banner-section .big-banner {
        height: auto;
        border: 1px solid rgba(14, 78, 143, .55);
        box-shadow: 0 6px 22px rgba(0, 0, 0, .45), 0 0 30px rgba(22, 140, 255, .08);
        transition: .2s
    }

    .footer .banner-section .small-banner:hover,
    .footer .banner-section .big-banner:hover {
        border-color: #168cff;
        box-shadow: 0 8px 26px rgba(0, 0, 0, .55), 0 0 35px rgba(22, 140, 255, .25)
    }

    .footer .banner-section .small-banner .b-title,
    .footer .banner-section .small-banner .b-desc,
    .footer .banner-section .big-banner .b-title,
    .footer .banner-section .big-banner .b-desc {
        padding-left: 100px;
        padding-right: 18px
    }

    .footer .banner-section .small-banner .b-title,
    .footer .banner-section .big-banner .b-title {
        font-size: 18px
    }

    .footer .banner-section .small-banner .b-desc,
    .footer .banner-section .big-banner .b-desc {
        font-size: 11px;
        line-height: 1.35
    }

    .footer .footer-mobile-cta {
        display: block;
        position: relative;
        z-index: 2;
        margin: -40px 18px 30px;
        padding: 28px 22px 24px;
        background: linear-gradient(180deg, rgba(88, 101, 242, 0.18) 0%, rgba(88, 101, 242, 0.06) 60%, rgba(6, 22, 46, 0.6) 100%);
        border: 1px solid rgba(124, 138, 255, .32);
        border-radius: 12px;
        text-align: center;
        overflow: hidden;
        box-shadow: 0 18px 40px -16px rgba(0, 0, 0, .55), 0 0 30px rgba(88, 101, 242, .1)
    }

    .footer .footer-mobile-cta .fmc-glow {
        position: absolute;
        inset: -40% -10% auto -10%;
        height: 140%;
        background: radial-gradient(ellipse 60% 50% at 50% 0%, rgba(88, 101, 242, 0.45) 0%, transparent 65%);
        pointer-events: none;
        z-index: 0;
        filter: blur(8px)
    }

    .footer .footer-mobile-cta .fmc-icon {
        position: relative;
        z-index: 1;
        color: #fff;
        filter: drop-shadow(0 0 14px rgba(124, 138, 255, 0.65));
        margin-bottom: 8px
    }

    .footer .footer-mobile-cta h3 {
        position: relative;
        z-index: 1;
        font-family: "aAbsoluteEmpire", "Open Sans", sans-serif;
        font-size: 24px;
        color: #ddf5ff;
        margin: 0 0 6px;
        letter-spacing: 2px;
        text-shadow: 0 2px 8px rgba(0, 0, 0, .55)
    }

    .footer .footer-mobile-cta p {
        position: relative;
        z-index: 1;
        font-size: 12.5px;
        line-height: 1.45;
        color: #cfd6e8;
        margin: 0 0 16px;
        max-width: 280px;
        margin-left: auto;
        margin-right: auto
    }

    .footer .footer-mobile-cta .fmc-btn {
        position: relative;
        z-index: 1;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 200px;
        padding: 13px 24px;
        background: linear-gradient(180deg, #5865f2 0%, #4752c4 100%);
        color: #fff;
        font-family: "Cinzel", "Open Sans", serif;
        font-size: 13px;
        font-weight: 700;
        letter-spacing: 1.4px;
        text-transform: uppercase;
        border: 1px solid hsla(0, 0%, 100%, .22);
        border-radius: 6px;
        box-shadow: 0 8px 22px -6px rgba(88, 101, 242, .55), inset 0 1px 0 hsla(0, 0%, 100%, .22);
        transition: transform .18s ease, filter .18s ease;
        text-decoration: none
    }

    .footer .footer-mobile-cta .fmc-btn:hover,
    .footer .footer-mobile-cta .fmc-btn:active {
        transform: translateY(-1px);
        filter: brightness(1.08)
    }

    .footer .footer-mobile-cta .fmc-stats {
        position: relative;
        z-index: 1;
        display: flex;
        justify-content: space-around;
        margin: 22px 0 0;
        padding: 0;
        list-style: none;
        border-top: 1px solid rgba(124, 138, 255, .18);
        padding-top: 16px
    }

    .footer .footer-mobile-cta .fmc-stats li {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 2px
    }

    .footer .footer-mobile-cta .fmc-stats strong {
        font-family: "aAbsoluteEmpire", "Open Sans", sans-serif;
        font-size: 17px;
        color: #7ccbff;
        letter-spacing: 1.5px
    }

    .footer .footer-mobile-cta .fmc-stats span {
        font-size: 10px;
        color: #98a4b3;
        text-transform: uppercase;
        letter-spacing: .8px
    }

    .footer .links-sections {
        position: relative;
        z-index: 2;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0;
        margin: 0 14px 30px;
        padding-top: 25px
    }

    .footer .links-sections a {
        padding: 13px 6px;
        font-size: 11.5px;
        color: #ddf5ff;
        text-align: center;
        text-shadow: 0 1px 2px rgba(0, 0, 0, .6);
        letter-spacing: .5px;
        transition: .2s;
        border-bottom: 1px solid rgba(124, 203, 255, .08)
    }

    .footer .links-sections a:nth-child(2n) {
        border-left: 1px solid rgba(124, 203, 255, .08)
    }

    .footer .links-sections a:nth-last-child(-n+2) {
        border-bottom: 0
    }

    .footer .links-sections a.active,
    .footer .links-sections a:hover {
        color: #7ccbff;
        text-shadow: 0 0 12px rgba(22, 140, 255, .55)
    }

    .footer .links-sections:before {
        content: "";
        grid-column: 1/-1;
        width: 60%;
        max-width: 280px;
        height: 1px;
        margin: 0 auto 18px;
        background: linear-gradient(90deg, transparent 0%, rgba(124, 203, 255, 0.55) 50%, transparent 100%)
    }

    .footer .logotype-separator {
        position: relative;
        z-index: 2;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 5px 12px 30px;
        margin: 0
    }

    .footer .logotype-separator:before {
        content: "";
        display: block;
        width: 60%;
        max-width: 280px;
        height: 1px;
        margin: 0 auto 22px;
        background: linear-gradient(90deg, transparent 0%, rgba(124, 203, 255, 0.55) 50%, transparent 100%)
    }

    .footer .logotype-separator .logotype {
        max-width: 72%;
        height: auto;
        margin: 0 14px;
        filter: drop-shadow(0 0 20px rgba(22, 140, 255, 0.55));
        width: 40% !important;
    }

    .footer .logotype-separator img:not(.logotype) {
        max-width: 18%;
        height: auto;
        opacity: .65
    }

    .footer .bottom-footer {
        position: relative;
        z-index: 2;
        flex-direction: column;
        height: auto;
        gap: 8px;
        padding: 22px 15px 24px;
        text-align: center;
        background: rgba(0, 0, 0, .4);
        border-top: 1px solid rgba(124, 203, 255, .2)
    }

    .footer .bottom-footer .info {
        padding: 2px 0;
        font-size: 10.5px;
        line-height: 1.5;
        color: #98a4b3;
        letter-spacing: .3px
    }

    .footer .bottom-footer .info a {
        color: #7ccbff
    }

    .footer .bottom-footer .info a:hover {
        text-decoration: underline
    }

    .footer .bottom-footer .info span {
        color: #7ccbff
    }

    .footer .bottom-footer .info.author {
        font-size: 10px;
        opacity: .85
    }

    .footer .bottom-footer:before {
        display: none
    }
}

@media(max-width: 480px) {
    .pixarts-header-contents .elements-holder .header-button {
        width: 180px;
        height: 62px;
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center
    }

    .pixarts-header-contents .elements-holder .header-button span {
        font-size: 13px
    }

    .widget .widget-head .w-nav .nav-item {
        padding: 6px 8px;
        font-size: 11px
    }

    .rank-section-holder .widget .ranking-contents .thead .guild,
    .rank-section-holder .widget .ranking-contents .tfield .guild {
        display: none
    }

    .footer .banner-section {
        padding: 0 10px;
        gap: 12px
    }

    .footer .banner-section .small-banner,
    .footer .banner-section .big-banner {
        height: auto
    }

    .footer .banner-section .small-banner .b-title,
    .footer .banner-section .big-banner .b-title {
        font-size: 14px;
        padding-left: 78px;
        padding-right: 14px;
        letter-spacing: -0.2px
    }

    .footer .banner-section .small-banner .b-desc,
    .footer .banner-section .big-banner .b-desc {
        padding-left: 78px;
        padding-right: 14px;
        font-size: 10px
    }
}