@font-face {
    font-family: 'TrajanSansPro-Regular';
    src: url("../fonts/TrajanSansPro-Regular.otf") format('opentype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'TrajanSansPro-Semibold';
    src: url("../fonts/TrajanSansPro-Semibold.otf") format('opentype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Montserrat-Regular';
    src: url("../fonts/Montserrat-Regular.ttf") format("truetype");
    font-style: normal;
    font-weight: normal;
}
@font-face {
    font-family: 'Montserrat-SemiBold';
    src: url("../fonts/Montserrat-SemiBold.ttf") format("truetype");
    font-style: normal;
    font-weight: normal;
}
@font-face {
    font-family: 'Lora-Regular';
    src: url("../fonts/Lora-Regular.ttf") format("truetype");
    font-style: normal;
    font-weight: normal;
}
@font-face {
    font-family: 'Lora-SemiBold';
    src: url("../fonts/Lora-SemiBold.ttf") format("truetype");
    font-style: normal;
    font-weight: normal;
}



:root {
    --color-primary: #ffd782;
    --color-secondary: #e1ce87;
    --color-background: #f5f7fa;
    --color-dark: #1e1e1e;
    --color-light: #ffffff;
    --color-accent: #ff6b6b;
    --accent-bg-color: rgb(149 111 0 / 90%);
    --color-gray: gray;
    --bgc-color: rgb(35 21 12 / 78%);
    --bg-form-head: rgb(209 163 0 / 40%);
    --bg-form-table: rgb(48 46 37 / 90%);
    --bg-dark: #24180f;
    --l2vex-public-glass: linear-gradient(135deg, rgb(28 15 8 / 58%) 0%, rgb(86 48 15 / 46%) 52%, rgb(38 22 14 / 58%) 100%);
    --l2vex-public-glow: radial-gradient(95% 130% at 78% 0%, rgb(162 83 27 / 22%) 0%, rgb(92 50 16 / 14%) 42%, rgb(20 12 8 / 8%) 100%);
    --l2vex-public-line: linear-gradient(135deg, rgb(248 194 100 / 54%) 0%, rgb(132 54 24 / 30%) 52%, rgb(255 224 157 / 34%) 100%);
    --l2vex-public-shadow: 0 24px 70px rgb(0 0 0 / 42%), inset 0 1px 0 rgb(255 224 162 / 10%);
    --l2vex-public-button: linear-gradient(90deg, rgb(62 34 12 / 70%) 0%, rgb(122 75 25 / 52%) 52%, rgb(70 38 17 / 70%) 100%);
    --l2vex-public-button-hover: linear-gradient(90deg, rgb(83 44 15 / 78%) 0%, rgb(154 91 29 / 62%) 52%, rgb(91 49 18 / 78%) 100%);
    --l2vex-public-cta-button: radial-gradient(130% 110% at 50% 0%, #ffe9bd 0%, #c9861d 62%, #f0b44e 100%);
    --l2vex-public-cta-button-hover: radial-gradient(130% 110% at 50% 0%, #fff3d2 0%, #dd9925 60%, #ffcb6b 100%);
    --l2vex-public-bg-overlay: linear-gradient(180deg, rgb(12 8 6 / 52%) 0%, rgb(20 12 8 / 62%) 58%, rgb(7 5 4 / 78%) 100%);

    --font-accent-regular: TrajanSansPro-Regular;
    --font-accent-bold: TrajanSansPro-Semibold;
    --font-regular: Lora-Regular;
    --font-bold: Lora-SemiBold;


    
    --sidebar-width: 250px;
    --container-padding: 30px;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
* {
    outline: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

html, body {
    margin: 0;
    height: 100%;
}
html {
    overflow-y: scroll;
    scrollbar-gutter: stable;
}
.wrapper {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
main {
    flex: 1;
}
body {
    font-family: var(--font-regular), sans-serif;
    background: #120F0D;
}

ul, li {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
p {
    margin: 0;
    color: #bebebe;
}
h3 {
    font-family: var(--font-accent-regular);
    color: #fff;
}
a {
    color: #fff;
    text-decoration: none;
}
small {
    color: #bebebe;
}

.content_all {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
.content_left {
    width: 48%;
    background-color: #28211a;
    border-radius: 12px;
}
.content_right {
    width: 48%;
    background-color: #28211a;
    border-radius: 12px;
}

.line {
    position: absolute;
    z-index: 1;
    width: 100%;
    gap: 37px;
    display: flex;
    align-items: center;
    top: -50px;
}
.line__def {
    width: -webkit-fill-available;
    background: rgb(73, 64, 56);
    height: 2px;
}
.line__center {
    width: 25px;
    height: 25px;
    border: 3px solid rgb(73, 64, 56);
    flex: 0 0 auto;
    transform: rotate(45deg);
}
.line__def {
    width: -webkit-fill-available;
    background: rgb(73, 64, 56);
    height: 2px;
}
.menu-footer {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-top: 30px;
}
.menu-footer a {
    font-size: 14px;
}



/*FORM START*/
select.form-control {
    
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;

    
    background: rgb(24 18 15 / 90%);
    border: 1px solid rgb(224 168 84 / 18%);
    border-radius: 12px;

    
    padding: 10px 36px 10px 12px;

    
    font-size: 14px;
    line-height: 1.4;
    color: #fff;

    
    cursor: pointer;

    
    transition: border-color 0.2s, box-shadow 0.2s;

    
    background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg width='10' height='6' viewBox='0 0 10 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23999'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
}

select.form-control:focus {
    outline: none;
    border-color: rgb(235 200 142 / 58%);
    box-shadow: 0 0 0 3px rgb(151 83 25 / 22%);
}

select.form-control option {
    padding: 8px;
    background-color: #241a14;
    color: #fff;
}
:focus-visible {
    outline: -webkit-focus-ring-color auto 0;
}
.form-control {
    box-sizing: border-box;
    background: rgb(24 18 15 / 90%);
    border: 1px solid rgb(224 168 84 / 18%);
    padding: 14px 20px;
    border-radius: 12px;
    width: 100%;
    color: #fff;
    box-shadow: inset 0 1px 0 rgb(255 222 164 / 5%);
}
.form-control::placeholder {
    font-size: 14px;
}
.form-group {
    margin-bottom: 30px;
}
.form-group:last-child {
    margin-bottom: 0;
}
.form-group label {
    color: #bebebe;
    font-size: 14px;
    display: flex;
    margin-bottom: 5px;
}

::-webkit-input-placeholder {
    -webkit-transition: opacity .2s ease-in-out, -webkit-transform .2s ease-in-out;
    -o-transition: opacity .2s ease-in-out, transform .2s ease-in-out;
    transition: opacity .2s ease-in-out, transform .2s ease-in-out, -webkit-transform .2s ease-in-out;
}
::-moz-placeholder {
    -webkit-transition: opacity .2s ease-in-out, -webkit-transform .2s ease-in-out;
    -o-transition: opacity .2s ease-in-out, transform .2s ease-in-out;
    transition: opacity .2s ease-in-out, transform .2s ease-in-out, -webkit-transform .2s ease-in-out;
}
:-moz-placeholder {
    -webkit-transition: opacity .2s ease-in-out, -webkit-transform .2s ease-in-out;
    -o-transition: opacity .2s ease-in-out, transform .2s ease-in-out;
    transition: opacity .2s ease-in-out, transform .2s ease-in-out, -webkit-transform .2s ease-in-out;
}
:-ms-input-placeholder {
    color: #7b7873;
    -webkit-transition: opacity .2s ease-in-out, -webkit-transform .2s ease-in-out;
    -o-transition: opacity .2s ease-in-out, transform .2s ease-in-out;
    transition: opacity .2s ease-in-out, transform .2s ease-in-out, -webkit-transform .2s ease-in-out;
}
:focus::-webkit-input-placeholder {
    opacity: 0;
    transform: translateX(20px);
}
:focus::-moz-placeholder {
    opacity: 0;
    transform: translateX(20px);
}
:focus:-moz-placeholder {
    opacity: 0;
    transform: translateX(20px);
}
:focus:-ms-input-placeholder {
    opacity: 0;
    -ms-transform: translateX(20px);
    transform: translateX(20px);
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
/*FORM END*/

.other-bg {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    z-index: -10;
    background-image: url("../img/l2vex-features-acp-bg-20260702.jpg");
    background-size: cover;
    background-position: 50%;
    background-repeat: no-repeat;
}
.other-bg::before,
.main-bg::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--l2vex-public-bg-overlay);
}
.other-bg--features-files {
    background-image: url("../img/l2vex-features-acp-bg-20260702.jpg");
    background-position: center top;
}
.other-bg--features-files::before {
    background: var(--l2vex-public-bg-overlay);
}
.other-bg--legal {
    background-image: url("../img/l2vex-legal-bg-20260702.jpg");
    background-position: center top;
}
.main-bg {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    z-index: -10;
    background-image: url("../img/l2vex-features-acp-bg-20260702.jpg");
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
}
.main-bg--home {
    background-image: url("../img/newbg-website.png");
}
.main-bg--home::before {
    background: linear-gradient(180deg, rgb(12 8 6 / 34%) 0%, rgb(20 12 8 / 44%) 58%, rgb(7 5 4 / 64%) 100%);
}
#main.home-hero {
    min-height: 865px;
}

.wrap {
    width: 1320px;
    margin-right: auto;
    margin-left: auto;
    padding-left: 15px;
    padding-right: 15px;
}



/*LANGUAGE*/
.nav__langs {
    position: relative;
    z-index: 1;
}
.nav__langs-item {
    cursor: pointer;
    height: 35px;
    padding: 0 5px;
    display: flex;
    align-items: center;
    font-size: 14px;
    line-height: 1em;
    color: #fff;
    text-transform: uppercase;
    transition: color 0.3s ease-in-out;
    gap: 10px;
}

.nav__langs-item:hover, .nav__langs-item.active {
    color: #fff;
}
.nav__langs-item img {
    width: 22px;
    aspect-ratio: 34/24;
    border-radius: 2px;
}
.nav__langs-item--current:after {
    content: "";
    width: 12px;
    aspect-ratio: 12 / 6;
    background: url("../img/lin2web/arrow.png");
    background-size: 100% 100%;
    transition: transform 0.3s ease-in-out;
}

.nav__langs-item.active:after {
    transform: scale(1, -1);
}
.nav__langs-stroke {
    list-style-type: none;
    position: absolute;
    z-index: 1;
    top: calc(100% + 5px);
    right: 0;
    display: none;
}
.nav__langs-stroke li:not(:first-child) {
    margin-top: 5px;
}
.nav__links {
    list-style-type: none;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-start;
    column-gap: 30px;
    margin-left: auto;
    position: relative;
    z-index: 2;
}
.nav__links-item {
    font-family: var(--primary-font), sans-serif;
    font-weight: 400;
    font-size: 15px;
    line-height: 1em;
    color: #fff;
    text-transform: uppercase;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
    column-gap: 6px;
    transition: color 0.3s ease-in-out;
}
.nav__links-item:hover {
    color: var(--brand-color);
}
.nav__links-item img {
    height: 16px;
}
.nav__switch {
    width: 34px;
    height: 34px;
    position: relative;
    cursor: pointer;
    background-color: rgba(255, 255, 255, 0.15);
    display: none;
    transition: background-color 0.3s ease-in-out, border 0.3s ease-in-out;
    z-index: 3;
    border-radius: 50%;
    margin-left: auto;
}
.nav__switch:hover {
    background-color: var(--brand-color);
}
.nav__switch:hover:after, .nav__switch:hover:before, .nav__switch:hover .nav__switch-item {
    background: #1c2227;
}
.nav__switch:hover .nav__switch-item {
    transform: scale(0.7, 1);
}
.nav__switch.active:after {
    transform: rotate(-135deg) scale(0.7, 1);
    top: calc((100% - 2px) / 2);
}
.nav__switch.active:before {
    transform: rotate(135deg) scale(0.7, 1);
    top: calc((100% - 2px) / 2);
}
.nav__switch.active .nav__switch-item {
    transform: scale(0, 1);
}
.nav__switch:after {
    content: "";
    width: calc(100% - 12px);
    height: 2px;
    background: #cdcfd1;
    position: absolute;
    transition: all 0.3s ease-in-out;
    top: 11px;
    left: 6px;
    transform: scale(0.7, 1);
}
.nav__switch:before {
    content: "";
    width: calc(100% - 12px);
    height: 2px;
    background: #cdcfd1;
    position: absolute;
    transition: all 0.3s ease-in-out;
    top: calc(100% - 13px);
    left: 6px;
    transform: scale(0.7, 1);
}
.nav__switch-item {
    width: calc(100% - 12px);
    height: 2px;
    background: #cdcfd1;
    position: absolute;
    top: calc((100% - 2px) / 2);
    left: 6px;
    transition: all 0.3s ease-in-out;
    transform: scale(0.7, 1);
}
/*LANG END*/

.header .wrap {
    position: relative;
}
.header {
    background-color: rgb(0 0 0 / 30%);
    border-bottom: 1px solid hsla(0, 0%, 63.9%, .4);
    position: sticky;
    top: 0;
    z-index: 100;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
.top_line {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    padding: 15px 0;
}
.top_line::before {
    content: "";
    pointer-events: none;
    background-image: url("../img/decor.png");
    background-color: transparent;
    background-size: cover;
    background-position: 50%;
    background-repeat: no-repeat;
    width: 65.3125rem;
    height: 4.25rem;
    position: absolute;
    left: calc(50% - 32.625rem);
    bottom: -2.875rem;
}
.gw-burger {
    display: none;
}
.top_menu {
    display: flex;
    align-items: center;
    gap: 30px;
}

.logo {
    display: block;
    text-align: center;
    margin-bottom: 30px;
}
.logo img {
    height: 130px;
}
.open-beta-countdown {
    width: min(100%, 520px);
    margin: 24px auto 0;
    padding: 18px 22px 17px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
}
.open-beta-countdown__eyebrow,
.open-beta-countdown__date,
.open-beta-countdown__grand {
    font-family: var(--font-accent-bold), sans-serif;
    text-transform: uppercase;
    color: #ffd782;
    text-shadow: 0 2px 16px rgb(0 0 0 / 58%);
}
.open-beta-countdown__eyebrow {
    font-size: 15px;
    letter-spacing: 0;
}
.open-beta-countdown__eyebrow.open-beta-countdown__eyebrow--live {
    font-size: 22px;
    line-height: 1.08;
}
.open-beta-countdown__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin-top: 13px;
}
.open-beta-countdown__item {
    min-width: 0;
    padding: 10px 8px 9px;
    border: 1px solid rgb(255 215 130 / 38%);
    border-radius: 7px;
    background: rgb(7 5 4 / 46%);
    box-shadow: inset 0 1px 0 rgb(255 224 157 / 8%);
}
.open-beta-countdown__item span {
    display: block;
    font-family: var(--font-accent-bold), sans-serif;
    font-size: 27px;
    line-height: 1;
    color: #fff0d4;
}
.open-beta-countdown__item small {
    display: block;
    margin-top: 5px;
    font-family: var(--font-bold), sans-serif;
    font-size: 10px;
    line-height: 1;
    text-transform: uppercase;
    color: rgb(255 255 255 / 78%);
}
.open-beta-countdown__date {
    margin-top: 7px;
    font-size: 13px;
    color: #fff0d4;
}
.main-text .open-beta-countdown__copy {
    margin-top: 9px;
    font-family: var(--font-regular), sans-serif;
    font-size: 13px;
    color: rgb(255 255 255 / 86%);
    text-shadow: 0 2px 14px rgb(0 0 0 / 52%);
}
.open-beta-countdown__divider {
    width: min(100%, 320px);
    height: 1px;
    margin: 13px auto 10px;
    background: linear-gradient(90deg, transparent, rgb(255 215 130 / 46%), transparent);
}
.open-beta-countdown__grand {
    font-size: 13px;
}
.main-text .logo--hero {
    margin-top: 8px;
    margin-bottom: 14px;
}
.main-text .logo--hero img {
    height: 168px;
    max-width: min(100%, 320px);
    object-fit: contain;
}
.main-text {
    padding-top: 170px;
    width: min(100%, 760px);
    margin-left: auto;
    margin-right: 260px;
    text-align: center;
    line-height: 1.5;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.main-text p {
    font-family: var(--font-accent-regular), sans-serif;
    font-size: 26px;
    color: #fff;
    text-shadow: 0 2px 18px rgb(0 0 0 / 55%);
}
h1 {
    font-family: var(--font-accent-bold), sans-serif;
    color: var(--color-primary);
    font-size: 30px;
}



.btn-main {
    position: relative;
    width: fit-content;
    overflow: hidden;
    cursor: pointer;
    padding: 22px 48px;
    border-radius: 16px;
    background: var(--l2vex-public-cta-button);
    border: 1px solid rgb(255 240 196 / 90%);
    box-shadow: 0 16px 34px rgb(0 0 0 / 34%), 0 0 24px rgb(240 180 78 / 22%), inset 0 1px 0 rgb(255 244 220 / 45%);
}
#main.home-hero .btn-main,
.top--right-menu .btn-red {
    background: var(--l2vex-public-cta-button);
    border-color: rgb(255 240 196 / 90%);
    box-shadow: 0 16px 34px rgb(0 0 0 / 34%), 0 0 24px rgb(240 180 78 / 22%), inset 0 1px 0 rgb(255 244 220 / 45%);
}
.top--right-menu .btn-red {
    color: #2b1400;
}
.top--right-menu .btn-red:hover {
    background: var(--l2vex-public-cta-button-hover);
}
.btn-main::before {
    content: none;
}
.btn-main::after {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    content: '';
    opacity: 0;
    transition: opacity 200ms ease-in-out;
    z-index: 1;
    background: var(--l2vex-public-cta-button-hover);
}
.btn-main .text {
    font-size: 20px;
    line-height: 140%;
}
.btn-main:hover::after {
    opacity: 1;
}
.btn-main .text {
    font-family: var(--font-accent-bold), sans-serif;
    font-size: 16px;
    line-height: 125%;
    color: #2b1400;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    position: relative;
}
.btn-wrapper {
    display: flex;
    justify-content: center;
    margin-top: 30px;
    text-align: center;
    transition: .4s opacity;
    margin-bottom: 60px;
}
.main-text .btn-wrapper {
    margin-top: 20px;
    margin-bottom: 72px;
}
.main-text .btn-main {
    min-width: 230px;
    padding: 20px 54px;
    border-radius: 12px;
}

table.rating {
    width: 100%;
    border-collapse: collapse;
    color: #d9c97f;
}
.rating .char-name {
    display: flex;
    align-items: center;
}
.char-name .clan-crest {
    margin-right: 5px;
}

table.rating thead th {
    background-color: transparent;
    font-size: 14px;
    text-align: left;
    padding: 8px;
    border-bottom: transparent;
    color: #fff;
    font-family: var(--font-accent-regular), sans-serif;
}

.socials {
    display: flex;
    align-items: flex-end;
    margin-top: 30px;
    margin-bottom: 30px;
    gap: 10px;
    justify-content: center;
}
.socials img {
    height: 76px;
}
.socials a:hover img {
    filter: brightness(1.1);
}


.rating.index tbody tr {
    height: 50px;
}

table.rating th {
    background-color: #2c2c2c;
    font-size: 14px;
    padding: 8px;
    border-bottom: 2px solid #d9c97f;
    text-align: center;
}

table.rating td {
    padding: 8px;
    border-bottom: 1px solid rgb(255 255 255 / 10%);
    text-align: left;
    font-size: 12px;
}
.rating .other {
    text-align: center;
}
.rating_place {
    width: 30px;
}

.rating tr:last-child td {
    border-bottom: transparent;
}
table.rating td:last-child {
    font-family: var(--font-bold), sans-serif;
    color: #ffd700;
}

.tabcontent {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    opacity: 0.5;
    visibility: hidden;
    transition: opacity 1s ease-in-out;
}

.tabcontent.active {
    position: relative;
    opacity: 1;
    visibility: visible;
}

.tabs {
    display: flex;
    justify-content: center;
    gap: 5px;
}
.tablink {
    font-family: var(--font-accent-bold), sans-serif;
    color: #fff4d6;
    font-size: 14px;
    background: var(--l2vex-public-button);
    border: 1px solid rgb(226 169 79 / 22%);
    padding: 5px 10px;
    cursor: pointer;
}
.tablink:hover {
    background: var(--l2vex-public-button-hover);
}
.tablink.active {
    background: var(--l2vex-public-button-hover);
    color: #fff;
}
.tablink:first-child {
    border-top-left-radius: 6px;
    border-bottom-left-radius: 6px;
}
.tablink:last-child {
    border-top-right-radius: 6px;
    border-bottom-right-radius: 6px;
}
.server_item {
    display: flex;
    align-items: center;
    gap: 20px;
    border-bottom: 1px solid rgb(255 255 255 / 10%);
    padding-bottom: 15px;
    margin-top: 15px;
    margin-bottom: 15px;
}
.server_item p {
    font-size: 12px;
}
.server_item img {
    height: 76px;
    margin-left: 10px;
}
.server_info {
    margin-right: 10px;
}
.server_online {
    font-family: var(--font-accent-regular), sans-serif;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 3px;
    color: #fff;
}
.server_name {
    color: #fff;
    font-family: var(--font-accent-bold), sans-serif;
}

.online {
    position: relative;
    margin-left: 25px;
}
.online::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 100%;
    left: -15px;
    position: absolute;
    background-color: #43ff43;
    bottom: 0;
    top: 0;
    display: flex;
    margin: auto;
}

.title_block_top {
    height: 70px;
    border-bottom: 1px solid rgb(255 255 255 / 10%);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 30px;
}
.rating_block {
    padding-left: 15px;
    padding-right: 15px;
    padding-bottom: 30px;
}

.nav-link {
    font-family: var(--font-accent-bold), sans-serif;
    font-size: 16px;
    display: flex;
    align-items: center;
    gap: 5px;
    line-height: 1;
    text-transform: uppercase;
}
.nav-link svg {
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
}
.nav-link:hover {
    color: var(--color-primary);
}
.nav-item.active .nav-link {
    color: var(--color-primary);
}
.top_right {
    display: flex;
    gap: 30px;
}

.news_all {
    display: flex;
    flex-direction: column;
    gap: 15px;
}
.news-item {
    background-color: #1e1915;
    border-radius: 6px;
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 0 15px;
}
.news_content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 0;
    width: 100%;
    gap: 15px;
}
.news_content p {
    font-size: 14px;
    color: #bebebe;
}
.news_title {
    font-family: var(--font-accent-regular), sans-serif;
    font-size: 14px;
    line-height: 1.1;
    color: #fff;
}
.news_img {
    min-width: 76px;
    height: 76px;
    background-position: center top;
    background-size: cover;
}
.news_date {
    font-size: 12px;
    color: #fff;
}
.news_content .link-light {
    font-family: var(--font-accent-regular), sans-serif;
    color: var(--color-primary);
    font-size: 14px;
}
.news_content .link-light:hover {
    color: #fff;
}


/*ACP PANEL TOP*/
.acp-panel-top-dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-toggle,
.acp-panel-top-user {
    position: relative;
    cursor: pointer;
    display: flex;
    align-items: center;
    padding: 6px 10px;
    height: 35px;
    border-radius: 8px;
    /* background: linear-gradient(0deg, rgb(98 60 38) 0%, rgb(179 122 86) 100%); */
    border: 1px solid rgb(226 169 79 / 34%);
    color: #fff4d6;
    font-size: 14px;
    background: var(--l2vex-public-button);
    box-shadow: 0 10px 24px rgb(0 0 0 / 26%), inset 0 1px 0 rgb(255 226 167 / 8%);
}

.dropdown-toggle:hover,
.acp-panel-top-user:hover {
    background: var(--l2vex-public-button-hover);
    color: #fff;
}

.dropdown-menu {
    filter: grayscale(1);
    display: none;
    position: absolute;
    right: 0;
    min-width: 160px;
    margin-top: 4px;
    text-align: right;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    align-items: center;
    padding: 3px 10px;
    border-radius: 6px;
    background: rgb(138, 107, 83);
    background: linear-gradient(0deg, rgb(68 47 30 / 30%) 0%, rgb(130 101 78 / 30%) 100%);
    border: 1px solid rgb(235 182 134 / 30%);
    z-index: 999999;
}

.dropdown-menu a {
    font-size: 14px;
    color: #fff;
    text-decoration: none;
    display: block;
}

.dropdown-menu a:hover {
    opacity: 0.7;
}
.dropdown-menu.show {
    display: flex;
    flex-direction: column;
    align-items: end;
    gap: 5px;
}
.arrow-down-acp {
    margin-left: 10px;
    border: solid #ffe89b;
    border-width: 0 2px 2px 0;
    display: inline-block;
    padding: 2px;
    width: 2px;
    height: 2px;
    transform: rotate(45deg);
    transition: transform 0.3s ease;
    transform-origin: 60% 70%;
    margin-top: -5px;
}

.arrow-down-acp.rotate {
    transform: rotate(225deg);
}
/*ACP PANEL TOP END*/


.acp-panel-top {
    display: flex;
    align-items: center;
    gap: 15px;
}
.auth_user_header_balance {
    font-size: 14px;
}


#diary {
    padding: 0;
    position: relative;
    max-width: 1920px;
    margin: 0 auto;
    position: relative;
}
#diary video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1;
}
.diary_gradient {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 0 0 112px;
    width: 100%;
    height: 1080px;
    background: radial-gradient(50% 50% at 50% 50%, rgba(19, 16, 14, 0.00) 0%, #13100E 100%), linear-gradient(180deg, rgba(19, 16, 14, 0.00) 63.5%, #13100E 100%), linear-gradient(180deg, #13100E 0%, rgba(19, 16, 14, 0.00) 62.5%);
}


.footer {
    position: relative;
    padding: 30px 0;
}
@media only screen and (min-width: 676px) {
    .footer--features-files {
        padding-bottom: 0;
    }
    .footer--features-files .line {
        top: -135px;
    }
    .footer--features-files .copyright {
        transform: translateY(-85px);
    }
    body.about-tab-open .footer--features-files .line {
        top: -90px;
    }
    body.about-tab-open .footer--features-files .copyright {
        transform: translateY(-45px);
    }
}
.footer_all {
    display: flex;
    justify-content: space-between;
}

.copyright {
    font-family: var(--font-accent-regular), sans-serif;
    text-align: center;
}
.copyright img {
    height: 64px;
}
.copyright h4 {
    color: #bebebe;
}
.copyright p {
    font-size: 14px;
}
.copyright a {
    color: var(--color-primary);
}


.top--right-menu {
    display: flex;
    align-items: center;
    gap: 30px;
}
.btn-wrapper.btn-full {
    margin-bottom: 10px;
}
.btn-full button {
    border: 0;
    width: 100%;
}
.btn-red {
    width: max-content;
    font-family: var(--font-accent-bold), sans-serif;
    height: 35px;
    background: var(--l2vex-public-button);
    border: 1px solid rgb(226 169 79 / 28%);
    box-shadow: 0 10px 24px rgb(0 0 0 / 26%), inset 0 1px 0 rgb(255 226 167 / 8%);
    display: flex;
    align-items: center;
    padding: 0 20px;
    border-radius: 8px;
}
.btn-red:hover {
    background: var(--l2vex-public-button-hover);
}
.acp-panel-top-user {
    font-family: var(--font-accent-bold), sans-serif;
    display: flex;
    align-items: center;
    height: 35px;
    padding: 0 20px;
    border: 1px solid rgb(255 240 196 / 90%);
    border-radius: 8px;
    background: var(--l2vex-public-cta-button);
    color: #2b1400;
    box-shadow: 0 10px 24px rgb(0 0 0 / 26%), 0 0 18px rgb(240 180 78 / 20%), inset 0 1px 0 rgb(255 244 220 / 45%);
}
.acp-panel-top-user:hover {
    background: var(--l2vex-public-cta-button-hover);
}

.btn-golden {
    width: max-content;
    font-family: var(--font-accent-bold), sans-serif;
    height: 35px;
    background: var(--l2vex-public-button);
    border: 1px solid rgb(226 169 79 / 28%);
    box-shadow: 0 10px 24px rgb(0 0 0 / 26%), inset 0 1px 0 rgb(255 226 167 / 8%);
    display: flex;
    align-items: center;
    padding: 0 20px;
    border-radius: 8px;
}
.btn-golden:hover {
    background: var(--l2vex-public-button-hover);
}
.startgame .btn-red,
.startgame .btn-golden {
    border: 1px solid rgb(226 169 79 / 60%);
    border-radius: 0;
    background:
        linear-gradient(135deg, transparent calc(50% - 1px), rgb(226 169 79 / 60%) calc(50% - 1px), rgb(226 169 79 / 60%) calc(50% + 1.25px), transparent calc(50% + 1.25px)) 0 0 / 9px 9px no-repeat,
        linear-gradient(315deg, transparent calc(50% - 1px), rgb(226 169 79 / 60%) calc(50% - 1px), rgb(226 169 79 / 60%) calc(50% + 1.25px), transparent calc(50% + 1.25px)) 100% 100% / 9px 9px no-repeat,
        linear-gradient(180deg, rgb(52 29 11 / 92%) 0%, rgb(30 17 7 / 92%) 100%);
    background-origin: border-box;
    clip-path: polygon(9px 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%, 0 9px);
    box-shadow: inset 0 1px 0 rgb(255 226 167 / 12%);
    color: #ffe9bd;
}
.startgame .btn-red:hover,
.startgame .btn-golden:hover {
    border-color: rgb(248 194 100 / 95%);
    background:
        linear-gradient(135deg, transparent calc(50% - 1px), rgb(248 194 100 / 95%) calc(50% - 1px), rgb(248 194 100 / 95%) calc(50% + 1.25px), transparent calc(50% + 1.25px)) 0 0 / 9px 9px no-repeat,
        linear-gradient(315deg, transparent calc(50% - 1px), rgb(248 194 100 / 95%) calc(50% - 1px), rgb(248 194 100 / 95%) calc(50% + 1.25px), transparent calc(50% + 1.25px)) 100% 100% / 9px 9px no-repeat,
        linear-gradient(180deg, rgb(74 42 14 / 94%) 0%, rgb(43 24 8 / 94%) 100%);
    background-origin: border-box;
}

.about_block {
    padding: 60px 0;
}

.block_title {
    font-family: var(--font-accent-regular), sans-serif;
    color: var(--color-primary);
    font-size: 38px;
    line-height: 1.2;
}
.title_center_block {
    text-align: center;
    line-height: 1.6;
}
.title_center_block {
    font-size: 22px;
    font-family: var(--font-accent-regular), sans-serif;
    color: #fff;
}
.server_about_all {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-top: 120px;
    margin-bottom: 60px;
}
.s_about_item {
    text-align: center;
}
.s_about_item h3 {
    font-family: var(--font-accent-regular), sans-serif;
    text-transform: uppercase;
    margin-top: 10px;
    color: var(--color-primary);
}
.s_about_item p {
    margin-top: 10px;
}
#diary .btn-wrapper {
    position: absolute;
    bottom: 15%;
    left: 0;
    right: 0;
}
#other {
    padding: 120px 0;
    min-height: 950px;
}
.startgame {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 60px;
}
.startgame_steps_num {
    color: #bebebe;
    font-size: 20px;
}
.startgame_steps_name {
    color: #fff;
    font-size: 24px;
    font-family: var(--font-accent-regular), sans-serif;
}
.subtitle {
    color: var(--color-primary);
    font-family: var(--font-accent-regular), sans-serif;
    font-size: 26px;
}
.updater-required-panel {
    scroll-margin-top: 110px;
    margin: 28px 0 46px;
    padding: 26px 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 26px;
    border: 1px solid rgb(226 169 79 / 28%);
    border-radius: 8px;
    background: linear-gradient(135deg, rgb(28 20 16 / 94%) 0%, rgb(15 11 10 / 86%) 100%);
    box-shadow: 0 18px 44px rgb(0 0 0 / 32%), inset 0 1px 0 rgb(255 226 167 / 8%);
}
.updater-required-panel__content {
    max-width: 820px;
}
.updater-required-panel__eyebrow {
    margin: 0 0 8px;
    color: var(--color-primary);
    font-family: var(--font-accent-bold), sans-serif;
    font-size: 14px;
    text-transform: uppercase;
}
.updater-required-panel h4 {
    margin: 0;
    color: #fff;
    font-family: var(--font-accent-regular), sans-serif;
    font-size: 30px;
    line-height: 1.2;
}
.updater-required-panel p {
    margin: 12px 0 0;
    color: #d8d2c7;
    line-height: 1.65;
}
.updater-required-panel__actions {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: flex-end;
}
.updater-required-panel__actions .btn-golden,
.updater-required-panel__actions .btn-red {
    justify-content: center;
}
.startgame_container p {
    margin: 15px 0;
}





/*PAYMENT START*/
#payment-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    max-width: 610px;
}
.payment__range.noUi-horizontal .noUi-handle {
    width: 26px;
    height: 26px;
    border-radius: 26px;
    background: var(--color-primary);
    border: none;
    box-shadow: none;
    top: -9px;
    right: -13px;
}
.payment__range.noUi-target {
    background: #1c1718;
    border-radius: 5px;
    border: 1px solid #505050;
    box-shadow: none;
}
.payment__range {
    margin-top: 20px;
}
.payment__range .noUi-value {
    font-size: 10px;
    line-height: 18px;
    font-weight: 400;
    color: #afafaf;
}
.payment__range .noUi-marker-horizontal.noUi-marker-large {
    height: 10px;
}
.payment__range .noUi-marker-horizontal.noUi-marker {
    width: 1px;
}
.payment__range .noUi-marker-large {
    background: #686363;
}
.payment__range .noUi-marker {
    background: #483f41;
}
.payment__range .noUi-pips-horizontal {
    height: 42px;
}
.payment__range.noUi-horizontal .noUi-connect {
    background: #ffbd01;
}
.payment__range .noUi-tooltip {
    border: 1px solid #505050;
    border-radius: 5px;
    background: #1c1718;
    color: #fff;
    font-size: 14px;
    line-height: 1em;
    font-weight: 400;
    padding: 6px 5px 5px;
}
.payment__range.noUi-horizontal {
    height: 10px;
    margin-bottom: 60px;
}
.noUi-handle-lower::before, .noUi-handle-lower::after {
    display: none;
}
.pay_method img {
    display: flex;
    height: 40px;
}
.payment_select {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
}
.payment-pay {
    width: 100%;
}
.pay_method {
    border: 2px solid transparent;
    cursor: pointer;
}
.pay_method--crypto {
    min-width: 92px;
    min-height: 40px;
    padding: 2px 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.04);
    box-sizing: border-box;
}
.pay_method--crypto img {
    height: 24px;
}
.pay_method_label {
    color: #d8d2c7;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    text-transform: uppercase;
}
.pay_method:hover {
    opacity: 0.7;
    transition: 0.3s;
}
.pay_method.active {
    border: 2px solid var(--color-primary);
    border-radius: 6px;
}
.pay-currency {
    display: flex;
    flex-wrap: wrap;
    color: #bebebe;
    gap: 12px;
}
.curr-item {
    min-width: 96px;
    padding: 7px 10px;
    border: 1px solid rgba(255, 189, 1, 0.28);
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.04);
    box-sizing: border-box;
}
.payment__input {
    display: flex;
    align-items: center;
}
.payment_bonus_price {
    background-color: var(--color-primary);
    height: 45px;
    min-width: 45px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.payment-pay input {
    border-radius: 0;
}
.bonus-item {
    display: flex;
    justify-content: space-between;
    font-size: 20px;
    border-bottom: 1px solid gray;
    padding-bottom: 15px;
    margin-bottom: 15px;
}
.bonus-item p {
    color: #fff;
}
.bonus-item span {
    color: var(--color-primary);
}
.donate-title {
    font-size: 22px;
    color: #fff;
}
.donate-title-block p {
    color: #bebebe;
}
.donate-title-block {
    margin-bottom: 15px;
}
.curr-item .curr_symbol {
    color: var(--color-primary);
}
.price_col {
    color: var(--color-primary);
}
.payment-pay .form-group {
    margin-bottom: 15px;
}
.payment-pay .form-group:last-child {
    margin-bottom: 0;
}
.payment-pay .login_button {
    margin-top: 30px;
    text-align: center;
}
.total_text {
    color: #bebebe;
    text-align: center;
}
/*PAYMENT END*/


.btn-primary {
    border: 0;
    cursor: pointer;
    background: var(--l2vex-public-button);
    height: 42px;
    min-width: 180px;
    max-width: max-content;
    padding: 0 15px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    gap: 8px;
    color: #fff4d6;
    font-size: 14px;
    border: 1px solid rgb(226 169 79 / 28%);
    box-shadow: 0 8px 22px rgb(0 0 0 / 24%), inset 0 1px 0 rgb(255 226 167 / 8%);
}
.btn-primary:hover {
    background: var(--l2vex-public-button-hover);
    color: #fff;
}
.btn-primary svg {
    width: 24px;
}
.login_button button {
    width: 100%;
    max-width: 100%;
    box-shadow: 0 14px 32px rgb(0 0 0 / 28%), inset 0 1px 0 rgb(255 226 167 / 8%);
    height: 50px;
    font-size: 18px;
    position: relative;
}
.login_button svg {
    position: absolute;
    left: 18px;
    width: 30px;
}
.text-danger {
    color: #ff4d4d;
    font-size: 13px;
    margin-top: 5px;
}


.text-success {
    color: #00cc66;
    font-size: 14px;
    margin-top: 10px;
}

.img_left {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-accent-bold), sans-serif;
    color: #fff;
}
.about_all {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-top: 15px;
}
.about_sidebar {
    display: flex;
    flex-direction: column;
    gap: 15px;
    width: 25%;
    padding: 15px;
    position: sticky;
    top: 20px;
    align-self: flex-start;
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.about_sidebar::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
}
.about-link {
    border: 1px solid rgb(226 169 79 / 60%);
    cursor: pointer;
    font-family: var(--font-accent-bold), sans-serif;
    background:
        linear-gradient(135deg, transparent calc(50% - 1px), rgb(226 169 79 / 60%) calc(50% - 1px), rgb(226 169 79 / 60%) calc(50% + 1.25px), transparent calc(50% + 1.25px)) 0 0 / 9px 9px no-repeat,
        linear-gradient(315deg, transparent calc(50% - 1px), rgb(226 169 79 / 60%) calc(50% - 1px), rgb(226 169 79 / 60%) calc(50% + 1.25px), transparent calc(50% + 1.25px)) 100% 100% / 9px 9px no-repeat,
        linear-gradient(180deg, rgb(36 20 8 / 90%) 0%, rgb(23 13 6 / 90%) 100%);
    background-origin: border-box;
    padding: 5px 12px;
    height: 40px;
    min-width: 180px;
    width: 100%;
    display: flex;
    align-items: center;
    border-radius: 0;
    clip-path: polygon(9px 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%, 0 9px);
    gap: 8px;
    position: relative;
    font-size: 14px;
    color: #efddba;
    box-shadow: inset 0 1px 0 rgb(255 226 167 / 8%);
}
.about-link:hover {
    border-color: rgb(233 179 92 / 80%);
    background:
        linear-gradient(135deg, transparent calc(50% - 1px), rgb(233 179 92 / 80%) calc(50% - 1px), rgb(233 179 92 / 80%) calc(50% + 1.25px), transparent calc(50% + 1.25px)) 0 0 / 9px 9px no-repeat,
        linear-gradient(315deg, transparent calc(50% - 1px), rgb(233 179 92 / 80%) calc(50% - 1px), rgb(233 179 92 / 80%) calc(50% + 1.25px), transparent calc(50% + 1.25px)) 100% 100% / 9px 9px no-repeat,
        linear-gradient(180deg, rgb(52 29 11 / 92%) 0%, rgb(32 18 8 / 92%) 100%);
    background-origin: border-box;
}
.about-link.active {
    border-color: rgb(248 194 100 / 95%);
    background:
        linear-gradient(135deg, transparent calc(50% - 1px), rgb(248 194 100 / 95%) calc(50% - 1px), rgb(248 194 100 / 95%) calc(50% + 1.25px), transparent calc(50% + 1.25px)) 0 0 / 9px 9px no-repeat,
        linear-gradient(315deg, transparent calc(50% - 1px), rgb(248 194 100 / 95%) calc(50% - 1px), rgb(248 194 100 / 95%) calc(50% + 1.25px), transparent calc(50% + 1.25px)) 100% 100% / 9px 9px no-repeat,
        linear-gradient(180deg, rgb(74 42 14 / 94%) 0%, rgb(43 24 8 / 94%) 100%);
    background-origin: border-box;
    color: #fff;
}
.about-link img {
    height: 16px;
}
.about-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.about-submenu {
    display: none;
    flex-direction: column;
    gap: 8px;
    padding-left: 15px;
}
.about-submenu.is-open {
    display: flex;
}
.about-link--sub {
    padding-right: 10px;
    clip-path: polygon(7px 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%, 0 7px);
    background-size: 7px 7px, 7px 7px, auto;
}
.about-link--sub:hover,
.about-link--sub.active {
    background-size: 7px 7px, 7px 7px, auto;
}
.about-link--sub::before {
    display: none;
}
.about-link::after {
    content: none;
}
.about-group-toggle.active::before {
    transform: rotate(-135deg);
    top: 40%;
}
.about-group-toggle.is-open::before {
    transform: rotate(-135deg);
    top: 40%;
}
.about-group-toggle.active:not(.is-open)::before {
    transform: rotate(45deg);
    top: 30%;
}
.about-group-toggle::before {
    content: "";
    position: absolute;
    top: 30%;
    right: 10px;
    width: 1px;
    height: 1px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    display: inline-block;
    padding: 3px;
    transform: rotate(45deg);
    transition: transform 0.3s
    ease;
}
.about-submenu .about-link::before,
.about-link:not(.about-group-toggle)::before,
.about-link--sub::before {
    content: none;
    display: none;
    border: 0;
}
.about_content {
    box-sizing: border-box;
    width: 73%;
    background: none;
    border: none;
    border-radius: 8px;
    padding: 0;
    box-shadow: none;
}
.about_content strong {
    font-family: var(--font-accent-bold), sans-serif;
    color: #ffd782;
}
.about_content p {
    margin: 10px 0;
}
.boss-table {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.6fr) max-content;
    margin: 10px 0 4px;
}
.boss-table .boss-name,
.boss-table .boss-days,
.boss-table .boss-time {
    padding: 8px 0;
    border-top: 1px solid rgb(226 169 79 / 16%);
}
.boss-table > :nth-child(-n+3) {
    border-top: none;
}
.boss-table .boss-name {
    color: #ffe9bd;
    font-family: var(--font-bold), serif;
    padding-right: 16px;
}
.boss-table .boss-days {
    color: #bda98c;
    padding-right: 20px;
}
.boss-table .boss-time {
    color: #ffd782;
    font-family: var(--font-bold), serif;
    text-align: right;
    white-space: nowrap;
}
.boss-table .boss-note {
    grid-column: 1 / -1;
    color: #c9b99f;
    font-size: 13px;
    padding: 0 0 6px 18px;
}
.boss-table .boss-note--sub {
    padding-left: 34px;
    padding-bottom: 3px;
}
.l2vex-rate-blocks {
    margin: 6px 0 2px;
}
.l2vex-rate-block {
    margin: 16px 0 0;
}
.l2vex-rate-title {
    font-family: var(--font-accent-bold), sans-serif;
    color: #fff;
    margin: 0 0 4px;
}
.l2vex-rate-lines {
    margin: 6px 0 0;
}
.l2vex-rate-lines p {
    display: grid;
    grid-template-columns: 118px minmax(0, 1fr);
    gap: 16px;
    margin: 7px 0;
}
.l2vex-rate-lines--skill p:nth-child(2),
.l2vex-rate-lines--skill p:nth-child(4),
.l2vex-rate-lines--skill p:nth-child(6) {
    margin-top: 18px;
}
.l2vex-rate-lines span {
    color: #f3d58b;
    white-space: nowrap;
}
.l2vex-rate-lines strong {
    color: #fff;
    font-family: var(--font-accent-bold), sans-serif;
}
.l2vex-feature-shot,
.l2vex-feature-gallery {
    box-sizing: border-box;
    width: 100%;
    margin: 18px auto 6px;
    padding: 0 24px;
}
.l2vex-feature-shot {
    display: flex;
    justify-content: center;
}
.l2vex-feature-shot img,
.l2vex-feature-gallery img {
    display: block;
    max-width: 100%;
    height: auto;
    margin-left: auto;
    margin-right: auto;
    border: 1px solid rgb(226 169 79 / 28%);
    border-radius: 8px;
    background: rgb(0 0 0 / 24%);
    box-shadow: 0 12px 24px rgb(0 0 0 / 26%);
}
.l2vex-feature-gallery {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px;
    align-items: start;
}
.l2vex-feature-gallery img {
    width: auto;
    max-width: min(100%, 430px);
}
.l2vex-feature-gallery--missions img {
    max-width: min(100%, 738px);
}
.l2vex-feature-gallery img.l2vex-feature-img--auction-house {
    max-width: min(100%, 560px);
}
.l2vex-feature-gallery--cosmetic-pair img {
    max-width: min(100%, 500px);
}
.l2vex-feature-gallery--streamer img {
    max-width: min(100%, 360px);
}
.l2vex-streamer-flow {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin: 18px 0;
}
.l2vex-streamer-step {
    min-height: 118px;
    padding: 14px 16px;
    border: 1px solid rgb(226 169 79 / 22%);
    border-radius: 8px;
    background: rgb(0 0 0 / 20%);
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 5%);
}
.l2vex-streamer-step strong {
    display: block;
    margin-bottom: 7px;
    color: #ffdb8f;
}
.l2vex-streamer-step p,
.l2vex-streamer-step span {
    display: block;
    margin: 0;
    color: #d8d2c7;
    line-height: 1.45;
}
.l2vex-streamer-warning {
    margin: 18px 0 20px;
    padding: 14px 16px;
    border: 1px solid rgb(214 76 56 / 36%);
    border-left: 3px solid #d64c38;
    border-radius: 8px;
    background: linear-gradient(135deg, rgb(96 25 21 / 34%) 0%, rgb(0 0 0 / 18%) 100%);
}
.l2vex-streamer-warning p {
    margin-bottom: 6px;
}
.l2vex-streamer-warning p:last-child {
    margin-bottom: 0;
}
.l2vex-feature-shot--community-board img {
    width: min(100%, 796px);
}
.l2vex-feature-gallery--skill-enchant {
    display: grid;
    grid-template-columns: 310px 438px;
    justify-content: center;
    align-items: start;
    gap: 0;
}
.l2vex-feature-gallery--skill-enchant img {
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
}
.l2vex-feature-img--skill-detail {
    margin-top: 37px;
}
.l2vex-feature-shot--skill-superior img {
    width: min(100%, 438px);
}
@media only screen and (max-width: 860px) {
    .l2vex-feature-gallery--skill-enchant {
        display: flex;
        gap: 16px;
    }
    .l2vex-feature-img--skill-detail {
        margin-top: 16px;
    }
    .l2vex-streamer-flow {
        grid-template-columns: 1fr;
    }
}
.content-about.active {
    display: block;
    box-sizing: border-box;
    width: 100%;
    background:
        linear-gradient(#e2a94f, #e2a94f) 0 0 / 14px 2px no-repeat,
        linear-gradient(#e2a94f, #e2a94f) 0 0 / 2px 14px no-repeat,
        linear-gradient(#e2a94f, #e2a94f) 100% 0 / 14px 2px no-repeat,
        linear-gradient(#e2a94f, #e2a94f) 100% 0 / 2px 14px no-repeat,
        linear-gradient(#e2a94f, #e2a94f) 0 100% / 14px 2px no-repeat,
        linear-gradient(#e2a94f, #e2a94f) 0 100% / 2px 14px no-repeat,
        linear-gradient(#e2a94f, #e2a94f) 100% 100% / 14px 2px no-repeat,
        linear-gradient(#e2a94f, #e2a94f) 100% 100% / 2px 14px no-repeat,
        radial-gradient(120% 150% at 50% 0%, rgb(30 18 9 / 45%) 0%, rgb(12 7 5 / 62%) 75%);
    border: 1px solid rgb(226 169 79 / 40%);
    border-radius: 8px;
    padding: 22px 24px 24px;
    box-shadow: inset 0 0 60px rgb(0 0 0 / 30%), 0 14px 28px rgb(0 0 0 / 18%);
}
.content-about.active > br:first-child {
    display: none;
}
.about_content .content-about.active + .content-about.active {
    margin-top: 18px;
}
.content-about {
    display: none;
}
.about-menu-toggle {
    display: none;
}

@media only screen and (min-width: 1600px) {
    /*.wrap {*/
    /*    width: 1600px;*/
    /*}*/
}
@media only screen and (max-width: 1024px) {
    .wrap {
        width: 100%;
        padding-left: 30px;
        padding-right: 30px;
    }
    #main.home-hero {
        min-height: 650px;
    }
    #other {
        min-height: auto;
    }
    .main-text {
        width: min(100%, 660px);
        margin-right: 0;
        padding-top: 140px;
    }
    .main-text .logo--hero img {
        height: 132px;
    }
    .open-beta-countdown {
        width: min(100%, 480px);
        padding: 16px 16px 15px;
    }
    .open-beta-countdown__item span {
        font-size: 23px;
    }
    .auth_user_header_balance {
        display: none;
    }
    .top_line {
        padding-left: 30px;
        padding-right: 30px;
    }
}

@media only screen and (max-width: 960px) {
    .top_menu {
        position: fixed;
        top: 0;
        left: 0;
        width: 300px;
        height: 100%;
        background-color: #221e1d;
        box-shadow: -2px 0 8px rgba(0, 0, 0, 0.1);
        transform: translateX(-100%);
        transition: transform 0.3s ease-in-out;
        z-index: 9999;
        display: flex;
        flex-direction: column;
        padding-top: 70px;
        padding-left: 20px;
        box-sizing: border-box;
    }

    ul.top_menu.active {
        transform: translateX(0);
    }

    .navigation__burger {
        display: block;
    }

    .gw-burger {
        position: relative;
        z-index: 999999;
        width: 40px;
        height: 40px;
        cursor: pointer;
        box-sizing: border-box;
    }

    .gw-burger__line {
        width: 20px;
        height: 2px;
        margin: auto;
        position: absolute;
        left: 5px;
        right: 5px;
        background-color: #909090;
        border-radius: 2px;
        -webkit-transition: all .3s;
        transition: all .3s;
    }

    .gw-burger__line_pos_top {
        pointer-events: none;
        top: 32%;
    }

    .gw-burger__line_pos_middle {
        pointer-events: none;
        top: 50%;
        transform: translateY(-50%);
    }

    .gw-burger__line_pos_bottom {
        pointer-events: none;
        bottom: 32%;
    }

    .gw-burger_active .gw-burger__line_pos_top {
        transform: rotate(45deg) translateY(-50%);
        -webkit-transform-origin: center top;
        transform-origin: center top;
        top: 50%;
    }

    .gw-burger_active .gw-burger__line_pos_middle {
        transform: rotate(180deg);
        opacity: 0;
    }

    .gw-burger_active .gw-burger__line_pos_bottom {
        transform: rotate(-45deg) translateY(50%);
        -webkit-transform-origin: center bottom;
        transform-origin: center bottom;
        bottom: 50%;
    }

    .footer_all {
        flex-wrap: wrap;
        gap: 30px;
    }
}



@media only screen and (max-width: 675px) {
    .about-menu-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 15px 0;
        padding: 10px 15px;
        background:
            linear-gradient(135deg, transparent calc(50% - 1px), rgb(226 169 79 / 60%) calc(50% - 1px), rgb(226 169 79 / 60%) calc(50% + 1.25px), transparent calc(50% + 1.25px)) 0 0 / 9px 9px no-repeat,
            linear-gradient(315deg, transparent calc(50% - 1px), rgb(226 169 79 / 60%) calc(50% - 1px), rgb(226 169 79 / 60%) calc(50% + 1.25px), transparent calc(50% + 1.25px)) 100% 100% / 9px 9px no-repeat,
            linear-gradient(180deg, rgb(74 42 14 / 94%) 0%, rgb(43 24 8 / 94%) 100%);
        background-origin: border-box;
        border: 1px solid rgb(226 169 79 / 60%);
        border-radius: 0;
        clip-path: polygon(9px 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%, 0 9px);
        color: #ffe9bd;
        font-family: var(--font-accent-bold), sans-serif;
        width: 100%;
    }
    .about_content {
        width: 100%;
        padding: 0 15px;
    }
    .about_sidebar {
        display: none;
        width: 100%;
        position: static;
        top: auto;
        max-height: none;
        overflow: visible;
    }
    .about_sidebar.show {
        display: flex;
    }
    .about_all {
        flex-wrap: wrap;
    }
    .wrap {
        padding-left: 15px;
        padding-right: 15px;
    }
    .content_all {
        gap: 15px;
    }
    .menu-footer {
        margin-top: 15px;
    }
    .line {
        display: none;
    }
    #main.home-hero {
        min-height: auto;
    }
    .main-text {
        width: 100%;
        padding-top: 320px;
        margin-right: 0;
    }
    .content_left {
        width: 100%;
    }
    .content_right {
        width: 100%;
    }
    .top_line::before {
        display: none;
    }
    .logo img {
        height: 80px;
    }
    .main-text .logo--hero {
        margin-top: 20px;
        margin-bottom: 14px;
    }
    .main-text .logo--hero img {
        height: 108px;
    }
    .open-beta-countdown {
        padding: 14px 12px;
    }
    .open-beta-countdown__grid {
        gap: 7px;
    }
    .open-beta-countdown__item {
        padding: 8px 5px;
    }
    .open-beta-countdown__item span {
        font-size: 20px;
    }
    .open-beta-countdown__eyebrow,
    .open-beta-countdown__date,
    .open-beta-countdown__grand {
        font-size: 12px;
    }
    .open-beta-countdown__eyebrow.open-beta-countdown__eyebrow--live {
        font-size: 17px;
    }
    .main-text .open-beta-countdown__copy {
        font-size: 12px;
    }
    .updater-required-panel {
        margin: 22px 0 32px;
        padding: 20px;
        flex-direction: column;
        align-items: stretch;
    }
    .updater-required-panel h4 {
        font-size: 22px;
    }
    .updater-required-panel__actions {
        align-items: stretch;
    }
    .updater-required-panel__actions .btn-golden,
    .updater-required-panel__actions .btn-red {
        width: 100%;
    }

    .footer_all {
        flex-wrap: wrap;
        gap: 0;
    }
    .startgame {
        grid-template-columns: repeat(1, 1fr);
        gap: 30px;
    }
    #payment-form {
        grid-template-columns: repeat(1, 1fr);
        gap: 30px;
    }
    .server_about_all {
        margin-top: 60px;
    }
    .copyright {
        text-align: center;
        margin: auto;
        padding-bottom: 15px;
    }
    h1 {
        font-size: 20px;
    }
    .server_item {
        flex-wrap: wrap;
        gap: 15px;
    }
    .server_info {
        width: 100%;
        margin-right: 0;
        padding: 0 15px;
    }
    .main-bg {
        background-position: 40% 50%;
    }
    .news_content {
        flex-wrap: wrap;
    }
    table.rating thead th {
        padding: 4px;
        font-size: 12px;
    }
    table.rating td {
        padding: 4px;
        font-size: 10px;
    }
    .rating_block {
        padding: 5px;
    }
}

@media only screen and (max-width: 480px) {
    .block_title {
        font-size: 22px;
    }
    .title_center_block {
        font-size: 16px;
    }
    .s_about_item {
        width: 48%;
    }
    .server_about_all {
        margin-top: 30px;
        margin-bottom: 30px;
    }
    .s_about_item p {
        font-size: 12px;
    }
    #diary .btn-wrapper {
        position: relative;
        bottom: 0;
    }
    #diary .btn-wrapper {
        position: relative;
        bottom: 0;
        margin-top: 0;
    }
    h1 {
        font-size: 20px;
        line-height: 1.2;
    }
    .main-text p {
        font-size: 20px;
    }
    .top--right-menu .nav-item {
        display: none;
    }
    .auth_wrapper {
        margin-left: 15px;
        margin-right: 15px;
    }
}

/* Language switch: two direct flag buttons */
.nav__langs--buttons {
    display: flex;
    align-items: center;
    gap: 8px;
}

.nav__langs--buttons .nav__langs-item {
    height: 34px;
    padding: 0 4px;
    gap: 6px;
    text-decoration: none;
    opacity: 0.78;
}

.nav__langs--buttons .nav__langs-item:hover,
.nav__langs--buttons .nav__langs-item.active {
    opacity: 1;
    color: #ffd77d;
}

.nav__langs--buttons .nav__langs-item img {
    width: 25px;
}

.nav__langs--buttons .nav__langs-item:after {
    content: none;
}

/* === Round 2005 - Homepage hero refresh + new Features/Download background ===
   Homepage: new background artwork that scrolls with the page and drifts slowly,
   plus a single Reborn-style card holding the wordmark, tagline, copy and badges
   over translucent artwork. Footer diamond divider retired site-wide. */

/* Decorative footer divider (diamond line) - retired site-wide */
.footer .line {
    display: none;
}

/* --- Features / Download pages: new background artwork --- */
.other-bg--features-files {
    background-image: url("../img/l2vex-features-bg-20260807.jpg");
}

/* --- Homepage background: scrolls away with the page ---
   `absolute` with the inherited inset:0 resolves against the initial containing
   block, so the box stays exactly viewport-sized and anchored at the document
   top: identical crop and zoom to `fixed`, it just no longer follows the scroll. */
.main-bg--home {
    position: absolute;
    /* overflow clips the drift on ::after so the zoom never spills out */
    overflow: hidden;
    background-image: none;
}
/* The artwork lives on ::after so the drift can be clipped by the parent */
.main-bg--home::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    background-image: url("../img/fondo.jpg");
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
    filter: saturate(1.04);
}
/* Slow "breathing" drift so the background is not static */
@media (prefers-reduced-motion: no-preference) {
    .main-bg--home::after {
        animation: l2vexHomeBgDrift 50s ease-in-out infinite;
        will-change: transform;
    }
}
@keyframes l2vexHomeBgDrift {
    0%, 100% { transform: scale(1.02) translate(0, 0); }
    50% { transform: scale(1.075) translate(-1.1%, -0.7%); }
}
.main-bg--home::before {
    z-index: 2;
    background:
        radial-gradient(120% 90% at 70% 42%, rgb(240 180 78 / 8%) 0%, rgb(20 12 8 / 0%) 46%),
        radial-gradient(145% 125% at 50% 46%, rgb(0 0 0 / 0%) 54%, rgb(5 3 2 / 44%) 100%),
        linear-gradient(180deg, rgb(12 8 6 / 22%) 0%, rgb(20 12 8 / 30%) 58%, rgb(7 5 4 / 62%) 90%, #120F0D 100%);
}

/* --- Hero layout: single card lower-right, everything inside it --- */
.hero-layout {
    display: flex;
    flex-direction: column;
    padding-top: 215px;
}

/* --- Hero card (Reborn-style panel, translucent art behind the text) --- */
.hero-card {
    position: relative;
    width: 100%;             /* Se adapta al 100% de su espacio disponible */
    max-width: 500px;        /* Ancho máximo para que no se desarme */
    margin-left: 0;          /* Pega la caja completamente a la izquierda */
    margin-right: auto;      /* Deja el espacio sobrante a la derecha */
    transform: none;         /* Quitamos los desplazamientos fijos */
    min-height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
}
.hero-card__art {
    position: absolute;
    inset: 0;
    background-image: url("../img/l2vex-home-card-20260807.jpg");
    background-size: cover;
    background-position: center 30%;
    opacity: .52;
    filter: saturate(1.05);
}
.hero-card::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(135deg, rgb(24 13 7 / 36%) 0%, rgb(64 36 12 / 24%) 52%, rgb(30 17 11 / 38%) 100%);
}
.hero-card::after {
    content: "";
    position: absolute;
    top: 0;
    left: 8%;
    right: 8%;
    height: 1px;
    z-index: 2;
    background: linear-gradient(90deg, transparent, rgb(255 224 157 / 42%), transparent);
}
.hero-card__body {
    position: relative;
    z-index: 2;
    width: 100%;
    padding: 34px 46px 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
.hero-card__logo {
    display: block;
    width: 100%;
    text-align: center;
}

.hero-card__logo img {
    width: 45%;             /* Ocupa el ancho de su contenedor */
    max-width: 100%;         /* Permite escalar automáticamente */
    height: auto;            /* Mantiene la proporción sin deformarse */
    object-fit: contain;
    filter: drop-shadow(0 5px 22px rgb(0 0 0 / 62%)) drop-shadow(0 0 20px rgb(240 180 78 / 24%));
}
.hero-card__tagline {
    font-family: var(--font-accent-regular), serif;
    font-size: 19px;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: .6px;
    margin: 10px 0 14px;
    text-shadow: 0 2px 16px rgb(0 0 0 / 62%);
}
.hero-card__copy {
    font-family: var(--font-regular), serif;
    font-size: 15.5px;
    line-height: 1.7;
    max-width: 660px;
    color: rgb(255 248 234 / 93%);
    text-shadow: 0 2px 12px rgb(0 0 0 / 70%);
    margin-bottom: 18px;
}

/* --- Badges (inside the card) --- */
.hero-badges {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    row-gap: 8px;
}
.hero-badge {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 3px 15px;
}
.hero-badge + .hero-badge {
    border-left: 1px solid rgb(255 215 130 / 26%);
}
.hero-badge svg {
    width: 19px;
    height: 19px;
    stroke: var(--color-primary);
    fill: none;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex: none;
    filter: drop-shadow(0 2px 8px rgb(0 0 0 / 60%));
}
.hero-badge span {
    font-family: Montserrat-SemiBold, Arial, sans-serif;
    font-size: 11.5px;
    letter-spacing: .35px;
    text-transform: uppercase;
    color: rgb(255 248 234 / 94%);
    white-space: nowrap;
    text-shadow: 0 2px 10px rgb(0 0 0 / 70%);
}

/* --- Responsive --- */
@media (min-width: 1200px) {
    .hero-card {
        width: 45%;          /* En pantallas grandes ocupa el 45% del ancho a la izquierda */
        margin-left: 0;
        margin-right: auto;
        transform: none;     /* Sin posiciones fijas */
    }
}

@media (max-width: 1199px) {
    .hero-layout { padding-top: 140px; }
    .hero-card { 
        width: 100%; 
        max-width: 450px; 
        margin: 0 auto;      /* En pantallas de celular o tablet se centra solo */
        transform: none; 
    }
}
/* === Round 2006 (hero card reverted in Round 2009) - Square the Features panels ===
   The Features panels drew straight gold corner brackets over an 8px rounded
   box, so the brackets overshot the curve; squaring the box and moving them
   onto the border edge lands them exactly on the corners. The homepage hero
   card was squared to match in Round 2006 and put back to its rounded
   Reborn-style shape in Round 2009 at the owner's request - it never had the
   bracket defect, so it never needed squaring. */

.content-about.active {
    border-radius: 0;
    background-origin: border-box;
}

/* === Round 2011 - Features sidebar links: continuous chamfered outline =======
   `.about-link` drew its chamfer as a 1px border plus two diagonal gradient
   patches. The patch never quite meets the border, so both cut corners showed a
   small open notch - the exact defect the owner kept pointing at.

   Same fix as the payment buttons: the outline is the 1px GAP between two
   chamfered shapes. The element carries the ring colour and the chamfer, and
   `::after` inset 1px carries the interior with the chamfer 0.586px tighter
   (2 - sqrt2, so the diagonal is exactly as thick as the straight edges).

   `::after` is used and NOT `::before`: `::before` on these links is the
   accordion chevron (`.about-group-toggle::before`) and is also switched off for
   sub-rows by a higher-specificity rule, so it is unavailable. The border drops
   to 0 with no layout shift because the file sets `* { box-sizing: border-box }`
   and these links have a fixed 40px height. */

.about-link {
    --vex-cut: 9px;
    --vex-inner: calc(var(--vex-cut) - 0.586px);
    isolation: isolate;
    border: 0;
    background: rgb(226 169 79 / 60%);
    background-origin: border-box;
    clip-path: polygon(var(--vex-cut) 0, 100% 0, 100% calc(100% - var(--vex-cut)), calc(100% - var(--vex-cut)) 100%, 0 100%, 0 var(--vex-cut));
}
.about-link--sub {
    --vex-cut: 7px;
    background-size: auto;
}
.about-link:hover {
    background: rgb(233 179 92 / 80%);
}
.about-link.active {
    background: rgb(248 194 100 / 95%);
}
.about-link::after {
    content: "";
    display: block;
    position: absolute;
    inset: 1px;
    z-index: -1;
    pointer-events: none;
    background: linear-gradient(180deg, rgb(36 20 8 / 96%) 0%, rgb(23 13 6 / 96%) 100%);
    clip-path: polygon(var(--vex-inner) 0, 100% 0, 100% calc(100% - var(--vex-inner)), calc(100% - var(--vex-inner)) 100%, 0 100%, 0 var(--vex-inner));
}
.about-link:hover::after {
    background: linear-gradient(180deg, rgb(52 29 11 / 96%) 0%, rgb(32 18 8 / 96%) 100%);
}
.about-link.active::after {
    background: linear-gradient(180deg, rgb(74 42 14 / 97%) 0%, rgb(43 24 8 / 97%) 100%);
}

/* 20260825 autofarm video: gallery <video> matches the img framing */
.l2vex-feature-gallery video {
    display: block;
    width: auto;
    max-width: min(100%, 570px);
    height: auto;
    margin-left: auto;
    margin-right: auto;
    border: 1px solid rgb(226 169 79 / 28%);
    border-radius: 8px;
    background: rgb(0 0 0 / 24%);
}

/* 20260825 570px cap: feature-shot <video> (Buffer et al) gets the same framing */
.l2vex-feature-shot video {
    display: block;
    width: auto;
    max-width: min(100%, 570px);
    height: auto;
    margin-left: auto;
    margin-right: auto;
    border: 1px solid rgb(226 169 79 / 28%);
    border-radius: 8px;
    background: rgb(0 0 0 / 24%);
}

/* 20260825 natural-size feature videos (skill enchant, missions) */
.l2vex-feature-gallery video.l2vex-video-natural,
.l2vex-feature-shot video.l2vex-video-natural {
    max-width: 100%;
}

/* ============================================================================
   2026-08-27 - Home hero: dwarf artwork, text block moved left, corner brackets
   Appended block: it overrides the rules above by source order, so no
   !important is needed and removing this block restores the previous hero.
   ============================================================================ */
.main-bg--home::after {
    background-image: url("../img/fondo.jpg");
    /* anchored right so narrow viewports crop the empty mist, never the dwarf */
    background-position: right top;
}

/* the card no longer carries its own artwork - the page background is the art */
.hero-card__art { display: none; }

@media (min-width: 1200px) {
    .hero-card {
        width: 50%;
        max-width: 50%;
        margin-left: 0;
        margin-right: auto;
        transform: translateX(-26px);
        border: 0;
        border-radius: 0;
        box-shadow: none;
        overflow: visible;
        /* soft scrim, heaviest under the text and fading toward the artwork */
        background: linear-gradient(100deg, rgb(8 6 5 / 62%) 0%, rgb(8 6 5 / 26%) 70%, rgb(8 6 5 / 0%) 100%);
    }
    /* corner brackets: a frame implied, never closed */
    .hero-card::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: auto;
        bottom: auto;
        width: 58px;
        height: 58px;
        background: none;
        border-top: 1px solid rgb(226 169 79 / 55%);
        border-left: 1px solid rgb(226 169 79 / 55%);
    }
    .hero-card::after {
        content: "";
        position: absolute;
        top: auto;
        left: auto;
        right: 0;
        bottom: 0;
        width: 58px;
        height: 58px;
        background: none;
        border-bottom: 1px solid rgb(226 169 79 / 55%);
        border-right: 1px solid rgb(226 169 79 / 55%);
    }
}

