@font-face { font-family: 'albertus'; src: url("../fonts/albertus.eot"); src: url("../fonts/albertus.eot?iefix") format("eot"), url("../fonts/albertus.woff") format("woff"), url("../fonts/albertus.ttf") format("truetype"); font-weight: normal; font-style: normal; }
@font-face { font-family: 'DINNextW1G'; src: url("../fonts/DINNextW1G.eot"); src: url("../fonts/DINNextW1G.eot?iefix") format("eot"), url("../fonts/DINNextW1G.woff") format("woff"), url("../fonts/DINNextW1G.ttf") format("truetype"); font-weight: normal; font-style: normal; }
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; vertical-align: baseline; }

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }

body { line-height: 1; }

ol, ul { list-style: none; }

blockquote, q { quotes: none; }

blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }

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


* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

html, body { position: relative; overflow-x: hidden; }

body { width: 100%; background: url(../images/top-bg.jpg) center top no-repeat, url(../images/bottom-bg.jpg) center bottom no-repeat; background-color: #100a16; font-family: 'albertus'; font-size: 18px; color: #898791; min-height: 100vh; }

a { transition: all 0.3s ease; color: #e6e3f4; text-decoration: none; }

a:hover { text-decoration: none; }

p { margin-bottom: 20px; }

h1, h2, h3, h4 { color: #fbd181; margin-bottom: 20px; line-height: 1.2; }

h1 { font-size: 30px; }

h2 { font-size: 26px; }

h3 { font-size: 22px; }

h4 { font-size: 18px; }

table { width: 100%; margin-bottom: 15px; }
table td { border-collapse: collapse; padding: 10px;}


.cells { border: 1px solid rgb(78 77 74 / 0.10); }

img { max-width: 100%; }

caption { margin-bottom: 15px; }

select { background: #1d1d28; min-width: 150px; border: 1px solid #1d1d28; color: #7d7c92; margin-bottom: 15px; padding: 12px 40px 12px 20px; position: relative; -webkit-appearance: none; background-image: url(../images/icon-drop.png); background-position: right 10px center; background-repeat: no-repeat; -moz-appearance: none; text-indent: 0.01px; text-overflow: ''; -ms-appearance: none; appearance: none !important; cursor: pointer; }

input, textarea { background: rgba(29, 29, 40, 0.7); border: 1px solid rgba(29, 29, 40, 0.7); color: #7d7c92; position: relative; font-size: 18px; width: 100%; font-family: 'DINNextW1G'; padding: 14px 18px; border-radius: 6px; }

button, .button { transition: all 0.3s ease; cursor: pointer; background: none; color: #fbd181; position: relative; z-index: 1; text-align: center; border: 2px solid #fbd181; border-radius: 6px; display: inline-flex; align-items: center; font-size: 16px; text-transform: uppercase; padding: 14px 16px; }
button:hover, .button:hover { background: rgba(251, 209, 129, 0.3); color: #fff; }

.button { text-decoration: none; }

.button-white { border: 2px solid rgba(142, 148, 163, 0.37); color: #afadb5; }
.button-white:hover { background: rgba(142, 148, 163, 0.1); }

.button-small { font-size: 14px; padding: 14px 18px; }

:focus { outline: none; }

::-webkit-input-placeholder { color: #66647e; }

::-moz-placeholder { color: #66647e; }

:-moz-placeholder { color: #66647e; }

:-ms-input-placeholder { color: #66647e; }

:root { --menu-margin: 0px; }

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

.flex { display: flex; flex-wrap: wrap; }

.flex-c { display: flex; align-items: center; flex-wrap: wrap; }

.flex-s { display: flex; justify-content: space-between; flex-wrap: wrap; }

.flex-s-c { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; }

.flex-c-c { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; }

.bright:hover { filter: brightness(120%); }

.menu-wrapper { position: relative; display: flex; justify-content: space-between; align-items: center; height: 120px; max-width: 700px; width: 100%; }

.menu-main { margin-right: var(--menu-margin); display: flex; align-items: center; height: 100%; gap: 6px; }

.menu__link {
    position: relative;
    text-transform: uppercase;
    text-decoration: none;
    padding: 8px 16px 10px;
    color: #6c6a7c;
    font-size: 14px;
    font-family: 'albertus', serif;
    font-weight: 400;
    letter-spacing: .16em;
    background: none;
    border: none;
    white-space: nowrap;
    transition: color .2s;
}
.menu__link::after {
    content: '';
    position: absolute;
    bottom: 0; left: 16px; right: 16px;
    height: 2px;
    background: #fbd181;
    box-shadow: 0 0 8px rgba(251, 209, 129, 0.6);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform .28s cubic-bezier(.4,0,.2,1);
    border-radius: 1px;
}
.menu__link:hover {
    color: #c5c2d5;
}
.menu__link:hover::after {
    transform: scaleX(1);
}
.menu__link.active {
    color: #fbd181;
}
.menu__link.active::after {
    transform: scaleX(1);
}


.menu-more { height: 100%; width: var(--more-width); margin-left: var(--more-margin); display: none; align-items: center; justify-content: center; flex-shrink: 0; cursor: pointer; }

.menu-more.active { display: inline-flex; }

.menu-sub { position: absolute; overflow: hidden; right: 0; top: 100%; background-color: rgba(28, 27, 47, 0.7); z-index: 20; display: flex; flex-direction: column; opacity: 0; visibility: hidden; transition: 0.3s; }
.menu-sub li a { display: block; padding: 15px 15px; }

.menu-more:hover .menu-sub { opacity: 1; visibility: visible; }


.topPanel-left, .topPanel-right { display: flex; align-items: center; }

.langBlock { position: relative; z-index: 3; width: 80px; height: 120px; display: flex; align-items: center; justify-content: center; }
.langBlock:hover img { border: 4px solid #5b5969; }
.langBlock img { width: 32px; height: 32px; border-radius: 50%; border: 4px solid #3c3b47; transition: 0.3s; }
.langBlock-active { padding: 10px; border-radius: 6px; cursor: pointer; transition: 0.3s; }
.langBlock-active span { position: relative; }
.langBlock-active span:after { content: ""; position: absolute; background: url(../images/icon-drop.png); width: 12px; height: 7px; top: 50%; margin-top: -3.5px; right: -20px; transition: 0.3s; opacity: 0.3; }
.langBlock-dropdown { position: absolute; left: 0; top: 100%; width: 100%; background-color: rgba(28, 27, 47, 0.7); padding: 10px 0; display: none; }
.langBlock-dropdown.show { display: block; }
.langBlock-dropdown a { display: flex; align-items: center; justify-content: center; padding: 10px; }
.langBlock-dropdown a img { margin-right: 6px; }


.online { display: flex; align-items: center; }

.online-flex { width: 74px; height: 74px; background: url(../images/online-bg.png) no-repeat; margin-left: 35px; }

.online-block { width: 74px; height: 74px; text-align: center; color: #e6e3f4; font-size: 16px; line-height: 1.2; padding-top: 20px; }
.online-block span { font-family: 'DINNextW1G'; font-size: 12px; display: block; }

.online-block-active { background: url(../images/online-pgrogress.png) no-repeat; }

.color-green { color: #c5e31e; }

.color-red { color: #ff6418; }

.user-enter { margin-right: 30px; border: 3px solid rgba(142, 148, 163, 0.4); border-radius: 6px; display: flex; align-items: center; color: #e6e3f4; font-size: 16px; text-transform: uppercase; padding: 14px 16px; }
.user-enter:hover { background: rgba(255, 255, 255, 0.1); }

.user-login { border: 3px solid rgba(142, 148, 163, 0.4); border-radius: 6px; display: flex; align-items: center; color: #e6e3f4; font-size: 16px; text-transform: uppercase; padding: 14px 16px; }
.user-login:hover { background: rgba(255, 255, 255, 0.1); }

.user-forgot { margin-right: 10px; border: 3px solid rgba(142, 148, 163, 0.4); border-radius: 6px; display: flex; align-items: center; color: #e6e3f4; font-size: 16px; text-transform: uppercase; padding: 14px 16px; }
.user-forgot:hover { background: rgba(255, 255, 255, 0.1); }

.icon { display: inline-block; }

.icon-enter { background: url(../images/icon-enter.png); width: 22px; height: 17px; margin-right: 15px; }

.icon-battle { background: url(../images/icon-battle.png); width: 20px; height: 21px; margin-right: 15px; }

.header { height: 470px; position: relative; }

.logo { position: relative; z-index: 3; }

.headerInfo { text-align: right; max-width: 430px; position: relative; z-index: 3; }
.headerInfo-title { color: #e6e3f4; font-size: 40px; line-height: 1.3; margin-bottom: 20px; }
.headerInfo-title span { color: #fbd181; font-weight: bold; }
.headerInfo-text { font-family: 'DINNextW1G'; line-height: 1.4; margin-bottom: 25px; }

.hero { position: absolute; left: 50%; margin-left: -500px; width: 1000px; height: 971px; top: 0px; }

.hero_1 { background: url(../images/hero_1.png) no-repeat; }


.main { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; position: relative; z-index: 10; padding-bottom: 100px; border-bottom: 1px solid rgba(131, 128, 139, 0.1); }

.sidebar { width: 450px; }

.news { width: calc(100% - 450px - 50px); }

.tabs-button { display: flex; margin-left: -5px; margin-right: -5px; margin-bottom: 20px; }
.tabs-button li { width: 33.3%; margin: 0px 5px; background: #21202c; border-radius: 20px; height: 70px; line-height: 70px; text-align: center; color: #83808b; text-transform: uppercase; position: relative; transition: 0.3s; cursor: pointer; }
.tabs-button li.active { background: #272634; color: #fbd181; }
.tabs-button li.active:after { opacity: 1; }
.tabs-button li:after { content: ''; position: absolute; left: 50%; bottom: -27px; margin-left: -14px; border: 14px solid transparent; border-top: 14px solid #272634; transition: 0.3s; opacity: 0; }
.tabs-button li:hover { filter: brightness(120%); }

.tabContent { border-radius: 20px; }

.tabBlock { background: url(../images/table-bg.jpg) top center no-repeat; width: 100%; height: 518px; border-radius: 20px; padding: 10px 30px; position: relative; }

.table { position: absolute; height: 100%; width: 100%; }

.table-row {display: flex; align-items: center; width: 100%; border-bottom: 1px solid rgba(86, 84, 96, 0.15); height: 50px;}
.table-row:nth-last-child(2) { border-bottom: 0px }

.table-td { font-size: 16px; font-family: 'DINNextW1G'; color: #6c6a7c; height: 100%; display: flex; align-items: center; }
.table-td.number { width: 50px; border-right: 1px solid rgba(86, 84, 96, 0.15); }
.table-td.number span { width: 26px; height: 26px; line-height: 26px; border-radius: 4px; color: #6c6a7c; text-align: center; display: inline-block; }
.table-td.number span.n-top-1 { background: #fbd181; color: #ffffff;}
.table-td.number span.n-top-2 { background: #99979f; color: #ffffff;}
.table-td.number span.n-top-3 { background: #866c53; color: #ffffff;}
.table-td.number span.n-top-all { background: initial;}
.table-td.name { width: calc(100% - 50px - 65px); padding: 0px 20px; }
.table-td.name a { color: #6c6a7c; }
.table-td.name a:hover { color: #fff; }
.table-td.points { width: 65px; justify-content: flex-end; border-left: 1px solid rgba(86, 84, 96, 0.15); }

.table-row-top .table-td { color: #c5c2d5; font-weight: bold;}
.table-row-top .table-td span { color: #19171f; font-weight: bold; }
.table-row-top .table-td a { color: #c5c2d5; }

.tabs-content { transition: 0.3s; transform: scale(0); opacity: 0; }
.tabs-content.active { transform: scale(1); opacity: 1; }

.top { margin-bottom: 45px; }

.footer { padding: 80px 0px; display: flex; color: #5a5864; }
.footer a { color: #5a5864; }
.footer a:hover { color: #fff; }

.footerInfo { width: 35%; }
.footerInfo-title { margin-bottom: 25px; }
.footerInfo-text { font-family: 'DINNextW1G'; font-size: 12px; text-transform: uppercase; margin-bottom: 40px; line-height: 1.5; }

.footerInfo-buttons a { font-size: 12px; text-transform: uppercase; border-bottom: 1px solid #29252f; font-weight: bold; margin-right: 25px; }

.footerMenu { width: 45%; }
.footerMenu ul { padding-left: 160px; }
.footerMenu ul li { padding: 12px 0px; }
.footerMenu ul li a { font-size: 16px; text-transform: uppercase; }

.footerRight { width: 20%; display: flex; justify-content: flex-end; flex-wrap: wrap; }

.socBlock { display: inline-flex; margin-bottom: 30px; border-bottom: 1px solid rgba(154, 159, 181, 0.05); padding-bottom: 30px; }
.socBlock a { display: block; height: 22px; border: 2px solid rgba(85, 83, 95, 0.3); border-radius: 50%; height: 44px; width: 44px; margin: 6px; }
.socBlock a:hover { border: 2px solid #55535f; }
.socBlock a.dc { background: url(../images/icon-social.png) top 9px left 11px no-repeat; }
.socBlock a.fb { background: url(../images/icon-social.png) top 9px left -45px no-repeat; }
.socBlock a.yt { background: url(../images/icon-social.png) top 9px left -102px no-repeat; }

.dis-logo { text-align: right; width: 100%; }

.news-title { font-size: 38px; text-transform: uppercase; padding: 16px 0px; margin-bottom: 20px; color: #e6e3f4; }
.news-title span { color: #fbd181; padding-left: 5px; }

.newsBlock { background-color: #242430; border-radius: 20px; width: 100%; height: 370px; background-position: center right; background-repeat: no-repeat; background-size: cover; position: relative; padding: 30px 30px 30px 75px; margin-bottom: 20px; transition: 0.3s; }
.newsBlock-date { position: absolute; background: #fbd181; width: 55px; height: 65px; border-radius: 6px; left: -10px; top: 25px; color: #242430; text-align: center; font-size: 26px; padding-top: 7px; }
.newsBlock-date span { font-size: 17px; font-weight: bold; }
.newsBlock-title { max-width: 370px; margin-bottom: 25px; }
.newsBlock-title a { color: #afadb5; font-size: 26px; line-height: 1.3; }
.newsBlock-title a span { color: #fbd181; }
.newsBlock-title a:hover { color: #fff; }
.newsBlock-text { font-family: 'DINNextW1G'; line-height: 1.4; max-width: 420px; margin-bottom: 30px; }

.newsBlockFlex { display: flex; justify-content: space-between; flex-wrap: wrap; }

.newsBlockSmall { width: calc(50% - 10px); }
.newsBlockSmall .newsBlock-title { max-width: 280px; }
.newsBlockSmall .newsBlock-title a { font-size: 22px; }

.show-more { display: block; border-radius: 20px; background-color: #201d25; color: #5d5964; text-align: center; text-transform: uppercase; font-size: 22px; padding: 20px 20px; }
.show-more:hover { filter: brightness(120%); }

.modal_div { width: 100%; min-height: 600px; max-width: 600px; background: url(../images/modal-bg.jpg) center top no-repeat; background-size: cover; background-color: rgba(0, 0, 0, 0.95); position: fixed; top: 15%; left: 50%; margin-left: -300px; display: none; opacity: 0; z-index: 35; padding: 50px 60px; box-shadow: 0px 10px 20px 1px rgba(0, 0, 0, 0.5); border-radius: 20px; }

.modal_div .modal_close { width: 24px; height: 24px; position: absolute; top: -28px; right: -28px; cursor: pointer; display: block; background: url(../images/close.png) no-repeat; }

#overlay { z-index: 30; position: fixed; background-color: #070a11; opacity: 0.8; width: 100%; height: 100%; top: 0; left: 0; cursor: pointer; display: none; }

.modal-title { margin-bottom: 30px; }
.modal-title span { color: #e6e3f4; font-size: 26px; text-transform: uppercase; }
.modal-title a { padding: 9px 12px; }

.checkbox-container { display: block; position: relative; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; padding-right: 30px; }

.checkbox-container input { position: absolute; opacity: 0; cursor: pointer; height: 0; width: 0; padding: 0px; border: none; }

.checkmark { position: absolute; top: -10px; left: 0; height: 20px; width: 20px; background-color: #1d1d28; border-radius: 3px; }

.checkbox-container:hover input ~ .checkmark { background-color: #1d1d28; }

.checkbox-container input:checked ~ .checkmark { background-color: #1d1d28; }

.checkmark:after { content: ""; position: absolute; display: none; }

.checkbox-container input:checked ~ .checkmark:after { display: block; }

.checkbox-container .checkmark:after { left: 5px; top: 5px; width: 10px; height: 10px; background: #fbd181; border-radius: 3px; }

.formGroup { margin-bottom: 20px; width: 95%;}
.formGroup p { color: #e6e3f4; font-size: 14px; text-transform: uppercase; margin-bottom: 15px; font-family: 'DINNextW1G'; }

.formButtons button:not(:last-child), .formButtons .button:not(:last-child) { margin-right: 10px; }

.rules { display: flex; align-items: center; margin-bottom: 30px; padding-top: 10px; position: relative; }
.rules a { color: #fbd181; text-decoration: underline; }
.rules a:hover { text-decoration: none; }

.btn-mobile { position: fixed; transition: 0.3s; left: 14px; top: 16px; z-index: 23; display: none; padding: 8px; background: #21202c; border: 1px solid rgba(86,84,96,0.3); border-radius: 8px; }
.btn-mobile span { display: block; width: 24px; height: 2px; margin: 5px 0; background: #83808b; position: relative; z-index: 22; border-radius: 2px; transition: background .2s; }
.btn-mobile.active { left: 240px; }
.btn-mobile.active span:nth-child(1) { transform: rotate(45deg); top: 6px; }
.btn-mobile.active span:nth-child(2) { display: none; }
.btn-mobile.active span:nth-child(3) { transform: rotate(-45deg); bottom: 6px; }

.mobile-menu { display: none; }

.modal_div { height: 80%; overflow: hidden; }

.modalContent { height: 100%; overflow-y: auto; }

/* .content { background: #21202c; border-radius: 20px; padding: 20px; width: calc(100% - 450px - 50px); font-family: 'DINNextW1G'; line-height: 1.4; } */
.content { background: #21202c; border-radius: 20px; padding: 20px; font-family: 'DINNextW1G'; line-height: 1.4; }
.content a { color: #fbd181; text-decoration: none; }
.content a:hover { text-decoration: none; }

@media (max-width: 1440px) { .wrapper { padding: 0px 10px; }
  .menu-wrapper { max-width: 600px; }
  .footerMenu ul { padding-left: 60px; }
  .user-enter { margin-right: 0px; } }
@media (min-width: 993px) and (max-width: 1200px) { .newsBlockSmall { width: 100%; } }
@media (max-width: 1100px) { .menu-wrapper { max-width: 500px; } }
@media (max-width: 993px) { .topPanel-left { display: block; position: fixed; width: 280px; height: 100%; left: -280px; top: 0; background: #1a1929; border-right: 1px solid rgba(86,84,96,0.2); z-index: 20; padding: 20px; transition: 0.3s; box-shadow: 4px 0 32px rgba(0,0,0,0.5); }
  .topPanel-left.active { left: 0; }
  .mobile-menu { display: block; padding-top: 80px; padding-left: 20px; padding-right: 20px; }
  .mobile-menu li { padding: 0; border-bottom: 1px solid rgba(86,84,96,0.15); }
  .mobile-menu li:last-child { border-bottom: none; }
  .mobile-menu li a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-transform: uppercase;
    text-decoration: none;
    padding: 16px 4px;
    color: #6c6a7c;
    font-size: 14px;
    font-family: 'albertus', serif;
    letter-spacing: .16em;
    background: none;
    border: none;
    transition: color .2s, padding-left .2s;
  }
  .mobile-menu li a::after {
    content: '›';
    font-size: 16px;
    color: #565460;
    transition: color .2s, transform .2s;
  }
  .mobile-menu li a:hover {
    color: #c5c2d5;
    padding-left: 6px;
  }
  .mobile-menu li a:hover::after {
    color: #fbd181;
    transform: translateX(3px);
  }
  .mobile-menu li a.active {
    color: #fbd181;
  }
  .mobile-menu li a.active::after {
    color: #fbd181;
  }
  .menu-wrapper { display: none !important; }
  .main { flex-wrap: wrap; flex-direction: column-reverse; }
  .sidebar, .news, .logo, .headerInfo { width: 100%; }
  .news { margin-bottom: 40px; }
  .tabBlock { background: #21202c; }
  .header { height: auto; padding: 50px 0px 50px 0px; text-align: center; }
  .headerInfo { max-width: 100%; text-align: center; }
  .topPanel-right { height: 120px; justify-content: flex-end; width: 100%; }
  .btn-mobile { display: block; }
  .langBlock { position: absolute; top: 0px; left: 0; height: 60px; }
  .langBlock-dropdown { background: #1c1b2f; }
  .content { width: 100%; margin-bottom: 40px; } }
@media (max-width: 769px) { .newsBlockSmall { width: 100%; }
  .footer { flex-wrap: wrap; }
  .footerInfo { width: 100%; margin-bottom: 30px; }
  .footerMenu, .footerRight { width: 50%; }
  .footerMenu ul { padding-left: 0px; padding-right: 15px; }
  .modal_div .modal_close { right: 0px; }
  .modal_div { width: 100%; left: 0; margin-left: 0px; max-width: 100%; } }
@media (max-height: 650px) { .modalContent { padding-bottom: 100px; } }
@media (max-width: 525px) { .footerMenu, .footerRight { width: 100%; }
  .footerMenu { margin-bottom: 40px; }
  .footerRight { justify-content: center; }
  .dis-logo { text-align: center; }
  .online-flex { margin-left: 10px; }
  .user-enter { text-align: center; }
  .user-enter i { display: none; }
  .user-enter { font-size: 14px; padding: 10px 14px; }
  .modal_div { padding: 50px 10px; } }

/*# sourceMappingURL=style.css.map */

/*********animation**********/
.sparks { position: absolute; width: 1200px; left: 50%; bottom: -100px; z-index: 1; }
.sparks > div { position: absolute; }
.sparks .spark_1 { background: url(../images/spark_1.png) no-repeat; width: 764px; height: 313px; right: 0; bottom: -320px; -webkit-transform: scale(0.6); transform: scale(0.6); -webkit-animation: spark-1 4s linear infinite; animation: spark-1 4s linear infinite; -webkit-animation-delay: 1s; animation-delay: 1s; }
.sparks .spark_2 { background: url(../images/spark_2.png) no-repeat; width: 179px; height: 335px; right: 230px; bottom: -320px; -webkit-transform: scale(0.6); transform: scale(0.6); -webkit-animation: spark-1 4s linear infinite; animation: spark-1 4s linear infinite; -webkit-animation-delay: 2s; animation-delay: 2s; }
.sparks .spark_3 { background: url(../images/spark_3.png) no-repeat; width: 128px; height: 165px; right: 280px; bottom: -140px; -webkit-transform: scale(0.6); transform: scale(0.6); -webkit-animation: spark-3 4s linear infinite; animation: spark-3 4s linear infinite; -webkit-animation-delay: 2s; animation-delay: 2s; }
.sparks .spark-big { background: url(../images/spark_4.png) no-repeat; width: 794px; height: 176px; right: 0; bottom: -180px; -webkit-transform: scale(0.6); transform: scale(0.6); -webkit-animation: spark-5 4s linear infinite; animation: spark-5 4s linear infinite; }
.sparks .spark_5 { -webkit-animation-delay: 2s; animation-delay: 2s; right: 40px; }

.sparks_2 .spark_1 { background: url(../images/spark_1.png) no-repeat; -webkit-animation-delay: 2s; animation-delay: 2s; }
.sparks_2 .spark_2 { background: url(../images/spark_2.png) no-repeat; -webkit-animation-delay: 3s; animation-delay: 3s; }
.sparks_2 .spark_3 { background: url(../images/spark_3.png) no-repeat; -webkit-animation-delay: 3s; animation-delay: 3s; }
.sparks_2 .spark-big { background: url(../images/spark_4.png) no-repeat; }
.sparks_2 .spark_5 { -webkit-animation-delay: 3s; animation-delay: 3s; }

.sparks_2 { margin-left: -500px;}

@-webkit-keyframes spark-1 { 0% { bottom: -320px; -webkit-transform: scale(0.6); transform: scale(0.6); opacity: 0; }
  25% { bottom: -240px; -webkit-transform: scale(0.7); transform: scale(0.7); opacity: 1; }
  50% { bottom: -160px; -webkit-transform: scale(0.8); transform: scale(0.8); opacity: 1; }
  75% { bottom: -80px; -webkit-transform: scale(0.9); transform: scale(0.9); opacity: 0.5; }
  100% { bottom: 0px; -webkit-transform: scale(1); transform: scale(1); opacity: 0; } }

@keyframes spark-1 { 0% { bottom: -320px; -webkit-transform: scale(0.6); transform: scale(0.6); opacity: 0; }
  25% { bottom: -240px; -webkit-transform: scale(0.7); transform: scale(0.7); opacity: 1; }
  50% { bottom: -160px; -webkit-transform: scale(0.8); transform: scale(0.8); opacity: 1; }
  75% { bottom: -80px; -webkit-transform: scale(0.9); transform: scale(0.9); opacity: 0.5; }
  100% { bottom: 0px; -webkit-transform: scale(1); transform: scale(1); opacity: 0; } }
@-webkit-keyframes spark-3 { 0% { bottom: -140px; -webkit-transform: scale(0.6); transform: scale(0.6); opacity: 0; }
  25% { bottom: -80px; -webkit-transform: scale(0.7); transform: scale(0.7); opacity: 1; }
  50% { bottom: -20px; -webkit-transform: scale(0.8); transform: scale(0.8); opacity: 1; }
  75% { bottom: 40px; -webkit-transform: scale(0.9); transform: scale(0.9); opacity: 0.5; }
  100% { bottom: 100px; -webkit-transform: scale(1); transform: scale(1); opacity: 0; } }
@keyframes spark-3 { 0% { bottom: -140px; -webkit-transform: scale(0.6); transform: scale(0.6); opacity: 0; }
  25% { bottom: -80px; -webkit-transform: scale(0.7); transform: scale(0.7); opacity: 1; }
  50% { bottom: -20px; -webkit-transform: scale(0.8); transform: scale(0.8); opacity: 1; }
  75% { bottom: 40px; -webkit-transform: scale(0.9); transform: scale(0.9); opacity: 0.5; }
  100% { bottom: 100px; -webkit-transform: scale(1); transform: scale(1); opacity: 0; } }
@-webkit-keyframes spark-5 { 0% { bottom: -180px; -webkit-transform: scale(0.6); transform: scale(0.6); opacity: 0; }
  25% { bottom: -120px; -webkit-transform: scale(0.7); transform: scale(0.7); opacity: 1; }
  50% { bottom: -60px; -webkit-transform: scale(0.8); transform: scale(0.8); opacity: 1; }
  75% { bottom: 0px; -webkit-transform: scale(0.9); transform: scale(0.9); opacity: 0.5; }
  100% { bottom: 60px; -webkit-transform: scale(1); transform: scale(1); opacity: 0; } }
@keyframes spark-5 { 0% { bottom: -180px; -webkit-transform: scale(0.6); transform: scale(0.6); opacity: 0; }
  25% { bottom: -120px; -webkit-transform: scale(0.7); transform: scale(0.7); opacity: 1; }
  50% { bottom: -60px; -webkit-transform: scale(0.8); transform: scale(0.8); opacity: 1; }
  75% { bottom: 0px; -webkit-transform: scale(0.9); transform: scale(0.9); opacity: 0.5; }
  100% { bottom: 60px; -webkit-transform: scale(1); transform: scale(1); opacity: 0; } }


.smoke { position: absolute; left: 0; right: 0; top: 510px; height: 484px; width: 100%; background-image: url(../images/smoke.png); background-position: left top; background-repeat: repeat-x; -webkit-animation: smoke 20s linear infinite; animation: smoke 20s linear infinite; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; }

@-webkit-keyframes smoke { 0% { background-position: left -1920px top; }
  100% { background-position: left 1920px top; } }

@keyframes smoke { 0% { background-position: left -1920px top; }
  100% { background-position: left 1920px top; } }



.logout:hover {
	filter: brightness(200%);
}

.newsBlockDashboard { background-color: #1d1d28e6; border-radius: 20px; width: 100%; height: 500px; background-position: center right; background-repeat: no-repeat; background-size: cover; position: relative; padding: 30px 30px 30px 75px; margin-bottom: 20px; transition: 0.3s; }

.newsBlockAcount { background-color: #1d1d288f; width: 100%; height: 100%; border-radius: 20px; background-position: center right; background-repeat: no-repeat; background-size: cover; position: relative; padding: 50px 0 120px 50px; margin-bottom: 20px; transition: 0.3s; }

.dashboard-cell { width: 10%;}

.panel-heading { text-align: left; font-size: 16px; }

.list-custom { border-radius: 6px;}

.changepw {
	padding: 10px 10px;
}

.error{
	border-top: 5px solid #ff4149;
    background: rgba(255,65,73,.1);
	content: '\f348';
	padding: 15px;
	display: none;
}
.error.display-error{
	display:  block;
	margin-bottom: 20px;
	color: #f4000a;
	text-transform: uppercase;
	font-size: 14px;
}

.success{
	border-top: 5px solid #7bff07;
    background: rgb(0 255 19 / 10%);
    content: '\f348';
    padding: 15px;
	text-transform: uppercase;
	font-size: 14px;
	margin-bottom: 20px;
    width: 100%;
	color: #7bff07;
}

.success.display-success {
    display: block;
}

.forgotpw {
	transition: .2s;
}

.forgotpw:hover {
	color:#fbd181;
}


.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: rgba(28, 27, 47, 0.7);
  min-width: 95px;
  width: 100%;
  text-align-last: center;
  overflow: auto;
  z-index: 1;
}

.dropdown-content a {
  color: #e6e3f4;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown a:hover {color: rgb(251, 209, 129);}

.show {display: block;}

.feature-icon {
    width: 32px;
    margin: -18px 10px -15px 0;
    vertical-align: middle;
	border-radius: 50%;
	border: solid 2px;
}
 
.desc-icon {
    border-radius: 50%;
    padding: 0px;
    margin: 2px;
    box-shadow: none;
    border: solid 1px #fbd181;
    width: 26px;
	vertical-align: middle;
}

.inner-page__title {
  width: 100%;
  padding: 40px 30px;
  border-bottom: 1px solid rgba(129, 109, 161, 0.23);
  position: relative;
  z-index: 2;
}

@media (max-width: 1024px) {
  .inner-page__title {
    padding: 30px 20px;
  }
}

.inner-page__title-big {
  width: 100%;
  text-align: center;
  font-family: "albertus";
  color: #fff;
  font-size: 28px;
  line-height: 28px;
  text-transform: uppercase;
}

@media (max-width: 1024px) {
  .inner-page__title-big {
    font-size: 20px;
    line-height: 20px;
  }
}

.start-game {
  width: 100%;
}

.start-game__step {
  width: 44px;
  pointer-events: none;
  margin: 0 auto;
}

.start-game__box {
  width: 100%;
  padding: 50px 30px;
}

@media (max-width: 1024px) {
  .start-game__box {
    padding: 20px;
  }
}

.start-game__box:not(:last-child) {
  border-bottom: 1px solid rgba(129, 109, 161, 0.23);
}

.start-game__box-title {
  width: 100%;
  text-align: center;
  text-transform: uppercase;
  font-family: "albertus";
  color: #fff;
  font-weight: bold;
  font-size: 22px;
  line-height: 22px;
  margin-top: 15px;
}

.start-game__box-title span {
  color: #fbd181;
}

.start-game__box-sub {
  width: 100%;
  font-family: 'DINNextW1G', sans-serif;
  font-size: 16px;
  line-height: 24px;
  color: #a4a2a7;
  text-align: center;
  margin-top: 5px;
}

.start-game__box .start-reg-btn {
  width: 200px;
  margin: 20px auto 0px;
}

.start-game__box-links {
  width: calc( 100% + 10px);
  margin: 15px -5px -5px;
}

.start-game__box-link {
  width: 100%;
  position: relative;
  width: 180px;
  height: 110px;
  border: 1px solid #fbd181;
  border-radius: 15px;
  margin: 5px;
}

.start-game__box-link:after {
  content: '';
  width: calc( 100% - 10px);
  height: calc( 100% - 10px);
  position: absolute;
  top: 4px;
  left: 4px;
  border: 1px solid #21202c;
  border-radius: 12px;
  -webkit-transition: background-color .3s ease-in-out;
  transition: background-color .3s ease-in-out;
  z-index: 1;
}

.start-game__box-link:hover:after {
  background-color: #fbd181;
}

.start-game__box-link-content {
  width: 100%;
  position: relative;
  z-index: 2;
}

.start-game__box-link-icon {
  width: 44px;
  height: 44px;
  margin: -10px auto;
}

.start-game__box-link-icon img {
  width: 100%;
  height: 100%;
}

.start-game__box-link-name {
  width: 100%;
  font-size: 14px;
  font-family: 'DINNextW1G', sans-serif;
  color: white;
  font-weight: bold;
  text-transform: uppercase;
  text-align: center;
  margin-top: 10px;
}

.start-game__box-link-size {
  width: 100%;
  font-size: 12px;
  font-family: 'DINNextW1G', sans-serif;
  color: #6c6979;
  text-align: center;
  margin-top: 5px;
}

.btn {
  height: 44px;
  border: 1px solid #fbd181;
  border-radius: 44px;
  font-size: 16px;
  line-height: 16px;
  font-family: "albertus";
  color: #6c6979;
  background: rgba(0, 0, 0, 0);
  font-weight: bold;
  text-transform: uppercase;
  line-height: 42px;
  text-align: center;
  position: relative;
  -webkit-transition: color .3s ease-in-out;
  transition: color .3s ease-in-out;
  cursor: pointer;
  margin: 0px;
  padding: 0px;
}

.btn:hover, .btn.active {
  color: #fff;
}

.btn--red {
  border: 1px solid #fbd181;
  color: #e6e3f4;
}

.btn:after {
  content: '';
  border-width: 1px;
  border-color: #fbd181;
  border-style: solid;
  background-color: black;
  position: absolute;
  left: -3.8px;
  top: 0px;
  z-index: 1;
  margin: auto;
  bottom: 0px;
  width: 4.4px;
  height: 4.4px;
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
}

.btn--red:after {
  border-color: #fbd181;
}

.btn:before {
  content: '';
  border-width: 1px;
  border-color: #fbd181;
  border-style: solid;
  background-color: black;
  position: absolute;
  right: -3.8px;
  top: 0px;
  z-index: 1;
  margin: auto;
  bottom: 0px;
  width: 4.4px;
  height: 4.4px;
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
}

.btn--red:before {
  border-color: #fbd181;
}

.btn span {
  position: relative;
  width: 100%;
}

.btn span:after {
  content: '';
  border-radius: 44px;
  border-width: 1px;
  border-style: solid;
  position: absolute;
  left: 0px;
  top: 0px;
  right: 0px;
  bottom: 0px;
  margin: auto;
  z-index: -1;
  border-color: #21202c;
  width: calc( 100% - 8px);
  height: 36px;
  -webkit-transition: background-color .3s ease-in-out;
  transition: background-color .3s ease-in-out;
}

.btn:hover span:after,
.btn.active span:after {
  background-color: rgba(251, 209, 129, 1);
}

.btn--red span:after {
  border-color: rgba(251, 209, 129, 1);
}

.btn--red:hover span:after,
.btn--red.active span:after {
  background-color: rgba(251, 209, 129, 1);
}

.flex-cc {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

.flex-cc {
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.flex-cc {
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

/* ── Coin balance bar ── */
.donate-balance {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background: rgba(251, 209, 129, 0.06);
    border: 1px solid rgba(251, 209, 129, 0.2);
    border-radius: 12px;
    padding: 14px 22px;
    margin-bottom: 26px;
}
.donate-balance .bal-val {
    font-size: 26px;
    color: #fbd181;
    font-family: 'albertus';
    line-height: 1;
}
.donate-balance .bal-lbl {
    font-size: 11px;
    color: #6c6a7c;
    text-transform: uppercase;
    font-family: 'DINNextW1G';
}

/* ── Package cards ── */
.pkg-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 28px;
}
.pkg-card {
    flex: 1 1 120px;
    max-width: 150px;
    background: #1d1d28;
    border: 2px solid rgba(86, 84, 96, 0.2);
    border-radius: 14px;
    padding: 20px 12px 16px;
    text-align: center;
    cursor: pointer;
    transition: .25s;
    position: relative;
}
.pkg-card * { pointer-events: none; }
.pkg-card:hover,
.pkg-card.active { border-color: #fbd181; background: #272635; }
.pkg-badge {
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    background: #fbd181;
    color: #1a1929;
    font-size: 9px;
    font-weight: 800;
    text-transform: uppercase;
    padding: 2px 10px;
    border-radius: 20px;
    white-space: nowrap;
}
.pkg-coins {
    display: block;
    font-size: 24px;
    color: #fbd181;
    font-family: 'albertus';
    margin-bottom: 4px;
}
.pkg-label {
    display: block;
    font-size: 10px;
    color: #565460;
    text-transform: uppercase;
    font-family: 'DINNextW1G';
    margin-bottom: 12px;
}
.pkg-sep {
    width: 28px;
    height: 1px;
    background: rgba(86, 84, 96, 0.4);
    margin: 0 auto 10px;
}
.pkg-price {
    font-size: 13px;
    color: #c5c2d5;
    font-family: 'DINNextW1G';
}
.pkg-price small {
    font-size: 10px;
    color: #565460;
    display: block;
    margin-top: 2px;
}

/* ── Payment method cards ── */
.method-grid {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 24px;
}
.method-card {
    flex: 1 1 140px;
    max-width: 200px;
    background: #1d1d28;
    border: 2px solid rgba(86, 84, 96, 0.2);
    border-radius: 12px;
    padding: 16px;
    cursor: pointer;
    transition: .25s;
    display: flex;
    align-items: center;
    gap: 12px;
}
.method-card * { pointer-events: none; }
.method-card:hover,
.method-card.active { border-color: #fbd181; background: #272635; }
.method-card .m-icon      { font-size: 20px; }
.method-card .m-icon.pp   { color: #009cde; }
.method-card .m-icon.mp   { color: #00b1ea; }
.method-card .m-name      { font-family: 'DINNextW1G'; font-size: 13px; color: #c5c2d5; font-weight: 600; }
.method-card .m-sub       { font-size: 11px; color: #565460; margin-top: 1px; }

/* ── Order summary box ── */
.donate-summary {
    background: #1a1929;
    border: 1px solid rgba(86, 84, 96, 0.2);
    border-radius: 12px;
    padding: 18px 22px;
    margin-bottom: 22px;
    display: none;
}
.donate-summary table  { width: 100%; }
.donate-summary td     { padding: 6px 0; border: none; font-family: 'DINNextW1G'; font-size: 14px; }
.donate-summary td:first-child  { color: #565460; }
.donate-summary td:last-child   { color: #c5c2d5; text-align: right; }
.donate-summary .sum-total td:last-child { color: #fbd181; font-size: 17px; font-family: 'albertus'; }

/* ── Order detail view ── */
.order-detail {
    background: #1d1d28;
    border-radius: 14px;
    padding: 26px;
    font-family: 'DINNextW1G';
    margin-bottom: 20px;
}
.order-detail table          { width: 100%; }
.order-detail td             { padding: 8px 0; border-bottom: 1px solid rgba(86, 84, 96, 0.1); font-size: 14px; }
.order-detail td:first-child { color: #565460; width: 150px; }
.order-detail td:last-child  { color: #e6e3f4; text-align: right; }
.order-detail tr:last-child td { border: none; }

/* ── Order history list ── */
.order-history-head {
    display: flex;
    font-family: 'DINNextW1G';
    font-size: 11px;
    color: #565460;
    text-transform: uppercase;
    letter-spacing: .5px;
    padding: 0 4px 8px;
    border-bottom: 1px solid rgba(86, 84, 96, 0.2);
    margin-bottom: 4px;
}
.order-row {
    display: flex;
    align-items: center;
    padding: 9px 4px;
    border-bottom: 1px solid rgba(86, 84, 96, 0.07);
    font-family: 'DINNextW1G';
    font-size: 13px;
    transition: background .2s;
}
.order-row:hover     { background: rgba(255, 255, 255, 0.02); border-radius: 6px; }
.order-row:last-child { border: none; }
.c-id    { width: 70px; color: #565460; }
.c-coins { width: 100px; color: #fbd181; }
.c-val   { width: 100px; color: #c5c2d5; }
.c-meth  { width: 110px; color: #898791; }
.c-date  { flex: 1; color: #565460; font-size: 12px; }
.c-stat  { width: 90px; text-align: right; }

/* ── Payment buttons ── */
.btn-paypal {
    background: #003087;
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 13px 26px;
    font-size: 14px;
    cursor: pointer;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    transition: background .2s;
}
.btn-paypal:hover { background: #002068; color: #fff; }

.btn-mp {
    background: #009ee3;
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 13px 26px;
    font-size: 14px;
    cursor: pointer;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    transition: background .2s;
}
.btn-mp:hover { background: #0082bc; color: #fff; }

.pay-note {
    margin-top: 12px;
    font-size: 12px;
    color: #565460;
    font-family: 'DINNextW1G';
}

.button-red { border: 2px solid rgba(230, 57, 70, 0.37); color: #e63946; transition: background 0.3s ease; }
.button-red:hover { background: rgba(230, 57, 70, 0.1); }

/* ── Responsive ── */
@media (max-width: 640px) {
    .pkg-card  { flex: 1 1 90px; max-width: 120px; }
    .c-meth, .c-date { display: none; }
}

/* Dashboard — Control Panel redesign */

/* Top bar layout */
.dash-header          { display:flex; align-items:center; gap:10px; margin-bottom:28px; flex-wrap:wrap; }
.dash-tabs-wrap       { flex:1; min-width:0; }
.dash-actions         { display:flex; gap:8px; align-items:center; flex-shrink:0; }

/* Tabs inside dash-tabs-wrap (overrides global .tabs-button 33.3% width) */
.dash-tabs-wrap ul.tabs-caption              { display:flex; gap:8px; margin:0; padding:0; list-style:none; }
.dash-tabs-wrap ul.tabs-caption li           { flex:1; width:auto; height:54px; line-height:54px; border-radius:14px; text-align:center; font-size:13px; font-family:'DINNextW1G',sans-serif; text-transform:uppercase; cursor:pointer; transition:.25s; position:relative; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; padding:0 12px; background:#21202c; color:#83808b; }
.dash-tabs-wrap ul.tabs-caption li.active    { background:#272634; color:#fbd181; }
.dash-tabs-wrap ul.tabs-caption li.active:after { content:''; position:absolute; left:50%; bottom:-27px; margin-left:-14px; border:14px solid transparent; border-top:14px solid #272634; opacity:1; }
.dash-tabs-wrap ul.tabs-caption li:hover     { filter:brightness(125%); }

/* Action buttons (Admin + Logout) */
.dash-btn             { display:inline-flex; align-items:center; gap:7px; height:54px; padding:0 18px; border-radius:14px; font-size:13px; font-family:'DINNextW1G',sans-serif; text-transform:uppercase; white-space:nowrap; cursor:pointer; transition:.25s; text-decoration:none; border:1px solid rgba(86,84,96,0.3); background:#21202c; color:#83808b; }
.dash-btn:hover       { background: linear-gradient(135deg, #3a1820, #272634); border-color: #e63946; box-shadow: 0 0 16px rgba(230, 57, 70, 0.15); color: #e63946; }
.dash-btn-admin       { background:linear-gradient(135deg,#3a2a00,#21202c); border-color:rgba(251,209,129,0.4); color:#fbd181; font-weight:700; }
.dash-btn-admin:hover { background:linear-gradient(135deg,#4a3500,#2a2938); border-color:#fbd181; color:#fbd181; }
.dash-btn-donate       { background:linear-gradient(135deg,#3a2a00,#21202c); border-color:rgba(251,209,129,0.4); color:#fbd181; font-weight:700; }
.dash-btn-donate:hover { background:linear-gradient(135deg,#4a3500,#2a2938); border-color:#fbd181; color:#fbd181; }

/* Form inputs */
.dash-input           { width:100%; background:#13121c; border:1px solid rgba(86,84,96,0.35); border-radius:10px; color:#c5c2d5; font-family:'DINNextW1G',sans-serif; font-size:14px; padding:13px 46px 13px 16px; box-sizing:border-box; outline:none; transition:.2s; }
.dash-input:focus     { border-color:rgba(251,209,129,0.5); }
.dash-label           { display:block; font-size:11px; color:#565460; font-family:'DINNextW1G',sans-serif; text-transform:uppercase; letter-spacing:.5px; margin-bottom:8px; }
.dash-hint            { color:#565460; font-size:13px; font-family:'DINNextW1G',sans-serif; margin:0 0 20px 0; line-height:1.5; }
.dash-select-wrap     { position:relative; }
.dash-select-wrap .dash-input { padding-right:40px; appearance:none; -webkit-appearance:none; cursor:pointer; }
.dash-select-wrap .dash-chevron { position:absolute; right:14px; top:50%; transform:translateY(-50%); color:#565460; pointer-events:none; font-size:12px; }
.dash-eye             { position:absolute; right:14px; top:50%; transform:translateY(-50%); cursor:pointer; color:#565460; transition:.2s; }
.dash-eye:hover       { color:#c5c2d5; }

/* Unstuck submit button */
.btn-unstuck          { display:inline-flex; align-items:center; gap:9px; padding:13px 28px; background:linear-gradient(135deg,#1a2a3a,#21202c); border:1px solid rgba(79,188,100,0.4); border-radius:12px; color:#4fbc64; font-family:'DINNextW1G',sans-serif; font-size:14px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; cursor:pointer; transition:.25s; }
.btn-unstuck:hover    { background:linear-gradient(135deg,#1e3a22,#272634); border-color:#4fbc64; }

/* Change password submit button */
.btn-changepw         { display:inline-flex; align-items:center; gap:9px; padding:13px 28px; background:linear-gradient(135deg,#2a1a3a,#21202c); border:1px solid rgba(251,209,129,0.4); border-radius:12px; color:#fbd181; font-family:'DINNextW1G',sans-serif; font-size:14px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; cursor:pointer; transition:.25s; }
.btn-changepw:hover   { background:linear-gradient(135deg,#3a2050,#272634); border-color:#fbd181; }


/* User dropdown — navbar (index, download, features) */

.dropdown                    { position:relative; display:inline-block; }

.user-login                  { display:inline-flex; align-items:center; gap:9px; padding:10px 16px; background:#21202c; border:1px solid rgba(86,84,96,0.4); border-radius:10px; color:#c5c2d5; font-size:14px; font-family:'DINNextW1G',sans-serif; cursor:pointer; transition:.2s; white-space:nowrap; }
.user-login:hover            { background:#272634; border-color:rgba(251,209,129,0.45); color:#fbd181; }
.user-login .ul-avatar       { width:26px; height:26px; border-radius:50%; background:linear-gradient(135deg,#3a2a00,#272634); border:1px solid rgba(251,209,129,0.35); display:flex; align-items:center; justify-content:center; font-size:12px; color:#fbd181; flex-shrink:0; }
.user-login .ul-name         { color:#fbd181; font-weight:600; max-width:110px; overflow:hidden; text-overflow:ellipsis; }
.user-login .ul-chevron      { font-size:10px; color:#565460; margin-left:2px; transition:transform .2s; }
.user-login.open .ul-chevron { transform:rotate(180deg); }

.dropdown-content            { display:none; position:absolute; right:0; top:calc(100% + 8px); min-width:160px; background:#1a1928; border:1px solid rgba(86,84,96,0.3); border-radius:12px; overflow:hidden; z-index:100; box-shadow:0 8px 32px rgba(0,0,0,0.5); }
.dropdown-content.show       { display:block; animation:dropFade .15s ease; }

@keyframes dropFade { from { opacity:0; transform:translateY(-6px); } to { opacity:1; transform:translateY(0); } }

.dropdown-content a          { display:flex; align-items:center; gap:9px; padding:11px 16px; color:#83808b; font-size:13px; font-family:'DINNextW1G',sans-serif; text-decoration:none; transition:.15s; border-bottom:1px solid rgba(86,84,96,0.12); }
.dropdown-content a:last-of-type { border-bottom:none; }
.dropdown-content a:hover    { background:rgba(255,255,255,0.04); color:#c5c2d5; }
.dropdown-content a i        { width:14px; text-align:center; font-size:12px; }

.dd-item-admin               { color:#fbd181 !important; font-weight:700 !important; }
.dd-item-admin:hover         { background:rgba(251,209,129,0.06) !important; color:#fbd181 !important; }
.dd-item-logout              {}
.dd-item-logout:hover        { background:rgba(255,107,107,0.07) !important; color:#ff6b6b !important; }



/* ═══════════════════════════════════════════════════════
   DONATE PAGE — Extracted from inline styles
   ═══════════════════════════════════════════════════════ */

/* section-sep (was <style> inline in <head>) */
.section-sep {
    border: none;
    border-top: 1px solid rgba(86, 84, 96, 0.6);
    margin: 24px 0 22px;
}

/* Status badges */
.donate-status-pending   { color: #fbd181; }
.donate-status-paid      { color: #4fbc64; }
.donate-status-delivered { color: #c5e31e; }
.donate-status-cancelled { color: #ff6418; }
.donate-status-unknown   { color: #6c6a7c; }

/* Hidden utility (logout form, cancel form) */
.donate-hidden { display: none; }

/* Order title spacing */
.donate-order-title { margin-bottom: 20px; }

/* PayPal form spacing */
.donate-paypal-form { margin-bottom: 10px; }

/* Payment status messages */
.donate-msg-success   { color: #c5e31e; margin-top: 16px; }
.donate-msg-cancelled { color: #ff6418; margin-top: 16px; }
.donate-msg-error     { color: #ff6418; margin-bottom: 20px; }

/* Order actions row (Back / Cancel buttons) */
.donate-order-actions {
    margin-top: 30px;
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
}

/* Coin icon in balance block */
.donate-coin-icon {
    font-size: 22px;
    color: #fbd181;
}

/* Transfer button pushed right */
.donate-transfer-ml { margin-left: auto; }

/* Sub-section titles (Choose Package, Payment Method, My Orders) */
.donate-section-title {
    font-size: 15px;
    margin-bottom: 14px;
}

/* My Orders history block */
.donate-history-block { margin-top: 30px; }

/* Order # link in history */
.donate-order-link { color: #565460; }

/* Cancel modal sizing */
#cancelModal {
    min-height: auto;
    max-width: 600px;
    max-height: 300px;
    margin-left: -200px;
    padding: 40px 40px 35px;
}

/* Cancel modal body text */
.donate-modal-text {
    font-family: 'DINNextW1G';
    font-size: 15px;
    color: #898791;
    line-height: 1.6;
    margin-bottom: 30px;
}

/* "This action cannot be undone" */
.donate-modal-warning { color: #ff4149; }

/* Modal buttons row */
.donate-modal-actions {
    display: flex;
    gap: 12px;
}


/* ═══════════════════════════════════════════════════════
   DONATE BUTTONS — same language as dashboard
   ═══════════════════════════════════════════════════════ */

/* ── Back to Donate / Back ── */
.btn-donate-back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 13px 28px;
    background: #21202c;
    border: 1px solid rgba(86, 84, 96, 0.35);
    border-radius: 12px;
    color: #83808b;
    font-family: 'DINNextW1G', sans-serif;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    cursor: pointer;
    transition: .25s;
    text-decoration: none;
    line-height: 1;
    box-sizing: border-box;
}
.btn-donate-back:hover {
    background: #272634;
    border-color: rgba(197, 194, 213, 0.4);
    color: #c5c2d5;
}

/* ── Cancel Order / Yes Cancel ── */
.btn-donate-cancel {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 22px;
    background: linear-gradient(135deg, #2a1218, #21202c);
    border: 1px solid rgba(230, 57, 70, 0.4);
    border-radius: 12px;
    color: #e63946;
    font-family: 'DINNextW1G', sans-serif;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    cursor: pointer;
    transition: .25s;
}
.btn-donate-cancel:hover {
    background: linear-gradient(135deg, #3a1820, #272634);
    border-color: #e63946;
    box-shadow: 0 0 16px rgba(230, 57, 70, 0.15);
    color: #e63946;
}

/* ── Proceed to Payment ── */
.btn-donate-proceed {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 13px 28px;
    background: linear-gradient(135deg, #3a2a00, #21202c);
    border: 1px solid rgba(251, 209, 129, 0.45);
    border-radius: 12px;
    color: #fbd181;
    font-family: 'DINNextW1G', sans-serif;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    cursor: pointer;
    transition: .25s;
    line-height: 1;
    box-sizing: border-box;
    text-decoration: none;
}
.btn-donate-proceed:hover {
    background: linear-gradient(135deg, #4a3500, #2a2938);
    border-color: #fbd181;
    box-shadow: 0 0 20px rgba(251, 209, 129, 0.15);
    color: #fbd181;
}
/* ── Password wrapper & toggle ── */
.password-wrapper {
    position: relative;
}
.password-wrapper input {
    padding-right: 40px;
}
.toggle-password {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    color: #565460;
    transition: color .2s;
}
.toggle-password:hover { color: #c5c2d5; }

/* ═══════════════════════════════════════════════════════
   FEATURES PAGE — Two-panel layout
   ═══════════════════════════════════════════════════════ */

.ft-layout {
    display: flex;
    gap: 0;
    min-height: 500px;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid rgba(86,84,96,0.2);
}

/* ── Left nav ── */
.ft-nav {
    width: 220px;
    flex-shrink: 0;
    background: #18172200;
    border-right: 1px solid rgba(86,84,96,0.2);
    display: flex;
    flex-direction: column;
    padding: 6px 0;
}

.ft-nav-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    cursor: pointer;
    border-left: 3px solid transparent;
    border-bottom: 1px solid rgba(86,84,96,0.1);
    text-decoration: none;
    transition: background .2s, border-color .2s;
}
.ft-nav-item:last-child { border-bottom: none; }
.ft-nav-item:hover {
    background: rgba(86,84,96,0.1);
}
.ft-nav-item.active {
    background: rgba(251,209,129,0.05);
    border-left-color: #fbd181;
}

.ft-nav-icon {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    background: #21202c;
    border: 1px solid rgba(86,84,96,0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    color: #565460;
    flex-shrink: 0;
    transition: border-color .2s, color .2s;
}
.ft-nav-item.active .ft-nav-icon {
    border-color: rgba(251,209,129,0.4);
    color: #fbd181;
}

.ft-nav-text { display: flex; flex-direction: column; gap: 2px; }
.ft-nav-title {
    font-family: 'DINNextW1G', sans-serif;
    font-size: 12px;
    font-weight: 700;
    color: #83808b;
    text-transform: uppercase;
    letter-spacing: .04em;
    transition: color .2s;
}
.ft-nav-item.active .ft-nav-title { color: #fbd181; }
.ft-nav-sub {
    font-family: 'DINNextW1G', sans-serif;
    font-size: 10px;
    color: #4a4858;
}

/* ── Right content ── */
.ft-content { flex: 1; min-width: 0; }

.ft-panel { display: none; padding: 24px; }
.ft-panel.active { display: block; }

.ft-panel-header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 22px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(86,84,96,0.2);
}
.ft-panel-icon {
    width: 44px;
    height: 44px;
    background: linear-gradient(135deg, #3a2a00, #21202c);
    border: 1px solid rgba(251,209,129,0.35);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.ft-panel-icon i {
    font-size: 18px;
    color: #fbd181;
}
.ft-panel-title {
    font-family: 'albertus', serif;
    font-size: 16px;
    color: #c5c2d5;
    letter-spacing: .05em;
}
.ft-panel-sub {
    font-family: 'DINNextW1G', sans-serif;
    font-size: 11px;
    color: #565460;
    margin-top: 2px;
}

/* ── Key-value rows ── */
.ft-rows { display: flex; flex-direction: column; gap: 2px; margin-bottom: 20px; }
.ft-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: #1e1d29;
    border-radius: 8px;
    border: 1px solid transparent;
    transition: border-color .2s;
}
.ft-row:hover { border-color: rgba(86,84,96,0.3); }
.ft-row-img { width: 20px; height: 20px; object-fit: contain; flex-shrink: 0; }
.ft-row-label {
    font-family: 'DINNextW1G', sans-serif;
    font-size: 13px;
    color: #83808b;
    flex: 1;
}
.ft-row-val {
    font-family: 'DINNextW1G', sans-serif;
    font-size: 13px;
    font-weight: 700;
    color: #fbd181;
}
.ft-row-no { color: #e63946 !important; }

/* ── Info list (bullets) ── */
.ft-info-list { display: flex; flex-direction: column; gap: 8px; }
.ft-info-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 14px;
    background: #1a1929;
    border-radius: 8px;
    font-family: 'DINNextW1G', sans-serif;
    font-size: 13px;
    color: #83808b;
    line-height: 1.5;
}
.ft-info-item strong { color: #c5c2d5; }

/* ── Enchant block ── */
.ft-enchant-block {
    background: #1a1929;
    border: 1px solid rgba(86,84,96,0.2);
    border-radius: 10px;
    padding: 16px;
}
.ft-enchant-title {
    font-family: 'DINNextW1G', sans-serif;
    font-size: 11px;
    font-weight: 700;
    color: #565460;
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-bottom: 12px;
}
.ft-enchant-grid { display: flex; flex-direction: column; gap: 10px; }
.ft-enchant-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(86,84,96,0.1);
}
.ft-enchant-row:last-child { border-bottom: none; padding-bottom: 0; }
.ft-enchant-name {
    font-family: 'DINNextW1G', sans-serif;
    font-size: 12px;
    color: #83808b;
    width: 180px;
    flex-shrink: 0;
    padding-top: 2px;
}
.ft-enchant-chances {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.ft-enchant-chances span {
    font-family: 'DINNextW1G', sans-serif;
    font-size: 11px;
    font-weight: 700;
    color: #fbd181;
    background: rgba(251,209,129,0.06);
    border: 1px solid rgba(251,209,129,0.2);
    border-radius: 5px;
    padding: 2px 7px;
    white-space: nowrap;
}
.ft-enchant-chances em {
    font-style: normal;
    color: #898791;
    font-weight: 400;
    font-size: 10px;
}

/* ── Events ── */
.ft-event-list { display: flex; flex-direction: column; gap: 10px; }
.ft-event-item {
    background: #1e1d29;
    border: 1px solid rgba(86,84,96,0.2);
    border-radius: 10px;
    padding: 14px 16px;
}
.ft-event-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}
.ft-event-name {
    font-family: 'DINNextW1G', sans-serif;
    font-size: 13px;
    font-weight: 700;
    color: #c5c2d5;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.ft-event-times {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.ft-event-times span {
    font-family: 'DINNextW1G', sans-serif;
    font-size: 11px;
    font-weight: 700;
    color: #fbd181;
    background: rgba(251,209,129,0.06);
    border: 1px solid rgba(251,209,129,0.2);
    border-radius: 5px;
    padding: 3px 9px;
}

/* ── Commands ── */
.ft-cmd-list { display: flex; flex-direction: column; gap: 8px; }
.ft-cmd-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 12px 16px;
    background: #1e1d29;
    border: 1px solid rgba(86,84,96,0.15);
    border-radius: 10px;
}
.ft-cmd-code {
    font-family: 'DINNextW1G', monospace;
    font-size: 13px;
    font-weight: 700;
    color: #fbd181;
    background: rgba(251,209,129,0.07);
    border: 1px solid rgba(251,209,129,0.25);
    border-radius: 6px;
    padding: 3px 10px;
    white-space: nowrap;
    flex-shrink: 0;
}
.ft-cmd-desc {
    font-family: 'DINNextW1G', sans-serif;
    font-size: 13px;
    color: #83808b;
    line-height: 1.5;
    padding-top: 3px;
}

/* ── Responsive ── */
@media (max-width: 760px) {
    .ft-layout { flex-direction: column; }
    .ft-nav { width: 100%; flex-direction: row; flex-wrap: wrap; border-right: none; border-bottom: 1px solid rgba(86,84,96,0.2); }
    .ft-nav-item { flex: 1; min-width: 120px; border-left: none; border-bottom: 3px solid transparent; }
    .ft-nav-item.active { border-bottom-color: #fbd181; border-left-color: transparent; }
    .ft-nav-sub { display: none; }
    .ft-enchant-name { width: 120px; }
}

/* ── Siege notice ── */
.ft-siege-notice {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: rgba(230,57,70,0.07);
    border: 1px solid rgba(230,57,70,0.3);
    border-radius: 10px;
    padding: 12px 16px;
    font-family: 'DINNextW1G', sans-serif;
    font-size: 13px;
    color: #c5c2d5;
    margin-bottom: 20px;
    line-height: 1.5;
}
.ft-siege-notice i { color: #e63946; font-size: 14px; margin-top: 2px; flex-shrink: 0; }
.ft-siege-notice strong { color: #fbd181; }

/* ── Castle grid ── */
.ft-castle-grid {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.ft-castle-card {
    background: #1e1d29;
    border: 1px solid rgba(86,84,96,0.2);
    border-radius: 12px;
    overflow: hidden;
}
.ft-castle-img {
    height: 140px;
    background-size: cover;
    background-position: center top;
    position: relative;
}
.ft-castle-img::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 60px;
    background: linear-gradient(transparent, #1e1d29);
}
.ft-castle-body { padding: 14px 16px; }
.ft-castle-name {
    font-family: 'albertus', serif;
    font-size: 15px;
    color: #c5c2d5;
    letter-spacing: .04em;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.ft-castle-name i { color: #fbd181; font-size: 12px; }
.ft-castle-list {
    list-style: none;
    padding: 0; margin: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.ft-castle-list li {
    font-family: 'DINNextW1G', sans-serif;
    font-size: 12px;
    color: #83808b;
    padding-left: 14px;
    position: relative;
    line-height: 1.5;
}
.ft-castle-list li::before {
    content: '•';
    position: absolute;
    left: 0;
    color: #565460;
}
.ft-castle-list strong { color: #c5c2d5; }
.ft-skill {
    color: #fbd181;
    font-size: 11px;
}
.ft-cp {
    color: #4fbc64;
    font-weight: 700;
}

/* ── Raid bosses ── */
.ft-raid-banner {
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 18px;
    height: 80px;
}
.ft-raid-banner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}
.ft-raid-info { margin-bottom: 18px; display: flex; flex-direction: column; gap: 7px; }
.ft-raid-section-title {
    font-family: 'albertus', serif;
    font-size: 14px;
    color: #fbd181;
    letter-spacing: .06em;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(251,209,129,0.15);
}
.ft-boss-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    margin-bottom: 6px;
}
.ft-boss-card {
    background: #1e1d29;
    border: 1px solid rgba(86,84,96,0.2);
    border-radius: 10px;
    padding: 12px 14px;
    transition: border-color .2s;
}
.ft-boss-card:hover { border-color: rgba(251,209,129,0.25); }
.ft-boss-name {
    font-family: 'DINNextW1G', sans-serif;
    font-size: 13px;
    font-weight: 700;
    color: #c5c2d5;
    margin-bottom: 4px;
}
.ft-boss-time {
    font-family: 'DINNextW1G', sans-serif;
    font-size: 11px;
    color: #fbd181;
    margin-bottom: 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(86,84,96,0.15);
}
.ft-boss-drop {
    font-family: 'DINNextW1G', sans-serif;
    font-size: 12px;
    color: #83808b;
}
.ft-drop-rate {
    color: #4fbc64;
    font-weight: 700;
}

@media (max-width: 600px) {
    .ft-boss-grid { grid-template-columns: 1fr; }
}

/* ── Disabled castle ── */
.ft-castle-disabled { opacity: 0.5; filter: grayscale(0.8); }
.ft-castle-disabled .ft-castle-img { position: relative; }
.ft-castle-disabled-overlay {
    position: absolute;
    inset: 0;
    background: rgba(15,14,22,0.65);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: 'DINNextW1G', sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .1em;
    color: #565460;
    z-index: 2;
    border-bottom: 1px solid rgba(86,84,96,0.2);
}
.ft-castle-disabled-overlay i { font-size: 11px; }

.ft-jewel-icon {
    width: 24px;
    height: 24px;
    object-fit: contain;
    vertical-align: middle;
    margin-right: 2px;
}