@font-face { font-family: "AlbertusMedium"; src: url("../fonts/AlbertusMedium.woff") format("woff"), url("../fonts/AlbertusMedium.ttf") format("truetype"); font-style: normal; }
@font-face { font-family: "AlbertusBold"; src: url("../fonts/AlbertusBold.woff") format("woff"), url("../fonts/AlbertusBold.ttf") format("truetype"); 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; }

::-webkit-scrollbar {width: 0px}

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%;

    /* One fixed full-page background. No body-bottom/body-repeat layers. */
    background: #101947 url(../images/body-top.jpg) center top / cover no-repeat fixed;

    font-family: "AlbertusMedium";
    font-size: 16px;
    color: #6e5263;
    font-weight: 500;
    min-height: 100vh;
}

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

a:hover { text-decoration: none; }

p { margin-bottom: 20px; }

h1, h2, h3, h4 { color: #a24b7f; margin-bottom: 30px; line-height: 1.4; }

h1 { font-size: 24px; }

h2 { font-size: 20px; }

h3 { font-size: 18px; }

h4 { font-size: 16px; }

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:not(.form-control):not(#item_buy select) { width: 100%; position: relative; font-family: "AlbertusMedium"; -webkit-appearance: none; background-image: url(../images/select-drop.png); background-position: right 20px center; background-repeat: no-repeat; background-color: #f8f6f2; -moz-appearance: none; text-indent: 0.01px; text-overflow: ''; -ms-appearance: none; appearance: none !important; cursor: pointer; font-size: 16px; color: #6e5263; text-align: center; border: 0px; height: 60px; }

input:not([type='checkbox']):not([type='radio']):not([type='file']):not(.form-control) { border: none; color: #6e5263; position: relative; text-align: center; font-size: 16px; width: 100%; height: 60px; line-height: 60px; font-family: "AlbertusMedium"; background-color: #f8f6f2; }
input::placeholder { color: #6e5263; }

textarea { border: none; position: relative; color: #6e5263; font-family: "AlbertusMedium"; font-size: 16px; width: 100%; }

button:not(.btn):not(.buy_button):not(.ui-dialog-titlebar-close):not(.buttonn), .button { transition: all 0.3s ease; cursor: pointer; background: url(../images/button-lk.png) no-repeat; width: 212px; height: 65px; border: none; color: #732753; position: relative; z-index: 1; font-size: 16px; font-weight: bold; text-align: center; text-transform: uppercase; font-family: "AlbertusMedium"; display: inline-block; filter: brightness(100%) drop-shadow(0px 10px 10px rgba(141, 90, 8, 0.4)); }

button:not(.btn):not(.buy_button):not(.ui-dialog-titlebar-close):not(.buttonn):hover:hover, .button:hover { filter: brightness(120%) drop-shadow(0px 10px 10px rgba(141, 90, 8, 0.4)); }

.button-small { background: url(../images/button.png) no-repeat; width: 143px; height: 56px; line-height: 54px; }
.button-small:hover{
    color: #732753;
}
:focus { outline: none; }

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

.wrapper { width: 1300px; position: relative; margin: 0 auto; }

.topPanel { padding: 10px 0px; }

.menu ul { display: flex; align-items: center; }
.menu ul li { padding: 0px 30px; }
.menu ul li a { color: #732753; font-size: 18px; text-transform: uppercase; font-weight: bold; display: block; padding: 10px 0px; position: relative; }
.menu ul li a::after { content: ""; position: absolute; background: #c05090; height: 1px; width: 0%; top: calc(100% + 5px); left: 0px; transition: 0.3s; }
.menu ul li a:hover { color: #c05090; }
.menu ul li a:hover:after { width: 100%; }

.langBlock { position: relative; }
.langBlock-active { cursor: pointer; position: relative; }
.langBlock-active:after { content: ''; position: absolute; right: -30px; top: 13px; border: 8px solid transparent; border-left: 10px solid #b48ca5; transition: 0.3s; }
.langBlock-active span { position: relative; background-color: #ba97b0; border-radius: 50%; width: 42px; height: 42px; display: flex; align-items: center; justify-content: center; }
.langBlock-active span img { display: block; border-radius: 50%; width: 26px; height: 26px; }

.langBlock-active.active::after { right: 11px; top: 51px; transform: rotate(90deg); }

.pa { background: url(../images/button-lk.png) no-repeat; display: inline-block; width: 212px; height: 65px; line-height: 65px; color: #732753; font-size: 16px; text-transform: uppercase; text-align: center; font-weight: bold; filter: drop-shadow(0px 10px 10px rgba(141, 90, 8, 0.4)); }
.pa:hover{
  color: #732753 !important;  
}
.lk { margin-left: 50px; }

.langBlock-drop { position: absolute; background: #b48ca5; padding: 10px 0px; text-transform: uppercase; border-radius: 10px; right: -10px; top: 100%; margin-top: 20px; min-width: 130px; display: none; }
.langBlock-drop ul li a { color: #fff; display: flex; align-items: center; font-size: 14px; padding: 5px 10px; }
.langBlock-drop ul li a:hover { background: rgba(0, 0, 0, 0.1); }
.langBlock-drop ul li a img { width: 20px; height: 20px; border-radius: 50%; margin-right: 10px; border: 2px solid #fff; }

.header { min-height: 730px; position: relative; }

.logo { position: absolute; left: 50%; top: 120px; transform: translateX(-50%); }

.logo img { max-width: none; width: 900px; }

.sonline { background: url(../images/online-img.png) no-repeat; width: 326px; height: 290px; position: absolute; right: -65px; top: 230px; text-align: center; color: #ffffff; padding-top: 117px; line-height: 1.2; text-transform: uppercase; font-size: 11px; text-shadow: 0px 2px 3px rgba(0, 0, 0, 0.4); }
.sonline span { display: block; text-align: center; font-size: 20px; }

.time-server {
    position: absolute;
    left: calc(50% + 395px);   /* ставим справа от центрального лого */
    top: 325px;                /* подгоняем по вертикали к онлайну */

    width: 220px;
    height: 250px;

    background: url(../images/time-img.png) center top no-repeat;
    background-size: 190px auto;

    padding-top: 195px;        /* текст опускаем под иконку */
    text-align: center;
    font-weight: bold;
    color: #ffffff;

    z-index: 5;
}

.time-server span {
    display: inline-block;
    color: #dbeaff;
    font-size: 14px;
    line-height: 1;
    text-transform: uppercase;
    font-weight: bold;
    letter-spacing: 0.7px;
    margin-bottom: 5px;

    padding: 3px 8px;
    border-radius: 10px;

    background: rgba(10, 18, 55, 0.22);
    box-shadow:
        inset 0 0 6px rgba(120, 210, 255, 0.08),
        0 0 7px rgba(5, 10, 35, 0.24);

    text-shadow:
        -1px -1px 0 rgba(4, 8, 28, 0.85),
         1px -1px 0 rgba(4, 8, 28, 0.85),
        -1px  1px 0 rgba(4, 8, 28, 0.85),
         1px  1px 0 rgba(4, 8, 28, 0.85),
         0 0 8px rgba(115, 210, 255, 0.65),
         0 2px 5px rgba(5, 10, 35, 0.95);
}

.time-node {
    display: inline-block;
    color: #ffffff;
    font-size: 19px;
    line-height: 1.05;
    padding: 4px 10px 3px;
    border-radius: 12px;

    font-weight: bold;
    letter-spacing: 0.3px;

    background: rgba(10, 18, 55, 0.18);
    box-shadow:
        inset 0 0 5px rgba(120, 210, 255, 0.05),
        0 0 6px rgba(5, 10, 35, 0.18);

    text-shadow:
        -1px -1px 0 rgba(4, 8, 28, 0.95),
         1px -1px 0 rgba(4, 8, 28, 0.95),
        -1px  1px 0 rgba(4, 8, 28, 0.95),
         1px  1px 0 rgba(4, 8, 28, 0.95),
         0 0 9px rgba(120, 220, 255, 0.75),
         0 2px 5px rgba(5, 10, 35, 1);
}

.sg { position: absolute; text-align: center; width: 100%; left: 0px; bottom: 25px; z-index: 2; }

.sg-button,
.sg-button:link,
.sg-button:visited {
    background: url(../images/button-start.png) center center no-repeat;
    background-size: 369px 171px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 369px;
    height: 171px;
    box-sizing: border-box;
    padding-top: 15px;
    text-align: center;
    text-decoration: none;
    color: #ffffff !important;
    text-transform: uppercase;
    font-size: 26px;
    font-weight: bold;
    line-height: 1;
    text-shadow: 0px 2px 5px rgba(19, 42, 113, 0.85),
                 0px 0px 8px rgba(134, 210, 255, 0.55);
    position: relative;
    z-index: 10;
}

/* =========================
   COMMON SECTION TITLE — CENTERED ORNAMENT HEADER v3
   ========================= */

.titleWeb {
    position: relative;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    max-width: 100%;

    gap: 2px;

    margin: 0 auto 18px;
    padding: 0;

    color: #f6f7ff;
    font-size: 24px;
    font-weight: 700;
    line-height: 1;
    text-transform: uppercase;
    white-space: nowrap;
    text-align: center;

    z-index: 2;

    text-shadow:
        0 2px 4px rgba(5, 10, 35, 1),
        0 0 3px rgba(125, 185, 255, 0.28);

    -webkit-text-stroke: 0.25px rgba(20, 32, 80, 0.35);
}

.titleWeb:before,
.titleWeb:after {
    content: "";
    display: block;

    width: 118px;
    height: 54px;
    flex: 0 0 118px;

    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;

    opacity: 1;

    filter:
        brightness(1.2)
        contrast(1.28)
        saturate(1.15)
        drop-shadow(0 0 5px rgba(130, 205, 255, 0.42));

    pointer-events: none;
}

.titleWeb:before {
    background-image: url(../images/title-left-img.png);
}

.titleWeb:after {
    background-image: url(../images/title-right-img.png);
}

/* Section-specific spacing */
.lastNews .titleWeb {
    margin-bottom: 20px;
}

.middleBlock-top .titleWeb {
    margin-bottom: 20px;
}

.mediaBlock .titleWeb {
    margin-bottom: 22px;
}
.topBlock { background: rgba(255, 255, 255, 0.4); padding: 50px 0px; }

.topBlock-donat { padding: 5px; width: 33.3%; }

.topBlock-don { background: #f8f6f2; display: flex; align-items: center; padding: 4px 15px; }
.topBlock-don span { display: inline-block; font-size: 16px; position: relative; }

.donat-number { width: 63px; height: 56px; line-height: 56px; text-align: center; color: #732753; font-weight: bold; filter: drop-shadow(0px 5px 5px rgba(115, 39, 83, 0.4)); flex-shrink: 0; }

.donat-number_1 { background: url(../images/top_1.png) no-repeat; }

.donat-number_2 { background: url(../images/top_2.png) no-repeat; }

.donat-number_3 { background: url(../images/top_3.png) no-repeat; }

.donat-country { width: 60px; text-align: center; flex-shrink: 0; }
.donat-country img { display: block; margin: 0 auto; border: 2px solid #e2c7aa; width: 20px; height: 17px; }

.donat-nick { color: #a24b7f; font-weight: bold; width: 45%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.donat-score { color: #6e5263; width: 35%; }

.donat-rank { color: #6e5263; width: 20%; }
.donat-rank span { color: #fc5656; font-size: 12px; position: absolute; top: -3px; }

.top { margin-bottom: 100px; }

.newsBlock { width: calc(33.3% - 10px); background: url(../images/news-bg.jpg) bottom center no-repeat; box-shadow: 0px 10px 30px 0px rgba(168, 189, 218, 0.6); position: relative; }

.newsBlock-img { position: relative; }
.newsBlock-img img { object-fit: cover; }
.newsBlock-img a { display: block; }
.newsBlock-img a:after { content: ""; position: absolute; background: linear-gradient(to top, white, rgba(255, 255, 255, 0)); width: 100%; bottom: 0; left: 0; height: 30%; }

.newsBlock-bottom { padding: 30px 50px 100px 50px; }

.newsBlock-title { margin-bottom: 20px; }
.newsBlock-title a { font-size: 24px; line-height: 1.2; font-weight: bold; }

.newsBlock-text { line-height: 1.3; margin-bottom: 24px; }

.newsBlock-date { color: #f6ba4d; font-weight: bold; font-size: 12px; }
.newsBlock-date span { color: #a24b7f; font-size: 24px; }

.newsBlock-info { position: absolute; left: 0; bottom: 0; padding: 30px 50px; width: 100%; }

.lastNews { margin-bottom: 100px; }

.corner { width: 60px; height: 23px; position: absolute; background-repeat: no-repeat; z-index: 2; }

.corner-left-top { background-image: url(../images/corner-left-top.png); left: -6px; top: -7px; }

.corner-right-top { background-image: url(../images/corner-right-top.png); right: -6px; top: -7px; }

.corner-right-bottom { background-image: url(../images/corner-right-bottom.png); right: -6px; bottom: -7px; }

.corner-left-bottom { background-image: url(../images/corner-left-bottom.png); left: -6px; bottom: -7px; }

.middleBlock-top { width: calc(33.3% - 8px); position: relative; }

.block { position: relative; box-shadow: 0px 10px 30px 0px rgba(168, 189, 218, 0.6); min-height: 200px;}

.topTable-tr { padding: 15px 40px; display: flex; align-items: center; background: #f8f6f2; font-size: 16px; font-weight: bold; margin-bottom: 3px; }
.topTable-tr span { display: inline-block; padding: 0px 10px; }

.top-number { width: 15%; }
.top-number span { width: 30px; height: 30px; line-height: 30px; color: #fff; font-size: 16px; font-weight: bold; text-align: center; background-color: #732753; border-radius: 3px; padding: 0px; }

.top-img { width: 20%; display: flex !important; justify-content: flex-end; }
.top-img img { display: block; width: 30px; height: 30px; border-radius: 3px; }

.top-nick { width: 45%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 2px 10px !important; }

.top-score { width: 20%; text-align: right; }

.topTable-tr-top { background: rgba(255, 255, 255, 0); }

.topTable-tr-top { color: #a24b7f; padding: 40px 40px; }
.topTable-tr-top .top-number { padding-left: 21px; }

.topButton { padding: 20px 41px 50px 41px; }

.middleBlock-about { width: calc(66.7% - 8px); position: relative; }

.about { padding: 50px; min-height: 735px; }

.about-img { margin-bottom: 35px; }

.about-text { line-height: 1.2; margin-bottom: 35px; }

.middleBlock { margin-bottom: 90px; }

.mediaBlock {
    padding: 50px;
    margin-bottom: 100px;

    background:
        linear-gradient(
            to bottom,
            rgba(28, 42, 96, 0.54) 0%,
            rgba(22, 32, 78, 0.72) 46%,
            rgba(12, 20, 55, 0.84) 100%
        ) !important;

    border: 1px solid rgba(155, 220, 255, 0.32) !important;

    box-shadow:
        0 12px 28px rgba(2, 6, 25, 0.45),
        0 0 22px rgba(105, 190, 255, 0.18),
        inset 0 0 22px rgba(130, 190, 255, 0.12) !important;

    overflow: visible !important;
}

.mediaBlock .slick-arrow {
    width: 60px !important;
    height: 60px !important;
    position: absolute !important;
    top: 50% !important;
    margin-top: -30px !important;
    font-size: 0px !important;
}

.mediaBlock .slick-prev {
    background: url(../images/prev-img.png) !important;
    left: -80px !important;
}

.mediaBlock .slick-next {
    background: url(../images/next-img.png) !important;
    right: -80px !important;
}

.mediaBlock .slick-slide {
    display: flex;
    justify-content: center;
}

/* =====================================
   TO TOP BLOCK — MU ELARION STYLE
   ===================================== */

.topTopBlock {
    position: relative;
    height: 70px;
    margin-bottom: 50px;

    background: none !important;

    display: flex;
    align-items: center;
    justify-content: center;
}

.topTopBlock:before,
.topTopBlock:after {
    content: "";
    display: block;
    width: 42%;
    height: 12px;

    background:
        radial-gradient(
            circle at center,
            rgba(190, 245, 255, 0.95) 0%,
            rgba(115, 210, 255, 0.55) 9%,
            rgba(130, 85, 255, 0.22) 18%,
            rgba(130, 85, 255, 0) 30%
        ),
        linear-gradient(
            90deg,
            rgba(115, 210, 255, 0) 0%,
            rgba(115, 210, 255, 0.16) 18%,
            rgba(150, 230, 255, 0.58) 48%,
            rgba(170, 105, 255, 0.38) 58%,
            rgba(115, 210, 255, 0.16) 82%,
            rgba(115, 210, 255, 0) 100%
        );

    background-size:
        52px 12px,
        100% 20px;

    background-position:
        center center,
        center center;

    background-repeat:
        no-repeat,
        no-repeat;

    box-shadow:
        0 0 8px rgba(115, 210, 255, 0.42),
        0 0 16px rgba(155, 95, 255, 0.24);

    opacity: 0.9;
}

.topTopBlock:before {
    transform: scaleX(-1);
}

.toTop {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 54px;
    height: 54px;
    margin: 0 18px;

    cursor: pointer;

    background:
        radial-gradient(
            circle,
            rgba(120, 220, 255, 0.32) 0%,
            rgba(90, 80, 190, 0.24) 42%,
            rgba(10, 18, 55, 0.82) 100%
        );

    border: 1px solid rgba(155, 220, 255, 0.42);
    border-radius: 8px;

    transform: rotate(45deg);

    box-shadow:
        inset 0 0 12px rgba(120, 220, 255, 0.18),
        0 0 12px rgba(115, 210, 255, 0.32),
        0 0 22px rgba(145, 85, 255, 0.18);
}

.toTop:before {
    content: "";
    width: 14px;
    height: 14px;

    border-left: 3px solid rgba(235, 250, 255, 0.95);
    border-top: 3px solid rgba(235, 250, 255, 0.95);

    transform: rotate(0deg) translate(2px, 2px);

    filter:
        drop-shadow(0 0 4px rgba(120, 220, 255, 0.8))
        drop-shadow(0 0 8px rgba(145, 85, 255, 0.35));
}

.toTop:hover {
    background:
        radial-gradient(
            circle,
            rgba(150, 235, 255, 0.44) 0%,
            rgba(110, 95, 220, 0.30) 42%,
            rgba(12, 22, 65, 0.90) 100%
        );

    box-shadow:
        inset 0 0 14px rgba(140, 230, 255, 0.24),
        0 0 16px rgba(125, 220, 255, 0.46),
        0 0 28px rgba(155, 95, 255, 0.28);
}

.footer { padding: 30px 0px; }

.footerBlock-left { width: 33.3%; }

.footerBlock-center { width: 33.3%; }

.footerBlock-right { width: 33.3%; }

.footerBlock-info ul { margin-bottom: 45px; }
.footerBlock-info ul li { padding: 2px 0px; }
.footerBlock-info ul li a { color: #6e5263; font-size: 14px; text-transform: uppercase; text-decoration: underline; }
.footerBlock-info ul li a:hover { text-decoration: none; color: #a24b7f; }

.copy { color: #a24b7f; font-weight: bold; text-transform: uppercase; font-size: 14px; }

.socBlock { display: flex; width: 100%; justify-content: flex-end; padding-right: 50px; }
.socBlock a { display: block; width: 45px; height: 45px; margin: 6px; }

.tg { background: url(../images/soc-block.png) left top no-repeat; }

.dc { background: url(../images/soc-block.png) left -57px top no-repeat; }

.modal-overlay *:before, .modal-overlay *:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

.modal-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(255, 255, 255, 0.8); overflow: auto; z-index: 999; transition: .4s all; opacity: 0; visibility: hidden; cursor: pointer; }

.modal-overlay_visible { opacity: 1; visibility: visible; }

.modal-table { display: table; width: 100%; height: 100%; }

.modal-table-cell { display: table-cell; vertical-align: middle; text-align: center; padding: 0 15px; }

.modal { transition: .4s all; display: inline-block; max-width: 640px; min-height: 700px; margin: 30px 0px; width: 100%; transform: translate(0, 20%); position: relative; cursor: auto; }

.modal-overlay_visible .modal { transform: translate(0); }

.modal__close { position: absolute; right: 25px; top: 25px; width: 25px; height: 25px; border-radius: 0 0 4px 4px; transition: .4s all; cursor: pointer; }

.modal__close:before, .modal__close:after { content: ""; display: block; height: 12px; width: 2px; transform: rotate(45deg); background: #fff; position: absolute; left: 0; right: 0; margin: auto; top: 0; bottom: 0; }

.modal__close:after { transform: rotate(-45deg); }

.modalTitle { font-size: 24px; color: #410e2d; margin-bottom: 30px; text-transform: uppercase; }
.modalTitle span { position: relative; }
.modalTitle span:before { content: ""; position: absolute; background: url(../images/title-left-img.png) no-repeat; width: 115px; height: 17px; right: 100%; margin-right: 30px; top: 50%; margin-top: -8px; }
.modalTitle span:after { content: ""; position: absolute; background: url(../images/title-right-img.png) no-repeat; width: 115px; height: 17px; left: 100%; margin-left: 30px; top: 50%; margin-top: -8px; }

.body-fixed { position: fixed; }

.modalContent { padding: 50px; }

.formGroup { background-color: #f8f6f2; height: 60px; margin-bottom: 15px; position: relative; }
.formGroup input { padding: 0px 90px; }

.modalContent-title { color: #a24b7f; font-weight: bold; font-size: 16px; text-transform: uppercase; margin-bottom: 35px; }

.formIcon { display: flex; align-items: center; justify-content: center; background: url(../images/top_1.png); width: 63px; height: 56px; position: absolute; left: 10px; top: 2px; z-index: 2; filter: drop-shadow(0px 5px 5px rgba(115, 39, 83, 0.2)); }

.icon { width: 40px; height: 40px; display: block; }

.icon-select { background: url(../images/icon-select.png) center no-repeat; }

.icon-name { background: url(../images/icon-name.png) center no-repeat; }

.icon-mail { background: url(../images/icon-mail.png) center no-repeat; }

.icon-password { background: url(../images/icon-password.png) center no-repeat; }

.checkbox-input { display: block; position: relative; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; margin-right: 20px; }

.checkbox-input input { position: absolute; opacity: 0; cursor: pointer; height: 0; width: 0; }

.checkmark { position: absolute; top: 0; left: 0; height: 15px; width: 15px; background-color: #fffffd; border: 2px solid #666569; }

.checkbox-input input:checked ~ .checkmark { background-color: #fffffd; }

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

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

.checkbox-input .checkmark:after { left: 3px; top: 0px; width: 5px; height: 10px; border: solid #854369; border-width: 0 3px 3px 0; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); }

.rules { display: flex; justify-content: center; color: #6e5263; font-weight: bold; padding: 40px 0px; }
.rules a { color: #f6ba4d; text-decoration: underline; margin-left: 5px; }
.rules a:hover { text-decoration: none; }

.modal-button button { filter: brightness(100%) drop-shadow(0px 10px 10px rgba(247, 180, 64, 0.7)); }

.logo-mini-mobile { display: none; }

a.lightzoom { cursor: zoom-in; cursor: -webkit-zoom-in; cursor: -moz-zoom-in; }

#lz-container { display: block; height: 100%; width: 100%; left: 0; top: 0; white-space: nowrap; position: absolute; z-index: 9999990 !important; }

#lz-box { position: fixed; height: 100%; width: 100%; line-height: 1px; text-align: center; display: inline-block; z-index: 9999998 !important; }

#lz-overlay { display: block; opacity: 0.6; background: #000; position: fixed; top: 0; left: 0; height: 100%; width: 100%; z-index: 9999991 !important; }

#lz-box:before { content: ""; display: inline-block; height: 50%; width: 1px; margin-right: -1px; }

#lz-box img { float: none; display: inline-block; max-height: 80%; max-width: 100%; margin: 0; padding: 0; width: auto; height: auto; vertical-align: middle; opacity: 0; position: relative; z-index: 9999995 !important; }

#lz-box p { position: relative; bottom: 0; margin-top: -30px; margin-bottom: 0; line-height: 20px; font-size: 18px; z-index: 9999997 !important; }

#lz-close { display: block; position: absolute; top: 2%; right: 2%; background: url(../images/close.png) no-repeat; width: 16px; height: 16px; text-indent: -9999px; padding: 5px; opacity: 0.8; z-index: 9999998 !important; }

#lz-close:hover { opacity: 1; }

#lz-loading-center { width: 100%; height: 100%; position: relative; z-index: 9999999 !important; }

#lz-loading-center > .lz-loading-center-box { position: fixed; left: 50%; top: 50%; height: 150px; width: 150px; margin-top: -75px; margin-left: -75px; }

.lz-object { width: 20px; height: 20px; background-color: #FFF; float: left; margin-right: 20px; margin-top: 65px; -moz-border-radius: 50% 50% 50% 50%; -webkit-border-radius: 50% 50% 50% 50%; border-radius: 50% 50% 50% 50%; }

#lz-object_one { -webkit-animation: object_one 1.5s infinite; animation: object_one 1.5s infinite; }

#lz-object_two { -webkit-animation: object_two 1.5s infinite; animation: object_two 1.5s infinite; -webkit-animation-delay: 0.25s; animation-delay: 0.25s; }

#lz-object_three { -webkit-animation: object_three 1.5s infinite; animation: object_three 1.5s infinite; -webkit-animation-delay: 0.5s; animation-delay: 0.5s; }

@-webkit-keyframes object_one { 75% { -webkit-transform: scale(0); } }
@keyframes object_one { 75% { transform: scale(0); -webkit-transform: scale(0); } }
@-webkit-keyframes object_two { 75% { -webkit-transform: scale(0); } }
@keyframes object_two { 75% { transform: scale(0); -webkit-transform: scale(0); } }
@-webkit-keyframes object_three { 75% { -webkit-transform: scale(0); } }
@keyframes object_three { 75% { transform: scale(0); -webkit-transform: scale(0); } }
.main { position: relative; z-index: 20; }

.leaves-left-more { display: block; background: url(../images/leaves-left-more.png); width: 594px; height: 667px; position: absolute; opacity: 0.7; left: 0px; top: 350px; animation: leaves-left-more 4.5s linear infinite; opacity: 0; }

.leaves-left-more_1 { animation-delay: 1.5s; }

.leaves-left-more_2 { animation-delay: 3s; }

.leaves-left-more_3 { animation-delay: 4.5s; }

@keyframes leaves-left-more { 0% { left: 400px; transform: scale(0); }
  25% { left: 300px; transform: scale(0.25); }
  50% { left: 200px; transform: scale(0.5); opacity: 1; }
  75% { left: 100px; transform: scale(0.75); opacity: 0.5; }
  100% { left: 0px; transform: scale(1); opacity: 0; } }
.leaves-right-more { display: block; background: url(../images/leaves-right-more.png); width: 462px; height: 392px; position: absolute; opacity: 0.7; right: -100px; top: 500px; animation: leaves-right-more 4.5s linear infinite; opacity: 0; }

@keyframes leaves-right-more { 0% { right: 300px; transform: scale(0); }
  25% { right: 200px; transform: scale(0.25); }
  50% { right: 100px; transform: scale(0.5); opacity: 1; }
  75% { right: 0px; transform: scale(0.75); opacity: 0.5; }
  100% { right: -100px; transform: scale(1); opacity: 0; } }
.leaves-right-more_1 { animation-delay: 1.5s; }

.leaves-right-more_2 { animation-delay: 3s; }

.leaves-right-more_3 { animation-delay: 4.5s; }

.leaves-left-top { display: block; background: url(../images/leaves-left-top.png); width: 128px; height: 91px; position: absolute; left: -250px; top: 400px; opacity: 0.5; animation: leaves-left-top 10s linear infinite; }

@keyframes leaves-left-top { 0% { top: 400px; }
  25% { top: 600px; }
  50% { top: 400px; }
  75% { top: 600px; }
  100% { top: 400px; } }
.leaves-left-bottom { display: block; background: url(../images/leaves-left-bottom.png); width: 165px; height: 121px; position: absolute; left: -150px; top: 400px; opacity: 0.6; animation: leaves-left-top 10s linear infinite; animation-delay: 2s; }

.leaves-right-top { display: block; background: url(../images/leaves-right-top.png); width: 239px; height: 144px; position: absolute; right: -400px; top: 400px; animation: leaves-left-top 10s linear infinite; animation-delay: 1s; }

.leaves-right-bottom { display: block; background: url(../images/leaves-right-bottom.png); width: 161px; height: 113px; position: absolute; right: -200px; top: 600px; opacity: 0.6; animation: leaves-right-bottom 10s linear infinite; animation-delay: 4s; }

@keyframes leaves-right-bottom { 0% { top: 600px; }
  25% { top: 800px; }
  50% { top: 600px; }
  75% { top: 800px; }
  100% { top: 600px; } }
/* Main content wrapper must stay transparent so the body middle background is visible */
.page-content {
    background: transparent;
}

.block-content { min-height: 1000px; background-color: rgba(255, 255, 255, 0); padding: 45px 50px; color: #6e5263; font-size: 18px; }
.block-content p { line-height: 1.4; }
.block-content a { color: #eb1796; }
.block-content a:hover { text-decoration: underline; }


.item { background: url(../images/item-bg.png) no-repeat; width: 270px; height: 348px; text-align: center; position: relative; padding-top: 25px; line-height: 1; transition: 0.3s; cursor: pointer; }

.item-img { background: url(../images/item-img-bg.png); width: 154px; height: 154px; margin: 0 auto; margin-bottom: 5px; }

.item-name { font-weight: bold; font-size: 18px; margin-bottom: 5px; }

.item-char { color: #9eaab6; margin-bottom: 5px; font-size: 14px; }

.item-char-n { margin-bottom: 5px; font-size: 14px; }

.item-price { display: flex; align-items: center; justify-content: center; color: #732753; font-weight: bold; margin: 0 auto; }
.item-price i { margin-right: 5px; }

.item-buy { text-transform: uppercase; font-size: 9px; height: 35px; line-height: 35px; width: 130px; position: absolute; bottom: 14px; left: 50%; margin-left: -65px; font-weight: bold; }

.item.active { background: url(../images/item-bg-active.png); filter: drop-shadow(0px 10px 5px rgba(255, 255, 255, 0.1)); }
.item.active .item-buy { color: #fff; }

.item:hover { background: url(../images/item-bg-active.png); filter: drop-shadow(0px 10px 5px rgba(255, 255, 255, 0.1)); }
.item:hover .item-buy { color: #fff; }

.item-corner { background: url(../images/corner-blue.png) no-repeat; width: 83px; height: 83px; position: absolute; top: -2px; left: -2px; transition: 0.3s; opacity: 1; }
.item-corner span { color: #fff; font-size: 10px; font-weight: bold; text-transform: uppercase; transform: rotate(-45deg); display: inline-block; text-align: center; width: 100%; position: absolute; left: -9px; top: 28px; letter-spacing: 1px; }

.item-corner-orange { background: url(../images/corner-orange.png) no-repeat; }

.itemsBlock { margin-left: -12px; margin-right: -12px; }

/* =====================================
   START BUTTON MAGIC STREAM v3
   Mixed assets: magic_wisp_1 / 2 / 3
   Directional energy from button center
   ===================================== */

.sg {
    position: absolute;
    text-align: center;
    width: 100%;
    left: 0px;
    bottom: 25px;
    z-index: 2;
    overflow: visible;
}

/* Button stays above the effect */
.sg-button,
.sg-button:link,
.sg-button:visited {
    position: relative;
    z-index: 20;
}

/* Wrapper for the whole magic burst */
.sg-magic-streams {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 560px;
    height: 315px;
    transform: translate(-50%, -52%);
    pointer-events: none;
    z-index: 8;
    overflow: visible;
}

/* Soft aura behind the Start button */
.sg-magic-streams::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 64%;
    width: 430px;
    height: 155px;
    transform: translate(-50%, -50%);
    background: radial-gradient(
        circle,
        rgba(92, 224, 255, 0.36) 0%,
        rgba(118, 92, 255, 0.22) 42%,
        rgba(118, 92, 255, 0) 78%
    );
    filter: blur(16px);
    opacity: 0.88;
    animation: sgGlowPulse 4.2s ease-in-out infinite;
}

/* Decorative ribbon around the button, very subtle */
.sg-magic-streams::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 62%;
    width: 455px;
    height: 165px;
    transform: translate(-50%, -50%);
    background: url(../images/custom/magic_swirl.png) center center / contain no-repeat;
    mix-blend-mode: screen;
    opacity: 0.20;
    filter: brightness(1.12) saturate(1.12);
    animation: sgRibbonPulse 5.8s ease-in-out infinite;
}

/* Energy wisps: each one starts behind the button and flies outward */
.sg-magic-stream {
    position: absolute;
    left: 50%;
    top: 64%;
    width: 135px;
    height: 62px;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
    mix-blend-mode: screen;
    opacity: 0;
    pointer-events: none;
    filter: brightness(1.1) saturate(1.12);
    transform: translate(-50%, -50%) scale(0.35) rotate(0deg);
    animation-name: sgBurst;
    animation-timing-function: ease-out;
    animation-iteration-count: infinite;
}

/* Asset mix */
.sg-magic-stream--type1 {
    background-image: url(../images/custom/magic_wisp_1.png);
}

.sg-magic-stream--type2 {
    background-image: url(../images/custom/magic_wisp_2.png);
}

.sg-magic-stream--type3 {
    background-image: url(../images/custom/magic_wisp_3.png);
}

.sg-magic-stream--1 {
    width: 132px;
    height: 64px;
    animation-duration: 2.9s;
    animation-delay: 0s;
    --x: -150px;
    --y: -78px;
    --rot-start: -8deg;
    --rot-end: -26deg;
    --scale-end: 0.98;
}

.sg-magic-stream--2 {
    width: 142px;
    height: 68px;
    animation-duration: 3.15s;
    animation-delay: 0.42s;
    --x: -88px;
    --y: -126px;
    --rot-start: -3deg;
    --rot-end: -12deg;
    --scale-end: 1.02;
}

.sg-magic-stream--3 {
    width: 126px;
    height: 62px;
    animation-duration: 2.85s;
    animation-delay: 0.88s;
    --x: 0px;
    --y: -125px;
    --rot-start: 0deg;
    --rot-end: 0deg;
    --scale-end: 1.06;
}

.sg-magic-stream--4 {
    width: 144px;
    height: 68px;
    animation-duration: 3.2s;
    animation-delay: 1.28s;
    --x: 92px;
    --y: -124px;
    --rot-start: 4deg;
    --rot-end: 13deg;
    --scale-end: 1.02;
}

.sg-magic-stream--5 {
    width: 132px;
    height: 64px;
    animation-duration: 2.95s;
    animation-delay: 1.72s;
    --x: 152px;
    --y: -76px;
    --rot-start: 8deg;
    --rot-end: 26deg;
    --scale-end: 0.98;
}

.sg-magic-stream--6 {
    width: 118px;
    height: 58px;
    animation-duration: 3.35s;
    animation-delay: 2.12s;
    --x: 0px;
    --y: -105px;
    --rot-start: 0deg;
    --rot-end: 0deg;
    --scale-end: 0.92;
}

.sg-magic-stream--7 {
    width: 120px;
    height: 58px;
    animation-duration: 2.75s;
    animation-delay: 2.55s;
    --x: -160px;
    --y: -24px;
    --rot-start: -18deg;
    --rot-end: -34deg;
    --scale-end: 0.86;
}

.sg-magic-stream--8 {
    width: 128px;
    height: 60px;
    animation-duration: 3.05s;
    animation-delay: 2.95s;
    --x: 164px;
    --y: -28px;
    --rot-start: 16deg;
    --rot-end: 32deg;
    --scale-end: 0.9;
}

/* Small energy sparks: less round/bubbly, more like tiny flares */
.sg-magic-dot {
    position: absolute;
    left: 50%;
    top: 66%;
    border-radius: 50%;
    background: radial-gradient(
        circle,
        rgba(255, 255, 255, 0.98) 0%,
        rgba(150, 230, 255, 0.92) 30%,
        rgba(138, 96, 255, 0.42) 55%,
        rgba(138, 96, 255, 0) 80%
    );
    box-shadow: 0 0 9px rgba(105, 210, 255, 0.65), 0 0 15px rgba(126, 83, 255, 0.35);
    mix-blend-mode: screen;
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.25);
    animation-name: sgDotBurst;
    animation-timing-function: ease-out;
    animation-iteration-count: infinite;
}

.sg-magic-dot--1 {
    width: 6px;
    height: 6px;
    animation-duration: 2.1s;
    animation-delay: 0.1s;
    --dx: -118px;
    --dy: -48px;
}

.sg-magic-dot--2 {
    width: 5px;
    height: 5px;
    animation-duration: 2.35s;
    animation-delay: 0.55s;
    --dx: -64px;
    --dy: -112px;
}

.sg-magic-dot--3 {
    width: 7px;
    height: 7px;
    animation-duration: 2.2s;
    animation-delay: 0.95s;
    --dx: 0px;
    --dy: -128px;
}

.sg-magic-dot--4 {
    width: 5px;
    height: 5px;
    animation-duration: 2.45s;
    animation-delay: 1.35s;
    --dx: 70px;
    --dy: -105px;
}

.sg-magic-dot--5 {
    width: 6px;
    height: 6px;
    animation-duration: 2.25s;
    animation-delay: 1.75s;
    --dx: 122px;
    --dy: -44px;
}

.sg-magic-dot--6 {
    width: 4px;
    height: 4px;
    animation-duration: 2.0s;
    animation-delay: 2.05s;
    --dx: -12px;
    --dy: -88px;
}

@keyframes sgGlowPulse {
    0%, 100% {
        opacity: 0.55;
        transform: translate(-50%, -50%) scale(0.97);
    }
    50% {
        opacity: 0.86;
        transform: translate(-50%, -50%) scale(1.04);
    }
}

@keyframes sgRibbonPulse {
    0%, 100% {
        opacity: 0.15;
        transform: translate(-50%, -50%) scale(0.98);
    }
    50% {
        opacity: 0.24;
        transform: translate(-50%, -50%) scale(1.03);
    }
}

@keyframes sgBurst {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) translate(0px, 0px) scale(0.28) rotate(var(--rot-start));
    }
    12% {
        opacity: 0.15;
    }
    30% {
        opacity: 0.58;
    }
    55% {
        opacity: 0.66;
    }
    78% {
        opacity: 0.18;
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -50%) translate(var(--x), var(--y)) scale(var(--scale-end)) rotate(var(--rot-end));
    }
}

@keyframes sgDotBurst {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) translate(0px, 0px) scale(0.2);
    }
    20% {
        opacity: 0.35;
    }
    45% {
        opacity: 0.65;
    }
    75% {
        opacity: 0.18;
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -50%) translate(var(--dx), var(--dy)) scale(0.8);
    }
}

/* Disable old leaf effects */
.leaves-left-top,
.leaves-left-bottom,
.leaves-right-top,
.leaves-right-bottom,
.leaves-left-more,
.leaves-right-more {
    display: none !important;
}


/* =====================================
   TOP NAVIGATION PANEL — FINAL CLEAN
   ===================================== */

.header-top {
    position: relative;
    z-index: 50;
    width: 100%;
    padding-top: 4px;
}

/* Main top panel background */
.topPanel {
    position: relative;
    left: 50%;
    width: calc(100vw - 80px);
    max-width: 1780px;
    height: 178px;
    margin: 0;
    padding: 0 120px;
    box-sizing: border-box;

    transform: translateX(-50%);

    background-image: url(../images/custom/top_panel.png);
    background-repeat: no-repeat;
    background-position: center top;
    background-size: 100% auto;

    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    overflow: visible;
    z-index: 5;
}

/* Content line inside the visual center of the panel */
.topPanel-left,
.topPanel-right {
    height: 132px;
    display: flex;
    align-items: center;
    position: relative;
    top: 18px;
}

/* Left part: logo + menu */
.topPanel-left {
    display: flex;
    align-items: center;
}

/* Right part: language + account */
.topPanel-right {
    display: flex;
    align-items: center;
}

/* Temporary placement for the small top logo */
.logo-mini {
    width: 160px;
    height: 90px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 34px;
    flex-shrink: 0;
}

.logo-mini a {
    display: block;
}

.logo-mini img {
    display: block;
    max-width: 150px;
    max-height: 76px;
}

/* Menu inside the panel */
.menu ul {
    display: flex;
    align-items: center;
    gap: 40px;
}

.menu ul li {
    padding: 0;
}

.menu ul li a {
    color: #dbeaff;
    font-size: 17px;
    text-transform: uppercase;
    font-weight: bold;
    display: block;
    padding: 10px 0;
    position: relative;
    line-height: 1;
    text-shadow:
        0 1px 3px rgba(4, 12, 40, 0.95),
        0 0 8px rgba(104, 175, 255, 0.25);
}

.menu ul li a::after {
    content: "";
    position: absolute;
    left: 50%;
    top: calc(100% - 4px);
    width: 0;
    height: 1px;
    background: linear-gradient(
        90deg,
        rgba(91, 218, 255, 0),
        rgba(137, 219, 255, 0.95),
        rgba(161, 105, 255, 0)
    );
    transform: translateX(-50%);
    transition: 0.25s ease;
    box-shadow: 0 0 8px rgba(120, 210, 255, 0.75);
}

.menu ul li a:hover {
    color: #ffffff;
    text-shadow:
        0 1px 3px rgba(4, 12, 40, 1),
        0 0 10px rgba(119, 218, 255, 0.65),
        0 0 18px rgba(156, 111, 255, 0.45);
}

.menu ul li a:hover::after {
    width: 100%;
}

/* Language block temporary styling inside panel */
.langBlock {
    position: relative;
    margin-right: 28px;
}

.langBlock-active {
    cursor: pointer;
    position: relative;
}

.langBlock-active:after {
    content: '';
    position: absolute;
    right: -22px;
    top: 50%;
    margin-top: -5px;
    border: 6px solid transparent;
    border-left: 8px solid rgba(199, 222, 255, 0.8);
    transition: 0.3s;
    filter: drop-shadow(0 0 5px rgba(104, 190, 255, 0.55));
}

.langBlock-active span {
    position: relative;
    background: rgba(21, 28, 80, 0.85);
    border: 1px solid rgba(145, 187, 255, 0.5);
    box-shadow:
        inset 0 0 8px rgba(88, 156, 255, 0.35),
        0 0 10px rgba(94, 183, 255, 0.25);
    border-radius: 50%;
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.langBlock-active span img {
    display: block;
    border-radius: 50%;
    width: 26px;
    height: 26px;
}

/* Account button in top panel */
.lk {
    margin-left: 28px;
    position: relative;
    z-index: 6;
}

.topPanel .pa {
    background: url(../images/button-lk.png) center center no-repeat;
    background-size: 212px 65px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 212px;
    height: 65px;
    line-height: 1;
    padding: 0 14px;
    margin: 0;
    box-sizing: border-box;

    color: #732753 !important;
    font-size: 16px;
    font-weight: bold;
    text-transform: uppercase;
    text-align: center;
    white-space: nowrap;

    filter: drop-shadow(0px 10px 10px rgba(141, 90, 8, 0.4));
}

.topPanel .pa:hover {
    color: #732753 !important;
}

/* Header content shifted down to leave room for the taller top panel */
.header {
    min-height: 720px;
}

.logo {
    top: 185px;
}

.sg {
    bottom: 0px;
}

/* =====================================
   TOP LOGO — SQUARE EMBLEM FINAL v4
   Balanced square emblem in top panel
   ===================================== */

.topPanel {
    overflow: visible !important;
}

.topPanel-left {
    overflow: visible !important;
}

/* Logo block in the left side of the top panel */
.topPanel .logo-mini {
    position: relative !important;
    top: 4px !important;

    width: 150px !important;
    height: 118px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    margin-right: 26px !important;
    flex-shrink: 0 !important;
    z-index: 20 !important;

    overflow: visible !important;
}

.topPanel .logo-mini a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 100% !important;
    height: 100% !important;
    line-height: 0 !important;

    overflow: visible !important;
}

.topPanel .logo-mini img {
    display: block !important;

    width: 80px !important;
    height: 80px !important;

    max-width: none !important;
    max-height: none !important;

    object-fit: contain !important;

    transform: scale(1.18) !important;
    transform-origin: center center !important;

    filter:
        brightness(0.96)
        saturate(0.95)
        contrast(0.98)
        drop-shadow(0 0 5px rgba(110, 210, 255, 0.28)) !important;
}
/* =====================================
   ONLINE EMBLEM POSITION + TEXT CENTER
   ===================================== */

.sonline {
    right: auto !important;
    left: -50px !important;
    top: 300px !important;

    width: 300px !important;
    height: 300px !important;

    padding: 0 !important;
    box-sizing: border-box !important;

    background: url(../images/online-img.png) center center no-repeat !important;
    background-size: contain !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;

    color: #ffffff !important;
    text-align: center !important;
    line-height: 1 !important;
    font-size: 11px !important;
    text-transform: uppercase !important;

    text-shadow:
        0 2px 4px rgba(5, 10, 35, 0.95),
        0 0 8px rgba(115, 210, 255, 0.65) !important;

    z-index: 6 !important;
}

.sonline span {
    display: block !important;
    margin-top: 5px !important;

    font-size: 28px !important;
    line-height: 1 !important;
    text-align: center !important;

    color: #ffffff !important;
    text-shadow:
        0 2px 5px rgba(5, 10, 35, 1),
        0 0 10px rgba(120, 220, 255, 0.85) !important;
}

/* =====================================
   GLOBAL SITE SCALE — 70% TRANSFORM, NO LAYOUT STRETCH
   Fixed background stays unscaled.
   We scale only the visual site layers without changing their internal width.
   This avoids broken news/cards layout.
   ===================================== */

:root {
    --site-scale: 0.90;
}

.header-top,
.main {
    position: relative !important;

    left: auto !important;
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;

    zoom: 1 !important;
    transform: scale(var(--site-scale)) !important;
    transform-origin: top center !important;
}

.header-top {
    z-index: 50 !important;
    margin-bottom: -32px !important;
}

.main {
    z-index: 20 !important;
    margin-bottom: -20% !important;
}

/* =====================================
   HERO MAIN ELEMENTS — 90% SIZE TUNE
   Reduce only the 3 hero images: main logo, online emblem, time emblem.
   The whole site scale stays unchanged.
   ===================================== */

/* Main central logo */
.logo {
    top: 195px !important;
}

.logo img {
    width: 710px !important;
    max-width: none !important;
}

/* Online emblem */
.sonline {
    left: -35px !important;
    top: 265px !important;

    width: 270px !important;
    height: 270px !important;

    background-size: contain !important;
    font-size: 10px !important;
}

.sonline span {
    font-size: 25px !important;
    margin-top: 4px !important;
}

/* Time server emblem */
.time-server {
    left: calc(50% + 406px) !important;
    top: 288px !important;

    width: 198px !important;
    height: 225px !important;

    background-size: 171px auto !important;
    padding-top: 176px !important;
}

.time-server span {
    font-size: 13px !important;
    margin-bottom: 4px !important;
}

.time-node {
    font-size: 17px !important;
}

/* =====================================
   NEWS CARDS — MU ELARION DARK STYLE v1
   Keep layout, replace old parchment feeling
   ===================================== */

.newsBlock {
    background:
        linear-gradient(
            to bottom,
            rgba(28, 42, 96, 0.58) 0%,
            rgba(24, 35, 86, 0.72) 48%,
            rgba(14, 22, 58, 0.82) 100%
        ) !important;

    border: 1px solid rgba(155, 220, 255, 0.34) !important;

    box-shadow:
        0 12px 28px rgba(2, 6, 25, 0.45),
        0 0 22px rgba(105, 190, 255, 0.20),
        inset 0 0 22px rgba(130, 190, 255, 0.13) !important;

    overflow: visible !important;
}

/* Image area */
.newsBlock-img {
    position: relative !important;
    overflow: hidden !important;
}

.newsBlock-img img {
    display: block !important;
    width: 100% !important;
    object-fit: cover !important;

    filter:
        saturate(0.95)
        contrast(1.05)
        brightness(0.92) !important;
}

/* Fade from image into dark card body */
.newsBlock-img a:after {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    bottom: 0 !important;

    width: 100% !important;
    height: 48% !important;

    background:
        linear-gradient(
            to top,
            rgba(14, 22, 62, 0.96) 0%,
            rgba(14, 22, 62, 0.68) 42%,
            rgba(14, 22, 62, 0) 100%
        ) !important;
}

/* Text zone */
.newsBlock-bottom {
    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(105, 190, 255, 0.10) 0%,
            rgba(105, 190, 255, 0) 55%
        ) !important;

    color: #dce9ff !important;
}

/* Title */
.newsBlock-title a {
    color: #f0f5ff !important;

    text-shadow:
        0 2px 4px rgba(3, 7, 25, 0.95),
        0 0 8px rgba(120, 210, 255, 0.35) !important;
}

.newsBlock-title a:hover {
    color: #ffffff !important;

    text-shadow:
        0 2px 4px rgba(3, 7, 25, 1),
        0 0 12px rgba(130, 220, 255, 0.65) !important;
}

/* Text */
.newsBlock-text {
    color: #c9d7f5 !important;

    text-shadow:
        0 1px 3px rgba(3, 7, 25, 0.8) !important;
}

/* Bottom info line */
.newsBlock-info {
    color: #dce9ff !important;
}

/* Date */
.newsBlock-date {
    color: #87d8ff !important;

    text-shadow:
        0 1px 3px rgba(3, 7, 25, 0.9),
        0 0 8px rgba(100, 200, 255, 0.35) !important;
}

.newsBlock-date span {
    color: #f0f5ff !important;

    text-shadow:
        0 1px 4px rgba(3, 7, 25, 1),
        0 0 9px rgba(130, 210, 255, 0.45) !important;
}

/* Old golden corners: hide for now */
.newsBlock .corner {
    filter:
        hue-rotate(170deg)
        saturate(1.25)
        brightness(1.05)
        drop-shadow(0 0 5px rgba(115, 210, 255, 0.35)) !important;
}

/* Button: keep asset, recolor closer to current site */
.newsBlock .button-small {
    filter:
        hue-rotate(175deg)
        saturate(0.75)
        brightness(0.88)
        drop-shadow(0 5px 8px rgba(3, 7, 25, 0.55)) !important;
}

.newsBlock .button-small:hover {
    filter:
        hue-rotate(175deg)
        saturate(0.9)
        brightness(1.05)
        drop-shadow(0 0 12px rgba(120, 210, 255, 0.45)) !important;
}

/* =====================================
   MIDDLE BLOCKS — MU ELARION DARK STYLE v1
   Top Players / Top Guilds / Events
   ===================================== */

.middleBlock-top .block {
    background:
        linear-gradient(
            to bottom,
            rgba(28, 42, 96, 0.54) 0%,
            rgba(22, 32, 78, 0.72) 46%,
            rgba(12, 20, 55, 0.84) 100%
        ) !important;

    border: 1px solid rgba(155, 220, 255, 0.32) !important;

    box-shadow:
        0 12px 28px rgba(2, 6, 25, 0.45),
        0 0 22px rgba(105, 190, 255, 0.18),
        inset 0 0 22px rgba(130, 190, 255, 0.12) !important;

    color: #dce9ff !important;
    overflow: visible !important;
}

/* Old golden corners recolored to cold magic */
.middleBlock-top .corner {
    filter:
        hue-rotate(170deg)
        saturate(1.25)
        brightness(1.08)
        drop-shadow(0 0 5px rgba(115, 210, 255, 0.34)) !important;
}

/* Table rows */
.middleBlock-top .topTable-tr {
    background: rgba(10, 18, 55, 0.34) !important;
    color: #dce9ff !important;

    border-bottom: 1px solid rgba(150, 215, 255, 0.12) !important;

    text-shadow:
        0 1px 3px rgba(3, 7, 25, 0.9) !important;
}

/* Header row inside table */
.middleBlock-top .topTable-tr-top {
    background: rgba(12, 22, 62, 0.18) !important;
    color: #eef5ff !important;

    text-shadow:
        0 2px 4px rgba(3, 7, 25, 0.95),
        0 0 8px rgba(120, 210, 255, 0.32) !important;
}

/* Player rank number */
.middleBlock-top .top-number span {
    background: rgba(24, 44, 105, 0.85) !important;
    color: #ffffff !important;

    border: 1px solid rgba(150, 220, 255, 0.35) !important;

    box-shadow:
        inset 0 0 8px rgba(120, 210, 255, 0.18),
        0 0 8px rgba(90, 180, 255, 0.22) !important;
}

/* Player / guild names */
.middleBlock-top .top-nick {
    color: #eef5ff !important;
}

/* Scores / values */
.middleBlock-top .top-score,
.middleBlock-top .top-img,
.middleBlock-top .topTable-tr span {
    color: #d4def8 !important;
}

/* No players found / system messages */
.middleBlock-top .alert,
.middleBlock-top .alert-info,
.middleBlock-top .block > div[style*="background"] {
    background: rgba(12, 24, 66, 0.48) !important;
    color: #dce9ff !important;

    border: 1px solid rgba(145, 210, 255, 0.18) !important;

    text-shadow:
        0 1px 3px rgba(3, 7, 25, 0.9) !important;
}

/* Event row */
.middleBlock-top .block table,
.middleBlock-top .block table td {
    background: transparent !important;
    color: #dce9ff !important;
    border-color: rgba(145, 210, 255, 0.16) !important;
}

/* Bottom buttons inside these blocks */
.middleBlock-top .button-small,
.middleBlock-top .button {
    filter:
        hue-rotate(175deg)
        saturate(0.75)
        brightness(0.90)
        drop-shadow(0 5px 8px rgba(3, 7, 25, 0.55)) !important;
}

.middleBlock-top .button-small:hover,
.middleBlock-top .button:hover {
    filter:
        hue-rotate(175deg)
        saturate(0.9)
        brightness(1.08)
        drop-shadow(0 0 12px rgba(120, 210, 255, 0.45)) !important;
}

/* =====================================
   GLOBAL CORNERS — MU ELARION COLD STYLE
   ===================================== */

.corner {
    filter:
        hue-rotate(170deg)
        saturate(1.25)
        brightness(1.08)
        drop-shadow(0 0 5px rgba(115, 210, 255, 0.34)) !important;
}