@font-face { font-family: "Albertusmedium Regular"; src: url("../fonts/albertusmedium_regular.ttf") format("truetype"); font-style: normal; font-weight: normal; }
@font-face { font-family: "Albertusbold Regular"; src: url("../fonts/albertusbold_regular.ttf") format("truetype"); font-style: normal; font-weight: bold; }
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; }

article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary { display: block; }

* { -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/body-image.jpg) top center no-repeat; background-color: #070605; font-family: "Albertusmedium Regular"; font-size: 13px; color: #534436; min-height: 100vh; letter-spacing: 1px; }

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

a:hover { text-decoration: none; }

p { margin-bottom: 20px; }

h1, h2, h3 { color: #000; margin-bottom: 30px; line-height: 1.2; }

h1 { font-size: 40px; margin-bottom: 50px; }

h2 { font-size: 32px; }

h3 { font-size: 24px; }

table { width: 100%; margin-bottom: 15px; }
table td { border-collapse: collapse; padding: 5px; border: 1px solid rgba(134,85,39,0.7); }

img { max-width: 100%; }

caption { margin-bottom: 15px; }

select { background: rgba(142,88,43,0.8); min-width: 150px; border: 1px solid rgba(201,170,113,0.1); color: #fff; margin-bottom: 15px; padding: 6px 40px 6px 20px; position: relative; -webkit-appearance: none; background-image: url(../images/arrow-v.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; }

input, textarea { background: rgba(134,110,58,0); border: 1px solid rgba(134,110,58,0); color: #000000; padding: 0px 12px; position: relative; font-size: 14px; width: 80%; font-family: "Albertusmedium Regular"; }

button, .button { transition: all 0.3s ease; cursor: pointer; background: url(../images/button-orange.png) no-repeat; height: 42px; width: 182px; border: none; color: #ffffff !important; text-shadow: 0px 2px 0px rgba(0,0,0,0.5); position: relative; z-index: 1; text-align: center; text-transform: uppercase; font-size: 10px; font-family: "Albertusbold Regular"; letter-spacing: 1px; filter: drop-shadow(0px 7px 7px rgba(0,0,0,0.2)); }
button:hover, .button:hover { filter: drop-shadow(0px 7px 7px rgba(0,0,0,0.2)) brightness(120%); }

.button { display: inline-block; text-decoration: none; line-height: 42px; }

.button-green { background: url(../images/button-green.png) no-repeat; filter: drop-shadow(0px 7px 7px rgba(38,53,137,0.2)); }
.button-green:hover { filter: drop-shadow(0px 7px 7px rgba(38,53,137,0.2)) brightness(120%); }

.button-blue { background: url(../images/button-blue.png) no-repeat; width: 236px; }

.button-orange-small { background: url(../images/button-orange-small.png) no-repeat; width: 154px; }

:focus { outline: none; }

::-webkit-input-placeholder { color: #9d7f55; }

::-moz-placeholder { color: #9d7f55; }

:-moz-placeholder { color: #9d7f55; }

:-ms-input-placeholder { color: #9d7f55; }

.container { max-width: 1190px; margin: 0 auto; position: relative; }

.topPanel-container { max-width: 1190px; margin: 0 auto; position: relative; height: 60px; }

.header-container { max-width: 1190px; margin: 0 auto; position: relative; height: 660px; }

.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%); }

.topPanel { background: rgba(0,0,0,0.9); height: 60px; position: fixed; top: 0; left: 0; right: 0; width: 100%; z-index: 199; }
.topPanel:after { content: ""; position: absolute; background: url(../images/line.png) repeat-x; height: 7px; width: 100%; top: 100%; left: 0; }
.topPanel:before { content: ""; position: absolute; background: url(../images/line-img.png) no-repeat; height: 47px; width: 140px; bottom: -36px; left: 50%; margin-left: -70px; }

.menu { margin-left: -30px; }
.menu ul { display: flex; align-items: center; }
.menu ul li a { color: #ece2c8; font-size: 14px; font-weight: bold; text-transform: uppercase; display: block; padding: 0px 30px; height: 60px; line-height: 60px; position: relative; }
.menu ul li a:hover { color: #80c9ff; }
.menu ul li a:hover:before { opacity: 1; }
.menu ul li a:after { content: ""; position: absolute; background: url(../images/icon-menu.png); width: 27px; height: 27px; right: -13px; top: 50%; margin-top: -13px; }
.menu ul li a:before { content: ""; position: absolute; background: url(../images/menu-hover.png); width: 143px; height: 67px; left: 50%; margin-left: -71px; bottom: -12px; z-index: 1; opacity: 0; transition: 0.3s; }
.menu ul li:last-child a::after { display: none; }

.menu ul .active a { color: #80c9ff; }
.menu ul .active a:before { opacity: 1; }

.login { color: #ece2c8; text-transform: uppercase; display: flex; align-items: center; font-size: 12px; text-shadow: 2px 2px 2px #22120a, -2px -2px 2px #22120a; filter: brightness(100%); }
.login:hover { filter: brightness(140%); }

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

.icon-lock { background: url(../images/icon-lock.png); width: 32px; height: 33px; margin-right: 8px; margin-bottom: -2px; }

.enterBlock span { color: #7b7462; margin: 0px 12px 0px 8px; font-size: 12px; text-shadow: 2px 2px 2px #22120a, -2px -2px 2px #22120a; }

.logo { position: absolute; left: 100px; bottom: 35px; z-index: 10;}
.logo a:hover { filter: brightness(140%); }

.block { background-position: center; background-repeat: no-repeat; background-size: cover; width: 100%; position: relative; z-index: 2; }
.block:hover { filter: brightness(120%); z-index: 3; }
.block:hover .blockText { margin-bottom: 20px; }

.homeContainer-left { margin-top: -6px; margin-left: -6px; width: 612px; }
.homeContainer-left .block-title { color: #fff; font-weight: bold; }
.homeContainer-left .block-note { opacity: 0.5; color: #fff; }
.homeContainer-left a { display: inline-block; }

.blockText { position: absolute; transition: 0.3s; width: 100%; }

.blockVideo { height: 338px; }
.blockVideo .blockText { left: 55px; bottom: 45px; }
.blockVideo .blockText .block-title { font-size: 48px; margin-bottom: 15px; }
.blockVideo .blockText .block-note { font-size: 18px; }

.video-button { display: block; position: absolute; background: url(../images/button-play.png) no-repeat; height: 98px; width: 98px; top: 45px; left: 42px; }

.block-col { padding: 6px; }

.middleBlock-left, .middleBlock-right { width: 50%; }

.blockFaq { height: 354px; }
.blockFaq .blockText { text-align: center; bottom: 55px; }
.blockFaq .blockText .block-title { font-size: 48px; }

.blockDiscord, .blockDragon { height: 170px; }
.blockDiscord .blockText, .blockDragon .blockText { text-align: center; bottom: 30px; }
.blockDiscord .blockText .block-title, .blockDragon .blockText .block-title { font-size: 30px; }

.blockWiki { height: 130px; position: relative; display: flex !important; align-items: center; padding-left: 50px; }
.blockWiki .blockText { bottom: 30px; }
.blockWiki .blockText .block-title { font-size: 30px; margin-bottom: 10px; }
.blockWiki .blockText .block-note { font-size: 18px; }
.blockWiki:after { content: ""; background: url(../images/wiki-hero.png) no-repeat; position: absolute; width: 300px; height: 234px; bottom: 0px; right: -55px; transition: 0.3s; }

.blockWiki:hover { padding-left: 30px; }
.blockWiki:hover .blockText { margin-bottom: 0px; }
.blockWiki:hover:after { right: -65px; }

.homeContainer-right { width: 576px; }

.download { background: url(../images/download-bg.jpg) center no-repeat; background-size: cover; height: 110px; margin-bottom: 14px; position: relative; margin-top: 38px; }

.dowbload-button { position: absolute; background: url(../images/button-download.png) no-repeat; width: 424px; height: 218px; color: #ffffff; font-size: 16px; text-transform: uppercase; font-weight: bold; text-shadow: 2px 2px 2px rgba(0,0,0,0.2); left: 50%; margin-left: -212px; top: -108px; z-index: 2; }
.dowbload-button:hover { filter: brightness(120%); }

.downloads { position: absolute; width: 100%; bottom: 0px; background: url(../images/download-line.png) center no-repeat; height: 75%; z-index: 3; padding-top: 34px; }
.downloads a { color: #fff; opacity: 0.5; padding: 10px 20px; display: flex; align-items: center; }
.downloads a:hover { opacity: 1; }
.downloads a i { margin-right: 10px; }
.downloads span { background: #fff; opacity: 0.3; height: 14px; width: 1px; left: 50%; }

.icon-windows { background: url(../images/icon-window.png); width: 14px; height: 14px; margin-bottom: 2px; }

.icon-mac { background: url(../images/icon-mac.png); width: 14px; height: 18px; margin-bottom: 4px; }

.homeNews { background: url(../images/home-news-bg.png) center no-repeat; background-size: cover; height: 689px; padding: 50px; }

.homeNews-title { color: #231f1e; font-size: 24px; margin-bottom: 24px; position: relative; text-transform: uppercase; font-weight: bold; overflow: hidden; position: relative; }
.homeNews-title span { position: relative; }
.homeNews-title span:after { content: ""; position: absolute; background: url(../images/content-line.png) repeat-x; height: 7px; width: 400px; left: calc(100% + 30px); top: 50%; margin-top: -3.5px; }

.news { display: flex; margin-bottom: 30px; }

.news-left-block { width: 107px; }

.news-right-block { width: calc(100% - 107px); padding-left: 33px; }

.newsImg { background: url(../images/top-news-img-bg.jpg) no-repeat; height: 107px; width: 107px; box-shadow: 0px 5px 10px 0px rgba(49,24,7,0.4); margin-bottom: 30px; }
.newsImg img { width: 101px; height: 101px; }

.newsDate { text-align: center; color: #868178; font-size: 12px; }

.newsTitle { margin-top: -10px; margin-bottom: 10px; }
.newsTitle-link { color: #231f1e; font-size: 18px; font-weight: bold; }
.newsTitle-link:hover { color: #ff6e07; }

.meta-link { font-size: 14px; padding: 10px 0px; display: inline-block; white-space: nowrap; }

.color-orange { color: #cb5e20; }

.color-brown { color: #956842; }

.color-blue { color: #0b9186; }

.color-purple { color: #c02392; }

.color-black { color: #000; }

.newsText { line-height: 1.2; height: 80px; overflow: hidden; margin-bottom: 12px; color: #000;}

.newsTextMore { line-height: 1.2; height: auto; overflow: hidden; margin-bottom: 12px; color: #000;}

.news-list { margin-bottom: 20px; }
.news-list li { position: relative; border-top: 1px dotted rgba(151,60,31,0.45); padding: 10px 0px; }
.news-list li .meta-link { margin-right: 12px; }
.news-list li:last-child { border-bottom: 1px dotted rgba(151,60,31,0.45); }

.news-list-link { font-size: 16px; color: #231f1e; font-weight: bold; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: inline-block; }
.news-list-link:hover { color: #ff1640; }

.news-list-l { display: flex; align-items: center; width: 78%; }

.news-list-r { padding-top: 20px; position: absolute; right: 0; top: 0; }

.moreNews { text-align: center; position: relative; padding-top: 10px; }
.moreNews:after { content: ""; position: absolute; background: url(../images/content-line.png) repeat-x; height: 7px; width: 29%; right: 0px; top: 50%; margin-top: -3.5px; }
.moreNews:before { content: ""; position: absolute; background: url(../images/content-line.png) repeat-x; height: 7px; width: 29%; left: 0px; top: 50%; margin-top: -3.5px; }

.homeContainer { margin-bottom: 50px; }

.gallery { margin-bottom: 30px; }

.gallery-title { text-align: center; font-size: 24px; text-transform: uppercase; color: #ffebb5; text-shadow: 0px 0px 10px rgba(255,123,87,0.5); position: relative; margin-bottom: 30px; overflow: hidden; }
.gallery-title span { position: relative; padding: 0px 20px; }
.gallery-title span:before { content: ""; position: absolute; background: url(../images/title-line-left.png) no-repeat; height: 19px; width: 522px; right: 100%; top: 50%; margin-top: -9.5px; }
.gallery-title span:after { content: ""; position: absolute; background: url(../images/title-line-right.png) no-repeat; height: 19px; width: 522px; left: 100%; top: 50%; margin-top: -9.5px; }

.gallery-slider { color: #fff; position: relative; max-width: 1140px; margin: 0 auto; }

.item { height: 220px; padding: 10px; }

.item-slider { border: 1px solid #36302a; padding: 1px; position: relative; height: 198px; }
.item-slider a { display: block; }
.item-slider a:after { content: ""; position: absolute; width: 100%; height: 100%; background: url(../images/zoom-hover.png) center no-repeat; background-size: cover; top: 0px; left: 0px; opacity: 0; transition: 0.3s; }
.item-slider a:hover:after { opacity: 1; }
.item-slider a img { display: block; object-fit: cover; height: 194px; }
.item-slider:before { content: ""; position: absolute; background: url(../images/border-left.png) no-repeat; width: 30px; height: 204px; left: -4px; top: -4px; }
.item-slider:after { content: ""; position: absolute; background: url(../images/border-right.png) no-repeat; width: 30px; height: 204px; right: -4px; top: -4px; }

.owl-dots { display: none !important; }

.owl-nav { position: absolute; top: 50%; margin-top: -20px; width: 100%; }
.owl-nav button, .owl-nav .button { width: 34px; height: 39px; position: absolute; }
.owl-nav button span, .owl-nav .button span { display: none; }

.owl-prev { background: url(../images/left.png) no-repeat !important; left: -44px; }
.owl-prev:hover { background: url(../images/left-active.png) no-repeat !important; }

.owl-next { background: url(../images/right.png) no-repeat !important; right: -44px; left: auto; }
.owl-next:hover { background: url(../images/right-active.png) no-repeat !important; }

.footer { background: linear-gradient(to right, #1d160d, #1e170d); position: relative; }
.footer:after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 86px; background: #070605; }

.footerPage { background: url(../images/footer-bg.jpg) top no-repeat; min-height: 400px; position: relative; padding-top: 135px; }
.footerPage:after { content: ""; position: absolute; background: url(../images/line-footer.png) repeat-x; height: 7px; width: 100%; top: 86px; left: 0; }
.footerPage:before { content: ""; position: absolute; background: url(../images/footer-effect.png) no-repeat; height: 231px; width: 877px; top: -40px; left: 50%; margin-left: -438px; z-index: 2; }

.toTop { background: url(../images/totop.png) no-repeat; width: 120px; height: 90px; position: absolute; top: 50px; left: 50%; margin-left: -60px; z-index: 2; cursor: pointer; transition: 0.3s; }
.toTop:hover { filter: brightness(140%); }

.footerMenu { border-bottom: 1px solid #473729; padding-bottom: 45px; }
.footerMenu ul { display: flex; justify-content: center; flex-wrap: wrap; position: relative; z-index: 4; }
.footerMenu ul li { padding: 10px 50px; position: relative; }
.footerMenu ul li:after { content: ""; position: absolute; background: url(../images/icon-menu.png); width: 27px; height: 27px; right: -14px; top: 50%; margin-top: -13px; }
.footerMenu ul li a { color: #ece2c8; font-size: 13px; font-weight: bold; text-transform: uppercase; }
.footerMenu ul li a:hover { color: #ffac3b; }
.footerMenu ul li:last-child:after { display: none; }

.footerBlock { padding: 55px 0px; }

.footerBlock-text_16 { font-family: Arial,Helvetica Neue,Helvetica,sans-serif; font-size: 20px; border: 3px solid #e01f48; width: 45px; height: 45px; display: flex; align-items: center; justify-content: center; font-weight: bold; color: #fff; margin-right: 26px; }

.footerBlock-text_copy { line-height: 1.3; color: #868178; font-size: 14px; }

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

.langBlock-active { background: rgba(0,0,0,0.3); padding: 14px 21px; color: #fff; font-size: 14px; min-width: 230px; cursor: pointer; position: relative; }
.langBlock-active:after { content: ""; background: url(../images/icon-drop.png) no-repeat; position: absolute; width: 10px; height: 6px; right: 18px; top: 50%; margin-top: -3px; }
.langBlock-active img { width: 16px; height: 16px; border-radius: 50%; margin-right: 12px; color: #fff; font-size: 14px; }

.langBlock-drop { background: rgba(0,0,0,0.3); padding: 10px 0px; position: absolute; width: 100%; top: calc(100% + 5px); display: none; z-index: 2; }
.langBlock-drop ul li a { display: flex; align-items: center; color: #fff; font-size: 14px; padding: 10px 21px; }
.langBlock-drop ul li a:hover { background: rgba(0,0,0,0.3); }
.langBlock-drop ul li a img { width: 16px; height: 16px; border-radius: 50%; margin-right: 12px; color: #fff; font-size: 14px; }

.footerBottom { background: #110d08; padding: 35px 0px; }

.footerBottom-left { margin-left: -50px; }

.f-link { padding: 5px 50px; border-right: 1px solid #393b3c; }
.f-link a { color: #868178; font-size: 14px; }
.f-link a:hover { color: #fff; }

.socBlock { padding-left: 30px; }
.socBlock a { display: block; height: 18px; opacity: 0.2; margin: 0px 15px; background-image: url(../images/soc-icons.png); background-repeat: no-repeat; }
.socBlock a:hover { opacity: 1; }

.fb { width: 18px; }

.yt { width: 22px; background-position: left -48px top; }

.dc { width: 22px; background-position: left -100px top; }

.hystmodal { z-index: 199; }

.hystmodal__wrap { background: rgba(0,0,0,0.85); }

.registration-modal { height: 712px; width: 600px; background: url(../images/modal-reg-bg.jpg) center top no-repeat; background-size: cover; box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.4); }

.login-modal { height: 557px; width: 600px; background: url(../images/modal-login-bg.jpg) center top no-repeat; background-size: cover; box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.4); }

.hystmodal__window { padding: 75px 100px; position: relative; }
.hystmodal__window:after { content: ""; background: url(../images/modal-icon.png) no-repeat; position: absolute; width: 130px; height: 47px; left: 50%; margin-left: -65px; top: -11px; }

.hystmodal__close { width: 56px; height: 56px; position: absolute; top: -16px; right: -16px; cursor: pointer; display: block; background: url(../images/icon-close.png) no-repeat; transition: 0.3s; font-size: 0px; }
.hystmodal__close:hover { filter: brightness(140%); }

.modalTitle { text-align: center; color: #231f1e; font-size: 24px; font-weight: bold; text-transform: uppercase; position: relative; margin-bottom: 20px; overflow: hidden; }
.modalTitle span { position: relative; }
.modalTitle span:after { content: ""; position: absolute; background: url(../images/content-line.png) repeat-x; height: 7px; width: 300px; right: calc(100% + 30px); top: 50%; margin-top: -3.5px; }
.modalTitle span:before { content: ""; position: absolute; background: url(../images/content-line.png) repeat-x; height: 7px; width: 300px; left: calc(100% + 30px); top: 50%; margin-top: -3.5px; }

.formGroup { margin-bottom: 15px; }
.formGroup p { margin-bottom: 5px; color: #64564e; }

.inField { background: rgba(134,110,58,0.2); padding: 11px 20px; display: flex; align-items: center; position: relative; transition: 0.3s; border: 1px solid rgba(36,18,8,0); }

.icon-login { background: url(../images/icon-login.png) no-repeat; width: 18px; height: 18px; }

.icon-email { background: url(../images/icon-email.png) no-repeat; width: 16px; height: 13px; }

.icon-password { background: url(../images/icon-password.png) no-repeat; width: 14px; height: 19px; }

.check { position: absolute; background: url(../images/icon-check.png) no-repeat; width: 15px; height: 11px; right: 18px; top: 50%; margin-top: -5px; }

.inField:hover { border: 1px solid rgba(36,18,8,0.2); background: rgba(255,255,255,0.2); }

.icon-info { background: url(../images/icon-info.png) no-repeat; width: 42px; height: 42px; }

.icon-forgot { background: url(../images/icon-forgot.png) no-repeat; width: 42px; height: 42px; }

.modalButtons { margin-bottom: 35px; padding-top: 20px; }

.modalInfo { letter-spacing: 0px; }
.modalInfo i { margin-right: 12px; }
.modalInfo a { color: #9c4411; font-size: 14px; }
.modalInfo a:hover { color: #ff6b16; }

.loginWith-title { text-transform: none; font-size: 18px; }

.modalSoc a { display: block; height: 38px; width: 55px; margin: 5px; background-image: url(../images/soc-icons-modal.png); background-repeat: no-repeat; filter: drop-shadow(0px 10px 10px rgba(0,0,0,0.3)); }
.modalSoc a:hover { filter: drop-shadow(0px 10px 10px rgba(0,0,0,0.3)) brightness(120%); }

.m-f { background-position: left top; }

.m-o { background-position: left -66px top; }

.m-g { background-position: left -131px top; }

.m-v { background-position: left -195px top; }

.breadcrumbs { background: rgba(0,0,0,0.95); padding: 30px 65px; font-size: 14px; position: relative; }
.breadcrumbs a:hover { color: #fff; }
.breadcrumbs ul { display: flex; align-items: center; flex-wrap: wrap; margin-left: -30px; }
.breadcrumbs ul li { padding: 5px 30px; color: #ece2c8; position: relative; }
.breadcrumbs ul li:after { content: ""; position: absolute; background: url(../images/icon-bread.png) no-repeat; width: 6px; height: 10px; right: 0px; top: 50%; margin-top: -5px; }
.breadcrumbs ul li:last-child:after { display: none; }
.breadcrumbs ul li a { color: #868178; }

.back { position: absolute; right: 65px; top: 50%; margin-top: -5px; color: #868178; display: flex; align-items: center; }
.back i { margin-right: 8px; }

.icon-back { background: url(../images/icon-back.png) no-repeat; width: 16px; height: 13px; margin-bottom: 3px; }

.content { min-height: 500px; background: url(../images/content-bg-top.jpg) top center no-repeat, url(../images/content-bg-bottom.jpg) bottom center no-repeat, url(../images/content-bg.jpg) repeat-y; position: relative; padding: 70px 65px; color: #231f1e; font-size: 16px; line-height: 1.4; letter-spacing: 0px; }
.content:before { content: ""; position: absolute; background: url(../images/line-img.png) repeat-x; height: 47px; width: 140px; top: -11px; left: 50%; margin-left: -70px; }
.content p { margin-bottom: 30px; }

.contentTitle { background: url(../images/content-line.png) bottom repeat-x; text-align: center; padding-bottom: 45px; margin-bottom: 50px; }
.contentTitle h1 { margin-bottom: 0px; }

.stats { background: url(../images/content-line.png) top repeat-x; margin-top: 40px; padding-top: 35px; }

.stat-left { margin-left: -30px; padding: 15px 0px; }

.stat-block { color: #868178; font-size: 14px; padding: 2px 30px; border-right: 1px solid #baa980; }
.stat-block:last-child { border-right: 0px; }

.icon-discord { background: url(../images/soc-icons.png) left -100px top no-repeat; height: 18px; width: 22px; margin-bottom: -4px; margin-right: 3px; }

.pageNews-6 { width: calc(50% - 30px); }

.pageNews-title { color: #231f1e; font-size: 40px; font-weight: bold; text-transform: uppercase; display: inline-block; }

.tab-button { display: inline-block; margin: 10px; cursor: pointer; }
.tab-button:hover { text-decoration: underline; }

.pageNews-tabButtons { margin-right: -10px; }

.news-page { margin-top: 30px; background: url(../images/content-line.png) top repeat-x; padding-top: 35px; margin-bottom: 0px; }
.news-page .newsTitle { margin-top: 0px; }

.newsMore a:hover { text-decoration: underline; }

.pagination { position: relative; z-index: 5; margin-top: 50px; }
.pagination li { position: relative; color: #868178; font-size: 14px; }
.pagination li a { color: #868178; font-size: 14px; position: relative; }

.number a { display: flex; align-items: center; justify-content: center; width: 46px; height: 46px; margin: 3px; }
.number a:hover { color: #956842; text-decoration: underline; }

.number-active a { background: url(../images/pag-active.png) center top 3px no-repeat; }

.number-back { margin-right: 20px; }
.number-back a { background: url(../images/icon-left.png) left center no-repeat; padding-left: 15px; }
.number-back a:hover { color: #fff; }

.number-next { margin-left: 20px; }
.number-next a { background: url(../images/icon-right.png) right center no-repeat; padding-right: 15px; }
.number-next a:hover { color: #fff; }

.tab-block { display: none; }
.tab-block.active { display: flex; animation: tab 0.5s linear; }

@keyframes tab { 0% { display: none; opacity: 0; }
  1% { display: flex; opacity: 0; }
  100% { display: flex; opacity: 100%; } }
.faqBlock { margin-bottom: 40px; }
.faqBlock h2 { font-size: 22px; position: relative; padding-left: 50px; }
.faqBlock h2:before { content: ""; background: url(../images/icon-faq.png) no-repeat; width: 42px; height: 42px; position: absolute; top: -8px; left: -5px; }

.branch-1 { background: url(../images/branch-1.png) no-repeat; width: 303px; height: 181px; position: absolute; top: 0px; right: -30px; animation: 4s branch_1 linear infinite; animation-delay: 1s; }

.branch-2 { background: url(../images/branch-2.png) no-repeat; width: 419px; height: 160px; position: absolute; top: 0px; right: -430px; animation: 4s branch_2 linear infinite; animation-delay: 2s; }

@keyframes branch_1 { 0% { top: 0px; }
  50% { top: 50px; }
  100% { top: 0px; } }
@keyframes branch_2 { 0% { top: 0px; }
  50% { top: 50px; }
  100% { top: 0px; } }
.light { background: url(../images/light.png) no-repeat; width: 530px; height: 530px; position: absolute; top: 107px; left: 296px; animation: 15s light linear infinite; z-index: 1; }

@keyframes light { 0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); } }
.hero-1 { background: url(../images/hero-1.png) no-repeat; width: 1508px; height: 760px; position: absolute; top: 190px; left: 155px; z-index: 2;}

.home, .page { position: relative; z-index: 15; }

@keyframes hero_1 { 0% { top: 190px; }
  50% { top: 160px; }
  100% { top: 190px; } }
.hero-2 {
  background: url(../images/hero-2.png) no-repeat;
  width: 493px;
  height: 675px;

  position: absolute;
  top: 155px;
  right: 20px;
  z-index: 3;

  /* animacja */
  animation: heroFloat 5s ease-in-out infinite;

  /* punkt obrotu (ważne!) */
  transform-origin: center bottom;

  /* lekki glow */

  /* płynność */
  will-change: transform;
}

/* animacja lewitacji + ruchu */
@keyframes heroFloat {
  0% {
    transform: translateY(0px) scale(1) rotate(0deg);
  }
  25% {
    transform: translateY(-10px) scale(1.01) rotate(-1deg);
  }
  50% {
    transform: translateY(-14px) scale(1.02) rotate(0.5deg);
  }
  75% {
    transform: translateY(-8px) scale(1.01) rotate(1deg);
  }
  100% {
    transform: translateY(0px) scale(1) rotate(0deg);
  }
}

/* hover efekt */
.hero-2:hover {
  filter: drop-shadow(0 0 20px rgba(255,255,0,0.6));
  transition: 0.3s ease;
}

/* klik efekt */
.hero-2:active {
  transform: scale(0.98);
}
@keyframes hero_2 { 0% { top: 155px; }
  50% { top: 185px; }
  100% { top: 155px; } }
.dragon { background: url(../images/dragon.png) no-repeat; width: 205px; height: 88px; position: absolute; top: 580px; left: 223px; z-index: 14; transition: transform 0.25s ease, filter 0.25s ease;}
.dragon:hover {
  transform: scale(1.05);
  filter: brightness(1.2);
}

/* TEKST */
.players-count {
  position: absolute;

  right: 35px;   /* dopasuj */
  top: 50%;
  transform: translateY(-50%);

  font-size: 18px;
  font-weight: bold;
  color: #d4ff7a;

  text-shadow:
    0 0 5px #aaff00,
    0 0 10px #66ff00,
    0 0 20px #00ff88;

}
.dragon:hover .players-count {
  text-shadow:
    0 0 8px #aaff00,
    0 0 16px #66ff00,
    0 0 30px #00ff88;
}
@keyframes dragon { 0% { top: 155px; }
  50% { top: 125px; }
  100% { top: 155px; } }
.effect { background: url(../images/effect.png) no-repeat; width: 952px; height: 831px; position: absolute; z-index: 4; top: 245px; left: -110px; }

.sprak-1 { background: url(../images/spark-1.png) no-repeat; width: 128px; height: 165px; position: absolute; top: 655px; left: 380px; z-index: 5; animation: sprak_1 5s linear infinite; }

@keyframes sprak_1 { 0% { top: 655px; left: 380px; }
  50% { top: 555px; left: 480px; opacity: 1; }
  100% { top: 455px; left: 580px; opacity: 0; } }
.sprak-2 { background: url(../images/spark-2.png) no-repeat; width: 872px; height: 176px; position: absolute; top: 700px; left: -50px; z-index: 5; animation: sprak_2 5s linear infinite; }

@keyframes sprak_2 { 0% { top: 700px; left: -50px; }
  50% { top: 600px; left: 0px; opacity: 1; }
  100% { top: 500px; left: 50px; opacity: 0; } }
.sprak-3 { background: url(../images/spark-3.png) no-repeat; width: 991px; height: 320px; position: absolute; top: 700px; left: 0px; z-index: 5; animation: sprak_3 5s linear infinite; }

@keyframes sprak_3 { 0% { top: 700px; left: 0px; }
  50% { top: 500px; left: 50px; opacity: 1; }
  100% { top: 300px; left: 100px; opacity: 0; } }
.sprak-4 { background: url(../images/spark-4.png) no-repeat; width: 170px; height: 431px; position: absolute; top: 650px; left: 400px; z-index: 5; }

@keyframes sprak_4 { 0% { top: 650px; left: 400px; }
  50% { top: 450px; left: 500px; opacity: 1; }
  100% { top: 250px; left: 600px; opacity: 0; } }
@media (max-width: 1210px) { .container, .topPanel-container { padding: 0px 15px; }
  .menu ul li a { padding: 0px 20px; }
  .footerMenu ul li { padding: 10px 30px; }
  .homeContainer-right, .homeContainer-left { width: 50%; }
  .owl-next { right: -10px; }
  .owl-prev { left: -10px; } }
@media (max-width: 993px) { body { background: url(../images/body-image-mobile.jpg) top center no-repeat; background-color: #070605; }
  .topPanel-container_left { position: fixed; left: -320px; top: 0; width: 320px; height: 100%; background: rgba(0,0,0,0.9); z-index: 10; transition: 0.3s; }
  .topPanel-container_left.active { left: 0px; }
  .menu { margin-left: 0px; padding: 100px 0px 0px 50px; }
  .menu ul { display: block; }
  .menu ul li a { padding: 0px 40px; font-size: 20px; }
  .menu ul li a:before { display: none; }
  .menu ul li a:after { left: 0px; right: auto; display: block !important; }
  .button-mobile { position: relative; transition: 0.3s; left: 0px; }
  .button-mobile span { display: block; position: relative; width: 30px; height: 3px; background: #fff; margin: 8px 0px; z-index: 20; transition: 0.3s; }
  .button-mobile.active { left: 250px; }
  .button-mobile.active span:nth-child(1) { transform: rotate(45deg); top: 5px; }
  .button-mobile.active span:nth-child(2) { display: none; }
  .button-mobile.active span:nth-child(3) { transform: rotate(-45deg); bottom: 6px; }
  .homeContainer-right, .homeContainer-left { width: 100%; max-width: 600px; margin: 0 auto; }
  .homeContainer-left { margin-bottom: 50px; }
  .footerBlock-text { padding: 10px; }
  .footerBlock { justify-content: center; padding: 30px 0px; }
  .dkarts-logo { padding: 20px 0px; }
  .breadcrumbs { padding: 30px 35px; }
  .content { padding: 70px 35px; }
  .back { top: 10px; right: 10px; margin-top: 0px; font-size: 0px; }
  .pageNews-6 { width: 100%; }
  .news-page .newsText { height: auto; overflow: auto; }
  .animation { display: none; } }
@media (max-width: 793px) { .footerBottom-left { justify-content: center; margin-left: 0px; }
  .f-link { margin: 10px 0px; border-right: 0px; }
  .footerBottom { padding: 15px 0px; width: 100%; }
  .footerBottom .container { justify-content: center; }
  .socBlock { padding-left: 0px; }
  .footerBlock-text { justify-content: center; flex-wrap: nowrap; }
  .footerBlock-text_copy { width: calc(100% - 70px); }
  .news-list-link { font-size: 14px; }
  .stat-right { width: 100%; display: flex; justify-content: flex-end; } }
@media (max-width: 525px) { .footerMenu ul li { padding: 10px 15px; }
  .footerBlock-text_copy { font-size: 12px; }
  .socBlock { padding: 10px 0px; }
  .topPanel-container_right { margin-right: -15px; }
  .blockWiki { padding-left: 20px; }
  .blockWiki:after { display: none; }
  .middleBlock-left, .middleBlock-right { width: 100%; }
  .homeNews { padding: 50px 20px; }
  .news-list-link, .news-list-l { width: 100%; }
  .news-list-l { padding-top: 20px; }
  .news-list-l .meta-link { position: absolute; top: 0px; }
  .news-list-r {top: 5px; }
  .hystmodal__window { padding: 75px 20px; }
  .content { padding: 60px 15px; }
  .breadcrumbs { padding: 20px 15px; }
  .tab-button { margin: 7px; } }
@media (max-width: 400px) { .enterBlock span { margin: 0px 0px 0px 5px; font-size: 8px; }
  .login { font-size: 10px; }
  .icon-lock { margin-right: 4px; }
  .blockVideo .blockText .block-title { font-size: 38px; }
  .news-left-block { width: 50px; }
  .newsImg { width: 50px; height: 50px; background: url(../images/top-news-img-bg.jpg) no-repeat; background-size: 50px 50px; }
  .newsImg img { width: 44px; height: 44px; }
  .news-right-block { width: calc(100% - 50px); }
  .modalButtons { justify-content: center; }
  .modalInfo { padding: 5px 0px 15px 0px; }
  .modalButtons { padding-top: 10px; margin-bottom: 15px; } }
@media (max-width: 350px) { .button-mobile { left: -10px; } }

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

@keyframes pulseText {
  0% {
    text-shadow: 0 0 5px #aaff00;
  }
  50% {
    text-shadow: 0 0 20px #00ff88;
  }
  100% {
    text-shadow: 0 0 5px #aaff00;
  }
}

.players-count {
  animation: pulseText 2.5s infinite;
}
.dragon::after {
  content: "";
  position: absolute;

  left: 15px;   /* dopasuj do orb’a */
  top: 50%;
  transform: translateY(-50%);

  width: 40px;
  height: 40px;

  background: radial-gradient(circle, #66ff00 0%, transparent 70%);
  border-radius: 50%;

  opacity: 0.6;
  filter: blur(8px);

  animation: orbPulse 3s infinite;
}

@keyframes orbPulse {
  0% { transform: translateY(-50%) scale(1); opacity: 0.5; }
  50% { transform: translateY(-50%) scale(1.3); opacity: 0.9; }
  100% { transform: translateY(-50%) scale(1); opacity: 0.5; }
}

.dragon {
  position: absolute;
  /* Twój kod zostaje */
}

/* tooltip */
.dragon::before {
  content: attr(data-tooltip);
  position: absolute;

  bottom: 110%; /* nad boxem */
  left: 50%;
  transform: translateX(-50%) translateY(10px);

  background: rgba(20,30,10,0.95);
  color: #d4ff7a;

  padding: 8px 12px;
  border-radius: 6px;

  font-size: 14px;
  white-space: nowrap;

  opacity: 0;
  pointer-events: none;

  box-shadow:
    0 0 10px rgba(0,255,100,0.3),
    inset 0 0 5px rgba(0,255,100,0.2);

  text-shadow: 0 0 5px #00ff88;

  transition: all 0.2s ease;
}

/* strzałka */
.dragon::after {
  content: "";
  position: absolute;

  bottom: 100%;
  left: 20%;
  transform: translateX(-50%);

  border-width: 6px;
  border-style: solid;
  border-color: rgba(20,30,10,0.95) transparent transparent transparent;

  opacity: 0;
  transition: all 0.2s ease;
}

/* pokazanie tooltipa */
.dragon:hover::before {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.dragon:hover::after {
  opacity: 1;
}

.news-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.news-item {
    padding: 10px 0;
}

.news-header {
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.news-list-link {
    margin-left: 10px;
    flex: 1;
}

.newsDate {
    font-size: 12px;

}

.news-content {
    display: none;
    padding: 10px 0;
    color: #ccc;
}

.news-item.active .news-content {
    display: block;
}
.alert {
	background: rgba(0,0,0,0.7);
	border: 1px solid rgba(255,100,50,0.4);
	color: #ffb199;
	padding: 12px 15px;
	margin-bottom: 20px;
	border-radius: 6px;
	position: relative;

	box-shadow:
		0 0 10px rgba(255,80,40,0.2),
		inset 0 0 10px rgba(255,80,40,0.1);

	font-size: 13px;
	text-align: center;
}

/* czerwony error */
.alert-error {
	border-color: rgba(255,80,40,0.6);
	color: #ff9b7a;
	text-shadow: 0 0 5px rgba(255,80,40,0.4);
}

/* animacja wejœcia */
.alert {
	animation: alertFade 0.3s ease;
}

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
























/* ============================= */
/* CLASS INFO - FINAL FIX */
/* ============================= */

.nm-guide,
.nm-guide * {
    box-sizing: border-box;
}

.nm-guide {
    max-width: 1040px;
    margin: -25px auto 35px;
    padding: 0;
    color: #c4d0e5;
}

.nm-guide .guide-heading {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 28px;
    align-items: center;
    margin-bottom: 24px;
}

.nm-guide .guide-heading span {
    height: 7px;
    background: url(../images/content-line.png) repeat-x center;
}

.nm-guide .guide-heading h1 {
    margin: 0;
    font-size: 42px;
    color: #e6f0ff;
}

/* TOP CLASS CARDS */
.nm-guide .class-tabs {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 10px;
    margin-bottom: 26px;
}

.nm-guide button.class-card {
    all: unset;
    display: block;
    cursor: pointer;
    height: 178px;
    padding: 5px;
    background: linear-gradient(180deg, #17110b, #070504);
    border: 1px solid #7b5525;
    box-shadow: 0 8px 18px rgba(0,0,0,.45);
    text-align: center;
    transition: .2s ease;
}

.nm-guide button.class-card:hover,
.nm-guide button.class-card.is-active {
    transform: translateY(-3px);
    border-color: #8abdff;
    box-shadow:
        0 0 0 1px rgba(117,181,249,.7),
        0 0 22px rgba(117,181,249,.45),
        0 10px 20px rgba(0,0,0,.55);
}

.nm-guide .class-card img {
    width: 100%;
    height: 130px;
    display: block;
    object-fit: cover;
    max-width: none;
    border: 1px solid rgba(128,169,226,.45);
}

.nm-guide .class-card strong {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 34px;
    color: #deebff;
    font-family: "Albertusbold Regular";
    font-size: 11px;
    text-transform: uppercase;
    text-shadow: 1px 1px 2px #000;
}

/* MAIN PANEL */
.nm-guide .class-panel {
    display: none;
    grid-template-columns: 335px 1fr;
    gap: 26px;
    padding: 24px;
    background:
        linear-gradient(180deg, rgba(42,24,11,.10), rgba(98,51,13,.24)),
        rgba(222,167,66,.34);
    border: 1px solid rgba(111,65,23,.55);
    box-shadow:
        inset 0 0 35px rgba(75,35,5,.22),
        0 12px 25px rgba(0,0,0,.22);
}

.nm-guide .class-panel.is-active {
    display: grid;
}

/* BIG ART */
.nm-guide .class-art {
    padding: 8px;
    background: #100b07;
    border: 1px solid rgba(219,169,76,.75);
    box-shadow: 0 12px 24px rgba(0,0,0,.45);
}

.nm-guide .class-art img {
    width: 100%;
    height: 455px;
    display: block;
    object-fit: cover;
    max-width: none;
}

/* CONTENT */
.nm-guide .class-content h2 {
    margin: 0 0 10px;
    font-size: 38px;
    color: #e1f0ff;
}

.nm-guide .class-lead {
    display: block !important;
    margin: 0 0 20px !important;
    font-size: 14px;
    line-height: 1.45;
    color: #b9cbe6 !important;
}

.nm-guide .class-content h3 {
    margin: 0 0 14px;
    font-size: 17px;
    color: #aaddff;
    text-transform: uppercase;
    font-family: "Albertusbold Regular";
}

/* STRENGTHS + STATS */
.nm-guide .class-grid {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 24px;
    margin-bottom: 24px;
}

.nm-guide .strength-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.nm-guide .strength-list li {
    position: relative;
    padding: 7px 0 7px 24px;
    font-size: 14px;
    line-height: 1.3;
    color: #c7d9ed;
}

.nm-guide .strength-list li:before {
    content: "";
    position: absolute;
    left: 3px;
    top: 11px;
    width: 8px;
    height: 8px;
    background: #0ec982;
    transform: rotate(45deg);
    box-shadow: 0 0 8px rgba(14,201,130,.8);
}

.nm-guide .stats-list {
    padding-left: 22px;
    border-left: 1px solid rgba(91,50,17,.3);
}

.nm-guide .stat-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 11px;
    font-size: 12px;
    text-transform: uppercase;
}

.nm-guide .stat-row b {
    flex: 0 0 125px;
    display: block;
    color: #c2dcf2;
    font-family: "Albertusbold Regular";
}

.nm-guide .rating-bar {
    flex: 0 0 90px;
}

.nm-guide .rating-value {
    flex: 0 0 38px;
}

/* BARS */
.nm-guide .rating-bar,
.nm-guide .pvp-bar {
    height: 8px;
    background: rgba(17,12,8,.85);
    border: 1px solid rgba(255,225,145,.25);
    overflow: hidden;
}

.nm-guide .rating-bar span,
.nm-guide .pvp-bar span {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, #406eaa, #a0d8ff);
    box-shadow: 0 0 10px rgba(24,238,137,.55);
}

.nm-guide .rating-value,
.nm-guide .pvp-score {
    color: #1b0d06;
    font-family: "Albertusbold Regular";
    font-size: 12px;
    white-space: nowrap;
}

/* PVP */
.nm-guide .pvp-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.nm-guide .pvp-card {
    background: linear-gradient(180deg, rgba(35,25,18,.96), rgba(14,10,8,.98));
    border: 1px solid rgba(110,153,213,.45);
    box-shadow: 0 7px 14px rgba(0,0,0,.28);
}

.nm-guide .pvp-card summary {
    display: grid;
    grid-template-columns: 38px 1fr 86px 32px;
    gap: 8px;
    align-items: center;
    padding: 8px;
    cursor: pointer;
    list-style: none;
}

.nm-guide .pvp-card summary::-webkit-details-marker {
    display: none;
}

.nm-guide .pvp-card img {
    width: 38px;
    height: 38px;
    object-fit: cover;
    max-width: none;
    border: 1px solid rgba(255,214,125,.35);
}

.nm-guide .pvp-card summary span {
    color: #ffedaa;
    font-family: "Albertusbold Regular";
    font-size: 12px;
    line-height: 1.15;
    text-shadow: 1px 1px 2px #000;
}

.nm-guide .pvp-card p {
    margin: 0;
    padding: 0 12px 12px 54px;
    color: #b9cbe6;
    font-size: 12px;
    line-height: 1.35;
}
/* PVP DETAILS HEIGHT FIX */
.nm-guide .pvp-grid {
    align-items: start !important;
}

.nm-guide .pvp-card {
    align-self: start !important;
    height: auto !important;
}

/* MOBILE */
@media (max-width: 980px) {
    .nm-guide .class-tabs {
        grid-template-columns: repeat(3, 1fr);
    }

    .nm-guide .class-panel {
        grid-template-columns: 1fr;
    }

    .nm-guide .class-grid,
    .nm-guide .pvp-grid {
        grid-template-columns: 1fr;
    }
}

/* ============================= */
/* GUIDES HUB - NATUREMU STYLE */
/* ============================= */

.nm-guides,
.nm-guides * {
    box-sizing: border-box;
}

.nm-guides {
    max-width: 1040px;
    margin: -25px auto 35px;
    color: #c4d0e5;
}

.nm-guides .guides-heading {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 28px;
    align-items: center;
    margin-bottom: 18px;
}

.nm-guides .guides-heading span {
    height: 7px;
    background: url(../images/content-line.png) repeat-x center;
}

.nm-guides .guides-heading h1 {
    margin: 0;
    font-size: 42px;
    color: #e6f0ff;
}

.nm-guides .guides-intro {
    max-width: 760px;
    margin: 0 auto 30px;
    text-align: center;
    font-size: 15px;
    line-height: 1.55;
    color: #b9cbe6;
}

.nm-guides .guides-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}

.nm-guides .guide-card {
    display: block;
    position: relative;
    min-height: 360px;
    background:
        linear-gradient(180deg, rgba(17,27,47,.98), rgba(7,13,28,.98));
    border: 1px solid rgba(110,153,213,.58);
    box-shadow:
        0 12px 24px rgba(0,0,0,.38),
        inset 0 0 24px rgba(128,169,226,.08);
    overflow: hidden;
    text-decoration: none;
    transition: .25s ease;
}

.nm-guides .guide-card:hover {
    transform: translateY(-5px);
    border-color: #8abdff;
    box-shadow:
        0 0 0 1px rgba(117,181,249,.65),
        0 0 24px rgba(117,181,249,.35),
        0 14px 26px rgba(0,0,0,.55);
}

.nm-guides .guide-image {
    position: relative;
    height: 165px;
    padding: 6px;
    background: #100b07;
}

.nm-guides .guide-image img {
    width: 100%;
    height: 100%;
    max-width: none;
    display: block;
    object-fit: cover;
    border: 1px solid rgba(128,169,226,.45);
    filter: brightness(.82) contrast(1.08);
    transition: .25s ease;
}

.nm-guides .guide-card:hover .guide-image img {
    filter: brightness(1.05) contrast(1.12);
    transform: scale(1.03);
}

.nm-guides .guide-status {
    position: absolute;
    right: 14px;
    top: 14px;
    padding: 6px 10px;
    font-family: "Albertusbold Regular";
    font-size: 10px;
    text-transform: uppercase;
    color: #0b0503;
    background: linear-gradient(180deg, #f4d37a, #b97826);
    border: 1px solid rgba(255,232,160,.7);
    box-shadow: 0 0 12px rgba(0,0,0,.45);
}

.nm-guides .guide-status.available {
    color: #09162b;
    background: linear-gradient(180deg, #a4d5ff, #315985);
    border-color: rgba(154,208,255,.85);
}

.nm-guides .guide-status.soon {
    color: #fff1bf;
    background: linear-gradient(180deg, #5b3820, #21130c);
    border-color: rgba(110,153,213,.55);
}

.nm-guides .guide-content {
    padding: 22px 20px 20px;
    position: relative;
}

.nm-guides .guide-content:before {
    content: "";
    position: absolute;
    left: 20px;
    right: 20px;
    top: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(128,169,226,.7), transparent);
}

.nm-guides .guide-content h2 {
    margin: 0 0 12px;
    color: #deebff;
    font-family: "Albertusbold Regular";
    font-size: 21px;
    line-height: 1.15;
    text-transform: uppercase;
    text-shadow: 1px 1px 2px #000;
}

.nm-guides .guide-content p {
    min-height: 78px;
    margin: 0 0 20px;
    color: #b9cbe6;
    font-size: 13px;
    line-height: 1.45;
}

.nm-guides .guide-button {
    display: inline-block;
    padding: 10px 18px;
    color: #f7e6b0;
    font-family: "Albertusbold Regular";
    font-size: 11px;
    text-transform: uppercase;
    background:
        linear-gradient(180deg, rgba(133,74,25,.9), rgba(55,28,12,.95));
    border: 1px solid rgba(128,169,226,.55);
    box-shadow: inset 0 0 12px rgba(255,210,110,.08);
    transition: .2s ease;
}

.nm-guides .guide-card:hover .guide-button {
    color: #09162b;
    background: linear-gradient(180deg, #a4d5ff, #315985);
    border-color: rgba(154,208,255,.9);
}

.nm-guides .guide-card.is-disabled {
    opacity: .78;
}

.nm-guides .guide-card.is-disabled:hover {
    transform: translateY(-3px);
}

@media (max-width: 980px) {
    .nm-guides .guides-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 620px) {
    .nm-guides {
        margin-top: 0;
    }

    .nm-guides .guides-grid {
        grid-template-columns: 1fr;
    }

    .nm-guides .guides-heading h1 {
        font-size: 34px;
    }
}

/* ============================= */
/* GUIDE SUBPAGES - NATUREMU */
/* ============================= */

.nm-guide-page,
.nm-guide-page * {
    box-sizing: border-box;
}

.nm-guide-page {
    max-width: 1040px;
    margin: -25px auto 35px;
    color: #c4d0e5;
}

.guide-page-top {
    text-align: center;
    margin-bottom: 28px;
    padding-bottom: 28px;
    background: url(../images/content-line.png) bottom repeat-x;
}

.guide-page-top h1 {
    margin: 10px 0 14px;
    color: #e6f0ff;
    font-size: 42px;
}

.guide-page-top p {
    max-width: 760px;
    margin: 0 auto;
    color: #b9cbe6;
    font-size: 15px;
    line-height: 1.55;
}

.guide-back {
    display: inline-block;
    color: #7a4a20;
    font-family: "Albertusbold Regular";
    font-size: 12px;
    text-transform: uppercase;
}

.guide-back:hover {
    color: #80c9ff;
}

.guide-list {
    display: grid;
    gap: 18px;
}

.guide-entry {
    display: grid;
    grid-template-columns: 285px 1fr;
    gap: 22px;
    padding: 18px;
    background: linear-gradient(180deg, rgba(17,27,47,.96), rgba(7,13,28,.98));
    border: 1px solid rgba(110,153,213,.58);
    box-shadow: 0 12px 24px rgba(0,0,0,.34), inset 0 0 24px rgba(128,169,226,.08);
}

.guide-entry-image {
    padding: 6px;
    background: #100b07;
    border: 1px solid rgba(128,169,226,.45);
}

.guide-entry-image img {
    width: 100%;
    height: 100%;
    min-height: 230px;
    display: block;
    object-fit: cover;
    max-width: none;
}

.guide-entry-content h2,
.mix-card h2,
.event-card h2,
.newbie-step h2 {
    margin: 0 0 14px;
    color: #deebff;
    font-family: "Albertusbold Regular";
    font-size: 24px;
    text-transform: uppercase;
    text-shadow: 1px 1px 2px #000;
}

.guide-entry-content h3,
.mix-card h3,
.event-card h3 {
    margin: 18px 0 10px;
    color: #9ddcff;
    font-family: "Albertusbold Regular";
    font-size: 13px;
    text-transform: uppercase;
}

.guide-entry-content p,
.mix-card p,
.event-card p,
.newbie-step p {
    margin: 0;
    color: #b9cbe6;
    font-size: 13px;
    line-height: 1.45;
}

.guide-meta {
    display: grid;
    gap: 8px;
    margin-bottom: 14px;
}

.guide-meta div,
.mix-result {
    display: grid;
    grid-template-columns: 115px 1fr;
    gap: 12px;
    align-items: center;
    color: #b9cbe6;
    font-size: 13px;
}

.guide-meta b,
.mix-result b {
    color: #94acd4;
    font-family: "Albertusbold Regular";
    text-transform: uppercase;
    font-size: 11px;
}

.guide-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.guide-tags li {
    padding: 7px 10px;
    color: #09162b;
    background: linear-gradient(180deg, #a4d5ff, #315985);
    border: 1px solid rgba(154,208,255,.85);
    font-family: "Albertusbold Regular";
    font-size: 11px;
    text-transform: uppercase;
}

.guide-rating {
    display: inline-block;
    width: 90px;
    height: 8px;
    margin-right: 8px;
    background: rgba(17,12,8,.85);
    border: 1px solid rgba(255,225,145,.25);
    overflow: hidden;
    vertical-align: middle;
}

.guide-rating span {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, #406eaa, #a0d8ff);
}

.guide-rating-value {
    color: #deebff;
    font-family: "Albertusbold Regular";
    font-size: 12px;
}

.mix-grid,
.event-timeline,
.newbie-steps {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
}

.mix-card,
.event-card,
.newbie-step {
    padding: 22px;
    background: linear-gradient(180deg, rgba(17,27,47,.96), rgba(7,13,28,.98));
    border: 1px solid rgba(110,153,213,.58);
    box-shadow: 0 12px 24px rgba(0,0,0,.34), inset 0 0 24px rgba(128,169,226,.08);
}

.mix-result {
    margin-top: 14px;
}

.drop-search {
    margin-bottom: 18px;
    padding: 14px;
    background: linear-gradient(180deg, rgba(17,27,47,.96), rgba(7,13,28,.98));
    border: 1px solid rgba(110,153,213,.58);
}

.drop-search input {
    width: 100%;
    height: 44px;
    padding: 0 16px;
    color: #deebff;
    background: rgba(0,0,0,.35);
    border: 1px solid rgba(110,153,213,.58);
    font-family: "Albertusmedium Regular";
}

.drop-table-wrap {
    overflow-x: auto;
}

.drop-table {
    width: 100%;
    background: linear-gradient(180deg, rgba(17,27,47,.96), rgba(7,13,28,.98));
    border: 1px solid rgba(110,153,213,.58);
}

.drop-table th,
.drop-table td {
    padding: 12px;
    border: 1px solid rgba(110,153,213,.28);
    color: #b9cbe6;
    font-size: 13px;
    text-align: left;
}

.drop-table th {
    color: #deebff;
    font-family: "Albertusbold Regular";
    text-transform: uppercase;
}

.newbie-step {
    display: grid;
    grid-template-columns: 54px 1fr;
    gap: 16px;
    align-items: start;
}

.step-number {
    width: 54px;
    height: 54px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #09162b;
    background: linear-gradient(180deg, #a4d5ff, #315985);
    border: 1px solid rgba(154,208,255,.85);
    font-family: "Albertusbold Regular";
    font-size: 24px;
}
/* FIX: class-art height only to image */
.nm-guide .class-panel {
    align-items: start !important;
}

.nm-guide .class-art {
    align-self: start !important;
    height: fit-content !important;
}
@media (max-width: 900px) {
    .guide-entry,
    .mix-grid,
    .event-timeline,
    .newbie-steps {
        grid-template-columns: 1fr;
    }
}

/* ============================= */
/* SERVER INFO - NATUREMU STYLE */
/* ============================= */

.nm-server-info,
.nm-server-info * {
    box-sizing: border-box;
}

.nm-server-info {
    max-width: 1040px;
    margin: -25px auto 35px;
    color: #c4d0e5;
}

.server-hero {
    text-align: center;
    padding-bottom: 30px;
    margin-bottom: 28px;
    background: url(../images/content-line.png) bottom repeat-x;
}

.server-hero h1 {
    margin: 0 0 14px;
    color: #e6f0ff;
    font-size: 42px;
}

.server-hero p {
    max-width: 780px;
    margin: 0 auto;
    color: #b9cbe6;
    font-size: 15px;
    line-height: 1.55;
}

.server-info-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin-bottom: 28px;
}

.server-info-card {
    display: flex;
    gap: 14px;
    align-items: center;
    padding: 18px;
    background: linear-gradient(180deg, rgba(17,27,47,.96), rgba(7,13,28,.98));
    border: 1px solid rgba(110,153,213,.58);
    box-shadow: 0 12px 24px rgba(0,0,0,.34), inset 0 0 24px rgba(128,169,226,.08);
}

.server-info-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #09162b;
    background: linear-gradient(180deg, #a4d5ff, #315985);
    border: 1px solid rgba(154,208,255,.85);
    font-family: "Albertusbold Regular";
    font-size: 13px;
    box-shadow: 0 0 14px rgba(117,181,249,.35);
}

.server-info-card span {
    display: block;
    margin-bottom: 6px;
    color: #94acd4;
    font-family: "Albertusbold Regular";
    font-size: 11px;
    text-transform: uppercase;
}

.server-info-card strong {
    display: block;
    color: #deebff;
    font-family: "Albertusbold Regular";
    font-size: 18px;
    text-shadow: 1px 1px 2px #000;
}

.server-section {
    margin-bottom: 28px;
    padding: 22px;
    background: linear-gradient(180deg, rgba(17,27,47,.96), rgba(7,13,28,.98));
    border: 1px solid rgba(110,153,213,.58);
    box-shadow: 0 12px 24px rgba(0,0,0,.34), inset 0 0 24px rgba(128,169,226,.08);
}

.server-section-title {
    margin-bottom: 18px;
    padding-bottom: 16px;
    background: linear-gradient(90deg, transparent, rgba(128,169,226,.5), transparent) bottom / 100% 1px no-repeat;
}

.server-section-title h2 {
    margin: 0 0 8px;
    color: #deebff;
    font-family: "Albertusbold Regular";
    font-size: 26px;
    text-transform: uppercase;
    text-shadow: 1px 1px 2px #000;
}

.server-section-title p {
    margin: 0;
    color: #b9cbe6;
    font-size: 13px;
    line-height: 1.45;
}

.server-table-wrap {
    overflow-x: auto;
}

.server-table {
    width: 100%;
    margin: 0;
    border-collapse: collapse;
}

.server-table th,
.server-table td {
    padding: 12px 14px;
    border: 1px solid rgba(110,153,213,.28);
    color: #b9cbe6;
    font-size: 13px;
}

.server-table th {
    color: #09162b;
    background: linear-gradient(180deg, #a4d5ff, #315985);
    border-color: rgba(154,208,255,.65);
    font-family: "Albertusbold Regular";
    text-transform: uppercase;
    font-size: 11px;
}

.server-table td:first-child {
    color: #deebff;
    font-family: "Albertusbold Regular";
}

.commands-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.command-card {
    display: grid;
    grid-template-columns: 170px 1fr;
    gap: 14px;
    align-items: center;
    padding: 13px 14px;
    background: rgba(0,0,0,.24);
    border: 1px solid rgba(110,153,213,.28);
}

.command-card code {
    color: #9ddcff;
    font-family: "Albertusbold Regular";
    font-size: 13px;
    text-shadow: 0 0 8px rgba(117,181,249,.35);
}

.command-card span {
    color: #b9cbe6;
    font-size: 13px;
    line-height: 1.35;
}

@media (max-width: 980px) {
    .server-info-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .commands-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 620px) {
    .nm-server-info {
        margin-top: 0;
    }

    .server-info-grid {
        grid-template-columns: 1fr;
    }

    .command-card {
        grid-template-columns: 1fr;
    }

    .server-hero h1 {
        font-size: 34px;
    }
}
.nm-guild-profile-line {
	display:flex;
	align-items:center;
	gap:12px;
}

.nm-guild-profile-logo {
	width:42px;
	height:42px;
	display:flex;
	align-items:center;
	justify-content:center;
	background:rgba(0,0,0,.35);
	border:1px solid rgba(128,169,226,.45);
	box-shadow:inset 0 0 12px rgba(0,0,0,.45);
}

.nm-guild-profile-logo img,
.nm-guild-profile-logo canvas {
	display:block;
	image-rendering:pixelated;
}
.nm-stat-row-full {
	grid-column:1 / -1;
}
.nm-deaths-panel {
	margin-top:22px;
}
.nm-deaths-panel,
.nm-achievements-panel {
	margin-top:22px;
	overflow:visible;
}

.nm-achievements-grid {
	display:grid;
	grid-template-columns:repeat(4, 52px);
	gap:12px;
	overflow:visible;
	position:relative;
}

.nm-achievement {
	position:relative;
	width:52px;
	height:52px;
	display:flex;
	align-items:center;
	justify-content:center;
	background:linear-gradient(180deg, rgba(19,31,53,.95), rgba(5,9,20,.98));
	border:1px solid rgba(110,153,213,.45);
	box-shadow:inset 0 0 14px rgba(0,0,0,.65);
	cursor:help;
	opacity:.42;
	filter:grayscale(1);
	z-index:1;
}

.nm-achievement:hover {
	z-index:9999;
}

.nm-achievement.unlocked {
	opacity:1;
	filter:none;
	border-color:rgba(167,210,255,.8);
	box-shadow:0 0 14px rgba(128,169,226,.25), inset 0 0 18px rgba(128,169,226,.12);
}

.nm-achievement-icon {
	width:42px;
	height:42px;
	display:flex;
	align-items:center;
	justify-content:center;
	border-radius:50%;
	background:radial-gradient(circle, rgba(255,228,135,.95), rgba(151,88,28,.75) 48%, rgba(20,10,5,.95) 72%);
	border:1px solid rgba(255,230,150,.75);
	box-shadow:0 0 12px rgba(255,190,80,.22), inset 0 0 10px rgba(0,0,0,.55);
	color:#190d04;
	font-size:20px;
	font-family:Arial, Helvetica, sans-serif;
	font-weight:bold;
	text-shadow:0 1px 0 rgba(255,255,255,.25);
}

.nm-achievement-icon img {
	width:100%;
	height:100%;
	object-fit:contain;
	filter:drop-shadow(0 0 6px rgba(255,200,100,.25));
}

.nm-achievement.locked {
	opacity:1;
}

.nm-achievement.locked img {
	filter:grayscale(100%) brightness(40%);
}

.nm-achievement.unlocked img {
	filter:drop-shadow(0 0 8px rgba(167,210,255,.45));
}

.nm-achievement-tooltip {
	position:absolute;
	left:50%;
	top:calc(100% + 12px);
	transform:translateX(-50%);
	width:240px;
	padding:12px 14px;
	background:linear-gradient(180deg, rgba(13,22,40,.98), rgba(3,3,6,.98));
	border:1px solid rgba(255,218,120,.95);
	box-shadow:0 12px 28px rgba(0,0,0,.9), inset 0 0 18px rgba(167,210,255,.08);
	text-align:center;
	display:none;
	pointer-events:none;
	z-index:10000;
}

.nm-achievement:hover .nm-achievement-tooltip {
	display:block;
}

.nm-achievement-tooltip:after {
	content:"";
	position:absolute;
	left:50%;
	bottom:100%;
	transform:translateX(-50%);
	border-width:0 7px 7px 7px;
	border-style:solid;
	border-color:transparent transparent rgba(255,218,120,.95) transparent;
}

.nm-achievement-tooltip strong {
	display:block;
	margin-bottom:7px;
	color:#deebff;
	font-family:"Albertusbold Regular";
	font-size:13px;
	text-transform:uppercase;
	text-shadow:1px 1px 2px #000;
}

.nm-achievement-tooltip span {
	display:block;
	color:#b9cbe6;
	font-size:12px;
	line-height:16px;
}
.ranking-guild-line {
	display:flex;
	align-items:center;
	gap:8px;
}

.ranking-guild-logo {
	width:28px;
	height:28px;
	flex:0 0 28px;
	display:flex;
	align-items:center;
	justify-content:center;
	background:rgba(0,0,0,.28);
	border:1px solid rgba(110,153,213,.28);
}

.ranking-guild-info {
	display:flex;
	flex-direction:column;
	gap:3px;
}

.ranking-guild-info strong {
	line-height:1;
}

.ranking-guild-info span {
	color:#94acd4;
	font-size:11px;
}