@import url("./components/accordion.css?v=01");
@import url("./components/alert.css?v=01");
@import url("./components/collapse.css?v=01");
@import url("./components/divider.css?v=01");
@import url("./components/dropdown.css?v=01");
@import url("./components/list.css?v=01");
@import url("./components/popover.css?v=01");
@import url("./components/progress.css?v=01");
@import url("./components/spoiler.css?v=01");
@import url("./components/stepper.css?v=2102");
@import url("./components/table.css?v=0111");
@import url("./components/tabs.css?v=01");
@import url("./components/timeline.css?v=01");
@import url("./components/title.css?v=01");
@import url("./components/tooltip.css?v=011011");
@import url("./components/item-row.css?v=01");
@import url("./components/media-card.css?v=001");
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html, body {
    height: 100%;
}

body {
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

img, picture, video, canvas, svg {
    display: block;
    max-width: 100%;
}

button, input, textarea, select {
    font: inherit;
    border: none;
    outline: none;
    background: none;
}

a {
    text-decoration: none;
    color: inherit;
}

ul, ol {
    list-style: none;
}

.menu-item {
    position: relative;
}

.menu-item.open {
    border-left: 0.1875rem solid rgba(212, 175, 55, 0.6);
}

.content {
    scroll-margin-top: 3.125rem;
}

.menu-item.open .left {
    color: #d4af37;
}

.menu-item .fa-chevron-down {
    transition: .3s ease;
}

.menu-item.open .fa-chevron-down {
    transform: rotate(180deg);
    color: #d4af37 !important;
}

.fa-chevron-down {
    color: rgba(255, 255, 255, 0.25) !important;
}

.menu-item i,
.submenu-item i {
    color: #b89448;
    opacity: .9;
    transition: .3s;
    min-width: 1.375rem;
}

.menu-item:hover i,
.submenu-item:hover i {
    color: #d4af37;
    opacity: 1;
}

.submenu-item.active i {
    color: rgba(255, 255, 255, 0.8);
}

.menu-item .fa-chevron-down {
    color: rgba(184, 148, 72, .7);
}

/* трек */
::-webkit-scrollbar-track {
    background: #0b141c;
}

/* ползунок */
::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #2a3a46, #1a2731);
    border-radius: 0.375rem;
    border: 0.0625rem solid rgba(184, 148, 72, .4);
}

/* hover */
::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #b89448, #7a5c28);
}

.wiki-container {
    width: 100%;
    padding: 0.625rem;
}

.compensate-for-scrollbar {
    display: flex !important;
}

.wrapper {
    position: relative;
    display: flex;
    width: 100%;
    max-width: 100rem;
    margin: 1rem auto 0 auto;
    background: #0b141c;
    border: 0.0625rem solid rgba(255, 255, 255, 0.15);
    box-shadow: 0 0 2.5rem rgba(0, 0, 0, .8);
    border-radius: .75rem;
}

.sidebar {
    width: 18rem;
    padding: 1.875rem 1.25rem;
    min-height: calc(100vh - 6.25rem);
    background: linear-gradient(180deg, rgba(15, 22, 30, .97), rgba(10, 15, 20, .97));
    border-right: 0.0625rem solid rgba(255, 255, 255, 0.15);
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    position: sticky;
    top: 3.5rem;
    align-self: flex-start;
    border-top-left-radius: 0.625rem;
}

h2 {
    font-family: 'Cinzel', serif;
    font-size: 1.25rem;
    text-align: center;
    color: #d4af37;
    letter-spacing: 0.125rem;
}

.menu-group {
    display: flex;
    flex-direction: column
}

.menu-item {
    padding: 0.75rem 0.625rem;
    cursor: pointer;
    border-left: 0.1875rem solid transparent;
    transition: .3s;
    background: rgba(255, 255, 255, .02);
    display: flex;
    font-size: 1rem;
    align-items: center;
    justify-content: space-between
}

.menu-item .left {
    display: flex;
    align-items: center;
    gap: 0.625rem
}

.menu-item:hover {
    background: rgba(212, 175, 55, .08);
    border-left: 0.1875rem solid #d4af37
}

.menu-item.active {
    background: rgba(212, 175, 55, .15);
    border-left: 0.1875rem solid #d4af37;
}