/* Below 1200px the existing rule stretches the card to full width, so it sits
   on top of the artwork - give it a real scrim and shift the crop so the dwarf
   is not the part hidden behind the text. */
@media (max-width: 1199px) {
    .main-bg--home::after { background-position: 70% top; }
    .hero-card {
        border-radius: 14px;
        background: linear-gradient(180deg, rgb(8 6 5 / 74%) 0%, rgb(8 6 5 / 62%) 100%);
    }
}

/* ============================================================================
   2026-08-27 - Tone: cooler neutrals so every page agrees with the new hero.
   The hero artwork's text zone measures #162014 (dark green-grey) while the
   site ground was #120F0D (dark brown); that mismatch is what made the new
   artwork look pasted on. Appended block - delete it to restore the old tone.
   ============================================================================ */
:root {
    /* was: 12 8 6 / 52% -> 20 12 8 / 62% -> 7 5 4 / 78%  (warm brown) */
    --l2vex-public-bg-overlay: linear-gradient(180deg, rgb(10 14 12 / 62%) 0%, rgb(13 18 15 / 74%) 58%, rgb(6 9 8 / 88%) 100%);
}

body { background: #131714; }

/* inner pages: same artwork, graded off the orange cast so it reads as texture */
.other-bg,
.main-bg { background-image: url("../img/l2vex-features-acp-bg-20260827.jpg"); }
.other-bg--features-files { background-image: url("../img/l2vex-features-bg-20260827.jpg"); }
.other-bg--legal { background-image: url("../img/l2vex-legal-bg-20260827.jpg"); }

/* re-assert: the homepage paints its artwork on ::after, so the shared
   .main-bg image must stay off there (the rule above would otherwise win by
   source order and load a second, invisible background). */
.main-bg--home { background-image: none; }

/* ============================================================================
   2026-08-27 - Features page: dark elf artwork + cooler content panel.
   The panel is ~50% transparent, so the artwork reads through it; its own
   background was still the old warm brown, which fought the new tone and made
   the bright blade behind the text harder to read. Appended block.
   ============================================================================ */
.other-bg--features-files {
    background-image: url("../img/l2vex-features-bg-elf-20260827.jpg");
}

.content-about.active {
    background:
        linear-gradient(#e2a94f, #e2a94f) 0 0 / 14px 2px no-repeat,
        linear-gradient(#e2a94f, #e2a94f) 0 0 / 2px 14px no-repeat,
        linear-gradient(#e2a94f, #e2a94f) 100% 0 / 14px 2px no-repeat,
        linear-gradient(#e2a94f, #e2a94f) 100% 0 / 2px 14px no-repeat,
        linear-gradient(#e2a94f, #e2a94f) 0 100% / 14px 2px no-repeat,
        linear-gradient(#e2a94f, #e2a94f) 0 100% / 2px 14px no-repeat,
        linear-gradient(#e2a94f, #e2a94f) 100% 100% / 14px 2px no-repeat,
        linear-gradient(#e2a94f, #e2a94f) 100% 100% / 2px 14px no-repeat,
        /* was rgb(30 18 9 / 45%) -> rgb(12 7 5 / 62%): warm brown, now cool and
           a little denser so text stays readable over the glowing blade */
        radial-gradient(120% 150% at 50% 0%, rgb(16 24 20 / 58%) 0%, rgb(8 12 10 / 74%) 75%);
}

/* ============================================================================
   2026-08-27 - Features side menu: rounded, permanently translucent.
   Works WITH the Round 2011 system rather than replacing it: `.about-link` is
   still the 1px ring and `::after` (inset 1px) is still the interior. Only the
   chamfer is dropped for a radius, and the interior goes from an opaque warm
   brown to translucent green glass so the artwork behind shows through.
   Removing this block restores the Round 2011 chamfered buttons intact.
   ============================================================================ */
.about-link {
    clip-path: none;
    border-radius: 8px;
    background: rgb(226 169 79 / 34%);
}
.about-link:hover  { background: rgb(233 179 92 / 62%); }
.about-link.active { background: rgb(248 194 100 / 92%); }

.about-link::after {
    clip-path: none;
    border-radius: 7px;
    background: linear-gradient(180deg, rgb(18 30 26 / 56%) 0%, rgb(11 18 15 / 42%) 100%);
}
.about-link:hover::after {
    background: linear-gradient(180deg, rgb(30 50 43 / 68%) 0%, rgb(17 28 24 / 52%) 100%);
}
.about-link.active::after {
    background: linear-gradient(180deg, rgb(52 82 71 / 80%) 0%, rgb(24 40 34 / 62%) 100%);
}

.about-link--sub { border-radius: 6px; }
.about-link--sub::after { border-radius: 5px; }

/* ============================================================================
   2026-08-27 - Pale gold: divider artwork + primary CTA cooled down.
   After the green retone the decorative divider and the CTA gradient were the
   last saturated-orange elements on the page; against the new #131714 ground
   they read as neon rather than as gold. This block swaps the divider for a
   champagne recolour of the SAME 1045x68 artwork (identical dimensions, so
   nothing in the layout shifts) and lightens the CTA gradient and its glow.
   Appended block: delete it and the original decor.png and the old gradient
   come straight back. No !important is used - source order is enough.
   ============================================================================ */
.top_line::before {
    background-image: url("../img/decor-20260827-pale.png");
}

:root {
    /* was: #ffe9bd 0%, #c9861d 62%, #f0b44e 100% */
    --l2vex-public-cta-button: radial-gradient(130% 110% at 50% 0%, #fff6e2 0%, #d9a94a 62%, #f3d08a 100%);
    /* was: #fff3d2 0%, #dd9925 60%, #ffcb6b 100% */
    --l2vex-public-cta-button-hover: radial-gradient(130% 110% at 50% 0%, #fffaf0 0%, #e6bc60 60%, #ffe0a8 100%);
}

/* The glow around the CTA was the strongest orange left on the page. Same
   geometry, only the tint changes - leaving it would make the paler button
   look like it is lit by the old one. */
.btn-main,
#main.home-hero .btn-main,
.top--right-menu .btn-red {
    box-shadow: 0 16px 34px rgb(0 0 0 / 34%), 0 0 24px rgb(240 200 120 / 20%), inset 0 1px 0 rgb(255 244 220 / 45%);
}

/* the logged-in header button shares the CTA gradient, so it shares the glow */
.acp-panel-top-user {
    box-shadow: 0 10px 24px rgb(0 0 0 / 26%), 0 0 18px rgb(240 200 120 / 18%), inset 0 1px 0 rgb(255 244 220 / 45%);
}

/* ============================================================================
   2026-08-28 - Mobile drawer: give it back its height, and its palette.
   The drawer at :2031 declares `height: 100%`, but `.header` (:513) carries
   `backdrop-filter: blur(10px)`, and a backdrop-filter makes an element the
   containing block for its `position: fixed` descendants. So `100%` resolved
   against the ~70px header instead of the viewport; with `box-sizing:
   border-box` and `padding-top: 70px` the drawer collapsed to exactly its own
   padding - the small dark rectangle in the owner's screenshot - and every
   <li> spilled out below it with no background behind it.

   Viewport units are immune to that, because they measure the viewport no
   matter what the containing block is. `dvh` is used so the drawer still ends
   at the real bottom when the mobile browser's chrome shows or hides, with
   `vh` left in front of it as the fallback for engines without `dvh`.
   Appended block: delete it and the old behaviour returns.
   ============================================================================ */

@media only screen and (max-width: 960px) {
    .top_menu {
        height: 100vh;
        height: 100dvh;
        overflow-y: auto;

        /* the base rule sets `align-items: center` for the horizontal desktop
           bar; in `flex-direction: column` that centres the links instead,
           which fights the drawer's own `padding-left: 20px`. */
        align-items: stretch;

        /* was #221e1d - the warm brown the site left behind on 2026-08-27.
           Slightly translucent with its own blur, so it reads as a drawer over
           the artwork rather than as a flat slab, and still opaque enough for
           white text. */
        background-color: rgb(13 17 16 / 94%);
        -webkit-backdrop-filter: blur(14px);
        backdrop-filter: blur(14px);
        border-right: 1px solid rgb(226 169 79 / 22%);
        box-shadow: 18px 0 42px rgb(0 0 0 / 38%);
    }

    .top_menu .nav-link {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 14px 0;
    }
}

/* ============================================================================
   2026-08-28 - Features "Section Menu" toggle (mobile) joins the current look.
   `.about-menu-toggle` (:2123) was left on the Round 2011 idiom - 9px chamfer,
   60% gold ring, warm brown interior rgb(74 42 14 / 94%) -> rgb(43 24 8 / 94%).
   The 2026-08-27 block re-styled `.about-link` beside it to a rounded,
   translucent green-glass button but never reached this one, because it only
   appears under 675px. The values below are copied verbatim from that block, so
   the toggle and the links it opens now read as the same control.

   The `background` shorthand is restated in full rather than patched: the old
   value carries two diagonal chamfer patches as separate layers, and they would
   keep painting if only the last layer were replaced.
   ============================================================================ */

@media only screen and (max-width: 675px) {
    .about-menu-toggle {
        clip-path: none;
        border-radius: 8px;
        border-color: rgb(226 169 79 / 34%);
        background: linear-gradient(180deg, rgb(18 30 26 / 56%) 0%, rgb(11 18 15 / 42%) 100%);
    }
    .about-menu-toggle:hover,
    .about-menu-toggle:active {
        border-color: rgb(233 179 92 / 62%);
        background: linear-gradient(180deg, rgb(30 50 43 / 68%) 0%, rgb(17 28 24 / 52%) 100%);
    }
}

/* ============================================================================
   2026-08-28 - /download Step-1 CTAs join the current button look.
   `.startgame .btn-red` (Register) and `.startgame .btn-golden` (Log in) at
   :1225 were the last selectors on the Round 2011 idiom - 9px chamfer, 60% gold
   ring, warm brown rgb(52 29 11 / 92%) -> rgb(30 17 7 / 92%). Found by sweeping
   public.css for surviving chamfers after the Section Menu fix.

   The ring is kept at 45%, not dropped to the 34% used for `.about-link`:
   these are the download page's conversion controls and should carry more
   weight than a nav link. Their visual weight is otherwise unchanged - they
   were already an outline with a dark fill, so this updates the idiom without
   altering the hierarchy between them.

   The `background` shorthand is restated in full: the old value carries two
   diagonal chamfer patches as separate layers that would keep painting.
   ============================================================================ */

.startgame .btn-red,
.startgame .btn-golden {
    clip-path: none;
    border-radius: 8px;
    border-color: rgb(226 169 79 / 45%);
    background: linear-gradient(180deg, rgb(18 30 26 / 62%) 0%, rgb(11 18 15 / 48%) 100%);
    box-shadow: inset 0 1px 0 rgb(214 234 224 / 10%);
}
.startgame .btn-red:hover,
.startgame .btn-golden:hover {
    border-color: rgb(248 194 100 / 85%);
    background: linear-gradient(180deg, rgb(32 54 46 / 72%) 0%, rgb(18 30 26 / 56%) 100%);
}

/* 20260905 square feature media (Round 2033): in-game windows with square corners - no radius / border / plate; LAST so it wins over the gallery video rule */
.l2vex-feature-shot--square img,
.l2vex-feature-shot--square video,
.l2vex-feature-gallery--square img,
.l2vex-feature-gallery--square video {
    border: 0;
    border-radius: 0;
    background: none;
}

/* 20260905 Round 2033: the Change Class clip shown larger (owner: 573x322 -> ~755x435); the 1280x720 source is capped at 570px by the gallery video rule above */
.l2vex-feature-gallery--wide video {
    max-width: min(100%, 755px);
}

/* =========================================================================
   Round 2034 - Season 2 countdown on the home hero.
   Sits directly under .hero-card and mirrors its width and alignment, so the
   two read as one stacked panel. The JS in pages/main.blade.php switches the
   target from the Open Beta to the Grand Opening on its own; both targets are
   absolute UTC instants, so a visitor in any timezone sees the right numbers.
   ========================================================================= */
.home-countdown {
    position: relative;
    width: 64%;
    max-width: 64%;
    margin: 18px 0 0 auto;
    transform: translateX(26px);
    padding: 20px 30px 18px;
    border-radius: 16px;
    border: 1px solid rgb(248 194 100 / 24%);
    background: var(--l2vex-public-glass), rgb(10 7 5 / 55%);
    box-shadow: var(--l2vex-public-shadow);
    text-align: center;
    overflow: hidden;
}
.home-countdown::after {
    content: "";
    position: absolute;
    top: 0;
    left: 10%;
    right: 10%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgb(255 224 157 / 40%), transparent);
}
.home-countdown__label {
    font-family: var(--font-accent-regular), serif;
    font-size: 13px;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: rgb(255 248 234 / 88%);
    text-shadow: 0 2px 12px rgb(0 0 0 / 70%);
    margin-bottom: 12px;
}
.home-countdown__clock {
    display: flex;
    align-items: stretch;
    justify-content: center;
    gap: 10px;
}
.cd-cell {
    flex: 0 1 104px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 10px 6px 8px;
    border-radius: 10px;
    border: 1px solid rgb(255 215 130 / 16%);
    background: linear-gradient(180deg, rgb(28 16 9 / 72%) 0%, rgb(14 9 6 / 78%) 100%);
}
.cd-cell__n {
    font-family: var(--font-accent-bold), serif;
    font-size: 38px;
    line-height: 1.02;
    color: var(--color-primary);
    font-variant-numeric: tabular-nums;
    text-shadow: 0 3px 18px rgb(0 0 0 / 70%), 0 0 22px rgb(255 215 130 / 18%);
}
.cd-cell__u {
    font-family: Montserrat-SemiBold, Arial, sans-serif;
    font-size: 10px;
    letter-spacing: .8px;
    text-transform: uppercase;
    color: rgb(255 248 234 / 62%);
}
.home-countdown__dates {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px 26px;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid rgb(255 215 130 / 14%);
}
.cd-date {
    display: flex;
    align-items: baseline;
    gap: 8px;
}
.cd-date__k {
    font-family: Montserrat-SemiBold, Arial, sans-serif;
    font-size: 10.5px;
    letter-spacing: .5px;
    text-transform: uppercase;
    color: rgb(255 248 234 / 58%);
}
.cd-date__v {
    font-family: var(--font-regular), serif;
    font-size: 13.5px;
    color: rgb(255 248 234 / 92%);
}
.cd-date--main .cd-date__v { color: var(--color-primary); }
.cd-date__v i {
    font-style: normal;
    font-size: 11.5px;
    color: rgb(255 248 234 / 52%);
}
.home-countdown.is-live .home-countdown__clock { display: none; }
.home-countdown.is-live .home-countdown__label {
    font-size: 19px;
    letter-spacing: 2px;
    color: var(--color-primary);
    margin-bottom: 0;
}
@media (max-width: 1199px) {
    .home-countdown { width: 100%; max-width: 100%; transform: none; }
}
@media (max-width: 767px) {
    .home-countdown { padding: 16px 12px 14px; border-radius: 14px; }
    .home-countdown__clock { gap: 6px; }
    .cd-cell { flex: 1 1 0; padding: 8px 2px 6px; }
    .cd-cell__n { font-size: 27px; }
    .home-countdown__dates { gap: 6px 14px; }
    .cd-date { flex: 1 1 100%; justify-content: center; }
}

/* Round 2035d - Power Shirt: the rate ladder and the tooltip shot sit on ONE row, top-aligned.
   Before this they stacked, so the image started well below the last rate line and read as a
   second, unrelated block. Wraps only inside this section; nothing else on the page changes. */
.l2vex-shirt-split {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 38px;
    flex-wrap: wrap;
    margin: 6px 0 2px;
}
.l2vex-shirt-split .l2vex-rate-blocks { margin: 0; flex: 0 1 auto; }
.l2vex-shirt-split .l2vex-rate-block { margin: 0; }
.l2vex-shirt-split .l2vex-feature-shot {
    width: auto;
    margin: 0;
    padding: 0;
    flex: 0 0 auto;
}
@media (max-width: 767px) {
    .l2vex-shirt-split { gap: 14px; }
    .l2vex-shirt-split .l2vex-feature-shot { width: 100%; justify-content: center; }
}
/* ============================================================================
   Castle Siege Section - L2 Style
   ============================================================================ */
.castle-main-title {
    color: #f3d08a;
    font-family: var(--font-accent-bold), serif;
    font-size: 22px;
    text-transform: uppercase;
    margin-bottom: 20px;
}

.castle-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.castle-card {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.castle-name {
    color: #ffd782;
    font-family: var(--font-accent-bold), serif;
    font-size: 16px;
    text-align: center;
    margin-bottom: 8px;
    letter-spacing: 0.5px;
}

.castle-body {
    display: flex;
    gap: 15px;
    width: 100%;
    align-items: stretch;
}

.castle-img {
    flex: 0 0 160px;
    height: 100px;
    border: 1px solid rgb(226 169 79 / 30%);
    border-radius: 4px;
    overflow: hidden;
    background: #000;
}

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

.castle-details {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.castle-row {
    display: flex;
    gap: 6px;
}

.castle-cell {
    flex: 1;
    background: rgba(20, 25, 23, 0.7);
    border: 1px dashed rgba(180, 180, 180, 0.25);
    padding: 6px 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 44px;
    border-radius: 3px;
}

.castle-cell.wide {
    flex: 1.5;
}

.castle-label {
    font-size: 11px;
    color: #a8a8a8;
    font-family: var(--font-regular), sans-serif;
    margin-bottom: 2px;
}

.castle-value {
    font-size: 12px;
    color: #e2c98f;
    font-family: var(--font-bold), sans-serif;
}

.castle-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 10px 0;
    position: relative;
    width: 100%;
}

.castle-divider::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 10%;
    right: 10%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(226, 169, 79, 0.3), transparent);
}

.castle-divider span {
    color: rgba(226, 169 79, 0.4);
    font-size: 10px;
    background: #0f1613;
    padding: 0 8px;
    position: relative;
    z-index: 1;
}

@media (max-width: 600px) {
    .castle-body {
        flex-direction: column;
    }
    .castle-img {
        flex: auto;
        width: 100%;
        height: 120px;
    }
    .castle-row {
        flex-direction: column;
    }
}