.submenu {
    max-height: 0;
    overflow: hidden;
    transition: .4s;
    display: flex;
    flex-direction: column;
    background: rgba(0, 0, 0, .25)
}

.submenu.open {
    max-height: 31.25rem;
}

.submenu-item {
    position: relative;
    padding: 0.625rem;
    cursor: pointer;
    font-size: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: .3s;
    border-left: 0.1875rem solid transparent
}

.submenu-item img, .img {
    width: 2rem;
    height: 2rem;
    object-fit: contain;
    display: inline-block;
    vertical-align: middle;
    filter: drop-shadow(0 0 0.125rem rgba(0,0,0,0.6));
    border: 0.0625rem solid rgba(212, 175, 55, 0.4);
    transition: transform .2s ease, filter .2s ease;
}

.submenu-item:hover img {
    transform: scale(1.08);
    filter: drop-shadow(0 0 0.25rem rgba(255,215,0,0.6));
}
.submenu-item:hover {
    background: rgba(212, 175, 55, .08);
    border-left: 0.1875rem solid #d4af37
}

.submenu-item.active {
    color: #d4af37;
    border-left: 0.1875rem solid #d4af37;
    background: rgba(212, 175, 55, .12)
}

.content {
    flex: 1;
    width: 100%;
    max-width: 82rem;
    padding: 1.5625rem;
    background: rgba(10, 15, 20, .85);
}

.section {
    display: none;
    animation: fade .4s ease
}

.section.active {
    display: block
}

.section h1 {
    font-family: 'Cinzel', serif;
    font-size: 1.625rem;
    margin-bottom: 1.25rem;
    color: #d4af37;
    text-align: center;
    letter-spacing: 0.13rem;
}

.card {
    background: rgba(15, 20, 28, .9);
    border: 0.0625rem solid rgba(255, 255, 255, 0.15);
    padding: 1.5625rem;
    margin-bottom: 1.25rem;
    transition: .3s
}

.card:hover {
    transform: translateY(-0.25rem);
}

@keyframes fade {
    from {
        opacity: 0;
        transform: translateY(0.625rem)
    }
    to {
        opacity: 1;
        transform: translateY(0)
    }
}

@media (max-width: 56.25rem) {
    .wrapper {
        flex-direction: column
    }

    .sidebar {
        width: 100%
    }

    .content {
        padding: 1.25rem
    }
}

/*    */
.wiki-header {
    text-align: center;
    padding: 1.125rem 1.25rem 0.875rem 0;
    background: #111c24;
    border: 0.0625rem solid rgba(255, 255, 255, 0.15);
}

.wiki-title-wrap h2 {
    font-family: 'Cinzel', serif;
    font-size: 1.25rem;
    letter-spacing: 0.125rem;
    color: #b89448;
    margin: 0;
}

.wiki-subtitle {
    font-size: 0.6875rem;
    letter-spacing: 0.125rem;
    color: rgba(255, 255, 255, .45);
}

.wiki-line {
    display: none;
}

.wiki-decor {
    width: 0.375rem;
    height: 0.375rem;
    background: #b89448;
    transform: rotate(45deg);
    box-shadow: 0 0 0.375rem rgba(212, 175, 55, .5);
}

/**/
.logo-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 3.4375rem;
    text-decoration: none;
    position: relative;
    font-family: 'Cinzel', serif;
    font-size: 1.25rem;
    letter-spacing: 0.125rem;
    color: #d4af37;
    background: linear-gradient(145deg, rgba(20, 30, 40, .95), rgba(10, 15, 20, .95));
    border: 0.0625rem solid rgba(212, 175, 55, .35);
    transition: .35s ease;
    overflow: hidden;
}

.logo-btn::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(212, 175, 55, .25), transparent);
    transform: translateX(-100%);
    transition: .6s ease;
}

.logo-btn:hover {
    color: #fff;
    border-color: #d4af37;
    box-shadow: 0 0 1.25rem rgba(212, 175, 55, .4);
}

.logo-btn:hover::before {
    transform: translateX(100%);
}

.logo-btn span {
    position: relative;
    z-index: 2;
}

/*ТАБЫ*/
.tabs {
    display: flex;
    justify-content: center;
    gap: 0.9375rem;
    margin-bottom: 1.875rem
}

.tabs button {
    padding: 0.625rem 1.5625rem;
    background: rgba(255, 255, 255, .05);
    border: 0.0625rem solid rgba(255, 255, 255, 0.15);
    color: #ccc;
    cursor: pointer;
    transition: .3s
}

.tabs button.active {
    background: rgba(184, 148, 72, .15);
    color: #b89448;
}

.accordion-item {
    background: rgba(15, 20, 28, .9);
    border: 0.0625rem solid rgba(255, 255, 255, 0.15);
    margin-bottom: 0.9375rem;
    overflow: hidden
}

.acc-header {
    display: flex;
    justify-content: space-between;
    padding: 0.9375rem 1.25rem;
    cursor: pointer;
    color: #d4af37
}

.acc-body {
    padding: 1.25rem;
    background: rgba(0, 0, 0, .3)
}

.info {
    margin-left: 0.625rem;
    background: #d4af37;
    border: none;
    color: #000;
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 50%;
    font-size: 0.75rem;
    cursor: pointer
}

.header-controls {
    display: flex;
    align-items: center;
    gap: 0.9375rem;
}

.dropdown {
    position: relative;
    min-width: 12.5rem;
    font-family: 'Cinzel', serif;
}

.dropdown-trigger {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.625rem 0.9375rem;
    background: linear-gradient(145deg, #0f1a22, #0b141c);
    border: 0.0625rem solid rgba(212, 175, 55, .4);
    color: #d4af37;
    cursor: pointer;
    transition: .3s;
}

.dropdown-trigger:hover {
    border-color: #d4af37;
    box-shadow: 0 0 0.75rem rgba(212, 175, 55, .4);
}

.dropdown .arrow {
    margin-left: auto;
    transition: .3s;
    font-size: 0.75rem;
}

.dropdown.open .arrow {
    transform: rotate(180deg);
}

.dropdown-menu {
    position: absolute;
    top: 110%;
    left: 0;
    width: 100%;
    background: linear-gradient(180deg, #0f1a22, #0b141c);
    border: 0.0625rem solid rgba(212, 175, 55, .4);
    box-shadow: 0 0.9375rem 2.1875rem rgba(0, 0, 0, .8);
    display: none;
    flex-direction: column;
    z-index: 1000;
}

.dropdown.open .dropdown-menu {
    display: flex;
}

.dropdown-item {
    padding: 0.625rem 0.9375rem;
    color: #b89448;
    cursor: pointer;
    transition: .25s;
}

.dropdown-item:hover {
    background: rgba(212, 175, 55, .1);
    color: #fff;
}

.dropdown-item.active {
    background: rgba(212, 175, 55, .15);
    color: #d4af37;
}

.lang-dropdown {
    min-width: 100%;
}

.lang-dropdown .dropdown-trigger {
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
}

.lang-dropdown .dropdown-item {
    font-size: 0.875rem;
}

.content-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.125rem 1.5rem;
    margin-bottom: 1.5625rem;

    background: linear-gradient(180deg, rgba(25, 30, 38, .95), rgba(18, 22, 28, .95));
    border: 0.0625rem solid rgba(255, 255, 255, .08);
    border-radius: 0.875rem;

    box-shadow: 0 0.625rem 1.5625rem rgba(0, 0, 0, .6);
}

.content-header-left {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.content-header-icon {
    width: 2.75rem;
    height: 2.75rem;
    display: flex;
    align-items: center;
    justify-content: center;

    background: linear-gradient(145deg, #1e2430, #141922);
    border: 0.0625rem solid rgba(212, 175, 55, .3);
    border-radius: 0.75rem;

    color: #d4af37;
    font-size: 1.125rem;
}

.menu-item i, .submenu-item i {
    font-size: 1.25rem !important;
}

.content-header-title {
    font-family: 'Cinzel', serif;
    font-size: 1.125rem;
    letter-spacing: 0.0625rem;
    color: #ffffff;
}

.item-title {
    font-size: 1.125rem;
}

.content-header-subtitle {
    font-size: 1rem;
    color: rgba(255, 255, 255, .45);
    margin-top: 0.25rem;
}

@media (max-width: 56.25rem) {

    .wiki-container {
        padding: 0.9375rem;
    }

    .wrapper {
        flex-direction: column;
        margin: 7.5rem 0 0 0;
        border-radius: 0.625rem;
    }

    .sidebar {
        position: relative;
        top: auto;
        align-self: auto;
        width: 100%;
        min-height: auto;
        border-right: none;
        border-bottom: 0.0625rem solid rgba(255, 255, 255, 0.1);
        padding: 1.25rem 0.9375rem;
    }

    .content {
        padding: 1.25rem 0.9375rem;
    }

    .menu-item {
        font-size: 0.9375rem;
        padding: 0.625rem 0.75rem;
    }

    .submenu-item {
        padding: 0.5rem 0.75rem;
    }

    .content-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.625rem;
        padding: 0.9375rem;
    }

    .content-header-title {
        font-size: 1rem;
    }

    .section h1 {
        font-size: 1.25rem;
        letter-spacing: 0.125rem;
    }

    .card {
        padding: 1.125rem;
    }
}
@media (min-width: 137.5rem) {
    .tippy-box[data-theme~='l2']{
        max-width: 25rem!important;
    }
}
.tippy-box[data-theme~='l2'] {
    background: linear-gradient(
            145deg,
            rgba(15, 20, 28, .98),
            rgba(10, 15, 20, .98)
    );
    border: 0.0625rem solid rgba(226, 185, 59, .6);
    font-size: 0.875rem;
    padding: 0.5rem 0.75rem;
    border-radius: 0.5rem;
    box-shadow: 0 0 1rem rgba(226, 185, 59, .25),
    inset 0 0 1rem rgba(0, 0, 0, .6);
    backdrop-filter: blur(0.25rem);
}
.gold-link{
    text-decoration:none;
    border-bottom:0.0625rem solid rgba(255,215,0,.6);
    padding-bottom:0.125rem;
    transition:.2s ease;
}

.gold-link:hover{
    border-bottom-color:rgba(255,215,0,1);
}
.tippy-box[data-theme~='l2'] .tippy-arrow {
    color: rgba(226, 185, 59, .6);
}
.submenu-group {
    display: flex;
    flex-direction: column;
}

.submenu-toggle {
    justify-content: space-between;
}

.submenu-chevron {
    margin-left: auto;
    font-size: 0.75rem !important;
    transition: .3s;
    color: rgba(184,148,72,.7);
}

.submenu-group.open .submenu-chevron {
    transform: rotate(180deg);
    color: #d4af37 !important;
}

.subsubmenu {
    max-height: 0;
    overflow: hidden;
    transition: .4s;
    display: flex;
    flex-direction: column;
    background: rgba(0,0,0,.35);
}

.submenu-group.open .subsubmenu {
    max-height: 25rem;
}

.subsubmenu-item {
    padding: 0.5rem 0.75rem 0.5rem 2rem;
    font-size: 0.95rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    border-left: 0.1875rem solid transparent;
    transition: .3s;
}

.subsubmenu-item:hover {
    background: rgba(212,175,55,.08);
    border-left: 0.1875rem solid #d4af37;
}

.subsubmenu-item.active {
    color: #d4af37;
    background: rgba(212,175,55,.12);
    border-left: 0.1875rem solid #d4af37;
}
.price-switcher{
    position:relative;
}

.price-height-probe{
    visibility:hidden;
    pointer-events:none;
}

.price-block{
    position:absolute;
    inset:0;
    opacity:0;
    pointer-events:none;
    transition:opacity .25s ease;
}

.price-block.active{
    opacity:1;
    pointer-events:auto;
}

/* stagger */
.price-item{
    opacity:0;
    transform:translateY(0.75rem);
}

.price-block.active .price-item{
    animation:priceFade .35s ease forwards;
}

.price-block.active .price-item:nth-child(1){animation-delay:0ms;}
.price-block.active .price-item:nth-child(2){animation-delay:80ms;}
.price-block.active .price-item:nth-child(3){animation-delay:160ms;}
.price-block.active .price-item:nth-child(4){animation-delay:240ms;}
.price-block.active .price-item:nth-child(5){animation-delay:320ms;}

@keyframes priceFade{
    to{
        opacity:1;
        transform:translateY(0);
    }
}