//*
//Author by Axnov(Yakhnov Anatoliy), All rights reserved.
*//
html {
    min-height: 100%;
    min-height: 100dvh;
    background: #202325;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}
body {
    margin: 0 auto;
    min-width: 240px;
    max-width: 600px;
    min-height: 100vh;
    min-height: 100dvh;
    font-size: 14px;
    font-family: arial, verdana, tahoma, sans-serif;
    font-style: normal;
    color: #ffffff;
    text-shadow: 1px 1px 2px #000000;
    overflow-y: auto;
    background: #202325;
    background-image: none;
}

@media (min-width: 600px) {
    body {
        background: url(/public/img/back/bg.webp) no-repeat fixed 50% #202325;
        background-size: 1920px 1080px;
    }
}
/* Экран не больше 1366×768 — подставляем размер фона под эту сетку */
@media (min-width: 600px) and (max-width: 1366px) and (max-height: 768px) {
    body {
        background-size: 1366px 768px;
        background: url(/public/img/back/bgmini.webp) no-repeat fixed 50% #202325;
    }
}
.centerScreen{
    z-index: 9999;
    position: fixed;
    background-color: rgba(0, 0, 0, .6);
    height: 100vh;
    height: 100dvh;
    left: 0;
    top: 0;
    width: 100%;
    display: flex;
    overflow-y: auto;
}
.messageMenu{
    display: flex;
    margin: auto;
    
}
.messagePositionExit{
    position: absolute;
    top: -15px;
    right: -15px;
}
.messageBack{
    color: #d3d3d3;
    border: solid 1px #65738b;
    border-radius: 10px;
    background: linear-gradient(to right, #40545f, #517489, #40545f);
}
.fontSegoe{
    font-family: Segoe UI, Roboto, Helvetica, Arial, sans-serif;
}
.logoLogin{
    background: url(/public/boby/cloud.png) 0 -205px / 200% repeat-x, url(/public/img/main/logo.png) 0 0 / 100% no-repeat, url(/public/boby/1.png) 0 0 / 100% repeat;
}
.start{
    background: url(/public/img/main/aute.png) 0 59% / 100% no-repeat;
    padding: 31px;
    font-size: 32px;
    filter: drop-shadow(0 2px 0 #000) drop-shadow(0 3px 1px rgba(0, 0, 0, .25));
}
.castleMap {
    height: calc(100vh - 161px);
    height: calc(100svh - 161px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    box-sizing: border-box;
    position: relative;
    background-repeat: repeat-y;
    overflow: auto;
    touch-action: pan-x pan-y;
    width: 100%;
}
/* Красивый кастомный скроллбар в стиле факелов / золота */
.castleMap::-webkit-scrollbar {
    width: 10px;
    height: 0;   /* убираем горизонтальный скроллбар */
}

.castleMap::-webkit-scrollbar-track {
    background: rgba(40, 28, 18, 0.85);
    border-left: 1px solid rgba(120, 70, 30, 0.4);
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.7);
}

.castleMap::-webkit-scrollbar-thumb {
    background: linear-gradient(
        to bottom,
        #ffcc77,
        #ffaa44,
        #e68a2e
    );
    border-radius: 8px;
    border: 2px solid rgba(40, 28, 18, 0.95);
    
    /* Свечение как от факела */
    box-shadow: 
        0 0 10px rgba(255, 180, 70, 0.8),
        inset 0 2px 4px rgba(255, 255, 255, 0.4);
}

.castleMap::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(to bottom, #ffe299, #ffbb66, #f99d44);
    box-shadow: 
        0 0 18px rgba(255, 205, 90, 0.95),
        inset 0 3px 6px rgba(255, 255, 255, 0.5);
}

/* Убираем белый квадратик в углу */
.castleMap::-webkit-scrollbar-corner {
    background: transparent;
}

/* Для Firefox */
.castleMap {
    scrollbar-width: thin;
    scrollbar-color: #ffaa44 rgba(40, 28, 18, 0.85);
}
.castleMapBack {
    background-image: url(/public/img/castle/castle.webp?v=1);
    width: 600px;
    height: 1076px;
    background-size: contain;
    position: relative;
    overflow: hidden;
    --cfw: 600px; /* CSS-переменная = текущая ширина замка, обновляется JS при зуме */
}
.castlePosition0img{
    background-image: url(/public/img/build/0.webp);
}
.castlePosition1img{
    background-image: url(/public/img/build/1.webp);
}
.castlePosition2img{
    background-image: url(/public/img/build/2.webp);
}

.castlePosition3img{
    background-image: url(/public/img/build/3.webp);
}
.castlePosition4img{
    background-image: url(/public/img/build/4.webp);
}
.castlePosition5img{
    background-image: url(/public/img/build/5.webp);
}
.castlePosition6img{
    background-image: url(/public/img/build/6.webp);
}
.castlePosition7img{
    background-image: url(/public/img/build/7.webp);
}
.castlePosition8img{
    background-image: url(/public/img/build/8.webp);
}
.castlePosition9img{
    background-image: url(/public/img/build/9.webp);
}
.castlePosition10img{
    background-image: url(/public/img/build/10.webp);
}
.castlePosition11img{
    background-image: url(/public/img/build/11.webp);
}
.castlePosition12img{
    background-image: url(/public/img/build/12.webp);
}
.castlePosition13img{
    background-image: url(/public/img/build/13.webp);
}
.castlePosition14img{
    background-image: url(/public/img/build/14.webp);
}
.castlePosition15img{
    background-image: url(/public/img/build/15.webp);
}
.castlePosition16img{
    background-image: url(/public/img/build/16.webp);
}
.castlePosition17img{
    background-image: url(/public/img/build/17.webp);
}
.castlePosition18img{
    background-image: url(/public/img/build/18.webp);
}
.castlePosition19img{
    background-image: url(/public/img/build/19.webp);
}
.castlePosition20img{
    background-image: url(/public/img/build/20.webp);
}
.castlePosition21img{
    background-image: url(/public/img/build/21.webp);
}
.castlePosition22img{
    background-image: url(/public/img/build/22.webp);
}
.castlePosition23img{
    background-image: url(/public/img/build/23.webp);
}
.castlePosition24img{
    background-image: url(/public/img/build/24.webp);
}
.castlePosition25img{
    background-image: url(/public/img/build/25.webp);
}
.castlePosition26img{
    background-image: url(/public/img/build/26.webp);
}
.castlePositionDevImg{
    background-image: url(/public/img/build/dev.webp);
}
.castlePosition0{
    left: 24%;
    top: 34%;
}
.castlePosition1{
    left: 65%;
    top: 32%;
}
.castlePosition2{
    left: 15%;
    top: 38%;
}
.castlePosition3{
    left: 35%;
    top: 32%;
}
.castlePosition4{
    left: 53%;
    top: 31%;
}
.castlePosition5{
    left: 53%;
    top: 37%;
}
.castlePosition6{
    left: 75%;
    top: 36%;
}
.castlePosition7{
    left: 26%;
    top: 42%;
}
.castlePosition8{
    left: 35%;
    top: 38%;
}
.castlePosition9{
    left: 64%;
    top: 43%;
}
.castlePosition10{
    left: 74%;
    top: 56%;
}
.castlePosition11{
    left: 17%;
    top: 51%;
}
.castlePosition12{
    left: 54%;
    top: 49%;
}
.castlePosition13{
    left: 59%;
    top: 57%;
}
.castlePosition14{
    left: 33%;
    top: 57%;
}
.castlePosition15{
    left: 13%;
    top: 44%;
}
.castlePosition16{
    left: 77%;
    top: 49%;
}
.castlePosition17{
    left: 34%;
    top: 47%;
}
.castlePosition18{
    left: 53%;
    top: 43%;
}
.castlePosition19 {
    left: 33%;
    top: 65%;
}
.castlePosition20{
    left: 20%;
    top: 64%;
}
.castlePosition21{
    left: 23%;
    top: 71%;
}
.castlePosition22{
    left: 56%;
    top: 65%;
}
.castlePosition23{
    left: 65%;
    top: 71%;
}
.castlePosition24{
    left: 72%;
    top: 63%;
}
.castlePosition25{
    left: 18%;
    top: 57%;
}
.castlePosition26{
    left: 78%;
    top: 42%;
}
.castlePositionInner{
    padding-bottom: 100%;
    width: 100%;
}
.castlePositionUrl{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 10;
}
.pisitionLevel {
    position: absolute;
    top: 3%;
    left: 3%;
    min-width: calc(var(--cfw) * 0.022);
    height: calc(var(--cfw) * 0.022);
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(8, 4, 0, 0.82);
    border: 1px solid rgba(200, 148, 28, 0.35);
    border-radius: 50%;
    color: #f0dfa0;
    font-weight: 700;
    font-size: calc(var(--cfw) * 0.013);
    font-family: Segoe UI, Roboto, Arial, sans-serif;
    line-height: 1;
    text-shadow: 0 1px 3px rgba(0,0,0,1);
    box-shadow: 0 1px 4px rgba(0,0,0,0.6);
    z-index: 11;
    pointer-events: none;
}
.positionName {
    user-select: none;
    position: absolute;
    z-index: 5;
    left: 50%;
    transform: translateX(-50%);
    top: 80%;
    margin-top: 2px;
    text-align: center;
    padding: 1px 4px 2px;
    background: rgba(8, 4, 0, 0.76);
    border: 1px solid rgba(200, 148, 28, 0.30);
    color: #f0dfa0;
    text-shadow: 0 1px 3px rgba(0,0,0,1);
    letter-spacing: 0.01em;
    white-space: nowrap;
    pointer-events: none;
}
/* Иконка времени внутри названия здания — масштабируется с текстом */
.positionName img {
    height: 1.4em;
    width: auto;
    vertical-align: middle;
    margin-right: 2px;
}
.castleButtom{
    position: absolute;
    display: inline-block;
    width: 100%;
    height: 11%;
    margin: 0px !important;
    background-size: 100% auto;
    background-position: 0% 50%;
    bottom: 0%;
}
.castleMenu {
    position: absolute;
    display: inline-block;
    width: 100%;
    height: 100%;
    margin: 0px !important;
    background-size: 100% auto;
    background-position: 0% 50%;
    top: 0%;
    z-index: 9999;
    background: #0000008a;
}
.castleMenuPanel {
    position: absolute;
    display: inline-block;
    width: 100%;
    height: 100%;
    margin: 0px !important;
    background-size: 100% auto;
    background-position: 0% 50%;
    top: 0%;
    z-index: 9999;
    background: url(/public/img/castle/panel.png?v=1) 0 50% / 100% no-repeat;
}
.castleMenuPanelColor{
    color: #000000;
    font-size: 16px;
    text-shadow: 1px 1px 2px #ffffff;
    font-weight: 700;
}
.castleMenuPanelUrls {
    position: absolute;
    display: inline-block;
    width: 90%;
    height: 50%;
    margin: 0px !important;
    background-size: 100% auto;
    background-position: 0% 50%;
    top: 23%;
    left: 7%;
    z-index: 9999;
    overflow: auto;
    scrollbar-color: #452113 black;
}
.castleMenuPanelExit {
    position: absolute;
    display: inline-block;
    width: 12%;
    height: 12%;
    margin: 0px !important;
    background-size: 100% auto;
    background-position: 0% 50%;
    top: 16%;
    right: 15%;
    z-index: 9999;
    background: url(/public/img/castle/exit.png?v=1) 0 50% / 100% no-repeat;
}
/* Панель ресурсов — под панелью сообщений */
.castleTopBar {
    position: relative;
    top: 0%;
    left: 0;
    right: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    background: linear-gradient(180deg, #080e18 0%, #0b1928 100%);
    border-bottom: 1px solid rgba(52, 152, 219, 0.15);
}


/* Быстрые кнопки на карте замка */
.castleQuickList {
    position: absolute;
    top: 1%;
    left: 1%;
    display: flex;
    flex-direction: column;
    gap: 6px;
    z-index: 12;
    pointer-events: auto;
}
.castleQuickListRight {
    left: auto;
    right: 1%;
}
.castleQuickItem {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 4px 6px;
    min-width: clamp(48px, 12vw, 64px);
    box-sizing: border-box;
    background: none;
    border: none;
    box-shadow: none;
    text-decoration: none;
    color: #fff;
    -webkit-tap-highlight-color: transparent;
    transition: filter 0.15s ease;
}
.castleQuickItem-icon {
    display: block;
    width: clamp(38px, 10vw, 54px);
    height: clamp(38px, 10vw, 54px);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    filter:
        drop-shadow(0 0 4px rgba(0, 0, 0, 0.9))
        drop-shadow(0 2px 6px rgba(0, 0, 0, 0.8));
}
.castleQuickItem-text {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    font-size: clamp(9px, 2.3vw, 12px);
    font-weight: 800;
    font-family: Segoe UI, Roboto, Arial, sans-serif;
    color: #fff;
    text-align: center;
    text-shadow:
        0 0 3px #000,
        0 1px 0 #000,
        -1px 0 0 #000,
        1px 0 0 #000,
        0 -1px 0 #000,
        0 2px 6px rgba(0, 0, 0, 0.9);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    line-height: 1.2;
}
.castleQuickItem-sub {
    font-size: clamp(8px, 1.9vw, 10px);
    font-weight: 600;
    color: rgba(220, 235, 255, 0.95);
    text-shadow:
        0 0 3px #000,
        0 1px 0 #000,
        0 2px 4px rgba(0, 0, 0, 0.9);
    white-space: nowrap;
    text-transform: none;
    letter-spacing: 0;
}
/* Иконка-лупа (SVG вместо background-image) */
.castleQuickItem-icon--zoom {
    background: none !important;
    display: flex;
    align-items: center;
    justify-content: center;
}
.castleQuickItem-icon--zoom svg {
    width: 65%;
    height: 65%;
    color: #fff;
    filter:
        drop-shadow(0 0 3px rgba(0,0,0,0.9))
        drop-shadow(0 2px 5px rgba(0,0,0,0.8));
}

/* ── Модальное окно масштаба карты ───────────────────────────────────────── */
.castleZoomModal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.72);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
}
.castleZoomPanel {
    background: linear-gradient(180deg, #1a2a3a 0%, #0d1e30 100%);
    border: 1px solid rgba(52, 152, 219, 0.4);
    border-radius: 14px;
    padding: 24px 20px 20px;
    width: min(300px, 88vw);
    box-sizing: border-box;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.7);
    display: flex;
    flex-direction: column;
    gap: 14px;
    align-items: center;
}
.castleZoomTitle {
    font-size: 17px;
    font-weight: 700;
    color: #c8e0f0;
    font-family: Segoe UI, Roboto, Arial, sans-serif;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
}
.castleZoomValue {
    font-size: 42px;
    font-weight: 800;
    color: #ffe8a0;
    font-family: Segoe UI, Roboto, Arial, sans-serif;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8);
    line-height: 1;
}
.castleZoomSlider {
    width: 100%;
    -webkit-appearance: none;
    appearance: none;
    height: 6px;
    border-radius: 3px;
    background: rgba(52, 152, 219, 0.25);
    outline: none;
    cursor: pointer;
}
.castleZoomSlider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: linear-gradient(135deg, #ffe8a0 0%, #c88000 100%);
    border: 2px solid rgba(255, 215, 50, 0.85);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.55);
    cursor: pointer;
}
.castleZoomSlider::-moz-range-thumb {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: linear-gradient(135deg, #ffe8a0 0%, #c88000 100%);
    border: 2px solid rgba(255, 215, 50, 0.85);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.55);
    cursor: pointer;
}
.castleZoomHints {
    display: flex;
    justify-content: space-between;
    width: 100%;
    font-size: 11px;
    color: #5a7a90;
    font-family: Segoe UI, Roboto, Arial, sans-serif;
    margin-top: -8px;
}
.castleZoomActions {
    display: flex;
    gap: 10px;
    width: 100%;
}
.castleZoomBtn {
    flex: 1;
    padding: 11px 6px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 700;
    font-family: Segoe UI, Roboto, Arial, sans-serif;
    cursor: pointer;
    transition: filter 0.12s;
    border: none;
}
.castleZoomBtn--reset {
    background: rgba(255, 255, 255, 0.07);
    color: #90aabb;
    border: 1px solid rgba(255, 255, 255, 0.1);
}
.castleZoomBtn--save {
    background: linear-gradient(180deg, #2a7abf 0%, #1a5a9a 100%);
    color: #fff;
    border: 1px solid rgba(52, 152, 219, 0.5);
}
.castleZoomBtn:active {
    filter: brightness(0.85);
}

@media (hover: hover) {
    .castleQuickItem:hover {
        filter: brightness(1.15) drop-shadow(0 0 6px rgba(255,210,80,0.4));
    }
}
@media (pointer: coarse) {
    .castleQuickItem:active {
        filter: brightness(0.9);
    }
}
.castleQuickItem--edu {
    appearance: none;
    -webkit-appearance: none;
    background: none;
    border: none;
    cursor: pointer;
    font: inherit;
}

.castleTopPanel {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 6%;
    height: 100%;
    text-decoration: none;
    color: #aed6f1;
    background: transparent;
    position: relative;
    z-index: 1;
    border-radius: 6px;
    transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
}
.castleTopPanel:active {
    background: rgba(82, 201, 255, 0.12);
    box-shadow: inset 0 0 14px rgba(82, 201, 255, 0.18);
    transform: scale(0.96);
}
.castleTopPanel-icon {
    display: inline-block;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: 100% auto;
    transition: filter 0.2s ease;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.4));
}
.castleTopPanel.has-new .castleTopPanel-icon {
    filter: drop-shadow(0 0 8px rgba(82, 201, 255, 0.55)) drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3));
}
.castleTopPanel-mail .castleTopPanel-icon {
    background-image: url(/public/img/topPanel/mail.png);
}
.castleTopPanel-mail.has-new .castleTopPanel-icon {
    background-image: url(/public/img/topPanel/in.png);
}
.castleTopPanel-report .castleTopPanel-icon {
    background-image: url(/public/img/topPanel/report.png);
}
/* Панель сообщений (почта, отчёты, атаки, подкрепления) — сверху, на всю ширину */
.castleBottomBar {
    position: relative;
    left: 0;
    right: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap;
    height: 58px;          /* фиксированная высота панели */
    padding: 0 4px;
    box-sizing: border-box;
    gap: 4px;
    background: linear-gradient(180deg, #0d1e30 0%, #0b1928 100%);
    overflow: hidden;
    border-bottom: 1px solid rgba(52, 152, 219, 0.2);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}
.castleBottomBar::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
}
.castleBottomBar-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0;
    text-decoration: none;
    border-radius: 8px;
    position: relative;
    background: transparent;
    height: clamp(30px, 12vw, 46px);
    aspect-ratio: 1 / 1;   /* всегда квадратные */
    flex-shrink: 0;
    border: 1px solid rgba(120, 180, 255, 0.16);
}



.castleBottomBar-item:hover {
    border-color: rgba(120, 180, 255, 0.32);
}
.castleBottomBar-item:active {
    border-color: rgba(120, 180, 255, 0.45);
}
.castleBottomBar-item.has-new .castleBottomBar-icon {
    filter: drop-shadow(0 0 4px rgba(140, 200, 255, 0.6)) drop-shadow(0 1px 1px rgba(0, 0, 0, 0.35));
}
.castleBottomBar-icon {
    position: relative;
    z-index: 1;
    display: inline-block;
    width: 64%;
    height: 0;
    padding-bottom: 68%;
    margin: 0;
    background-position: 50% 50%;
    background-size: contain;
    background-repeat: no-repeat;
    filter: drop-shadow(0 2px 0 rgba(0, 0, 0, 0.35)) drop-shadow(0 2px 2px rgba(0, 0, 0, 0.22));
}
.castleBottomBar-icon-mail { background-image: url(/public/img/topPanel/mail.png); }
.castleBottomBar-item.has-new .castleBottomBar-icon-mail { background-image: url(/public/img/topPanel/in.png); }
.castleBottomBar-icon-report { background-image: url(/public/img/topPanel/mail.png); }
.castleBottomBar-item.has-new .castleBottomBar-icon-report { background-image: url(/public/img/topPanel/report.png); }
.castleBottomBar-icon-attackme { background-image: url(/public/img/army/attackMe.png); }
.castleBottomBar-icon-attackmy { background-image: url(/public/img/army/attackMy.png); }
.castleBottomBar-icon-reinforce { background-image: url(/public/img/army/yourReinforcements.png); }
.castleBottomBar-icon-foreign { background-image: url(/public/img/army/foreignReinforcements.png); }
.castleBottomBar-num {
    position: absolute;
    top: -10%;
    left: 65%;
    right: auto;
    padding: 4%;
    min-width: 1.2em;
    height: 1.2em;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: max(10px, 2.5vw);
    font-weight: 800;
    color: #d4e6f1;
    background: linear-gradient(180deg, rgba(82, 201, 255, 0.18) 0%, rgba(25, 40, 55, 0.78) 45%, rgba(12, 22, 34, 0.92) 100%);
    border: 1px solid rgba(52, 152, 219, 0.40);
    border-radius: 99px;
    text-shadow: none;
    box-shadow:
        0 3px 12px rgba(0, 0, 0, 0.24),
        inset 0 1px 0 rgba(255, 255, 255, 0.14),
        0 0 18px rgba(82, 201, 255, 0.10);
    z-index: 3;
}

@media (min-width: 600px) {
    .castleBottomBar-num {
        font-size: 14px;
        
    }
}
.castleResRow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex: 1;
    width: 100%;
    min-width: 0;
    height: 40px;
    box-sizing: border-box;
    background: linear-gradient(180deg, #080e18 0%, #0b1928 100%);
    overflow: hidden;
}
.castleResItem {
    position: relative;
    display: flex;
    align-items: center;
    flex: 1;
    min-width: 0;
    height: 100%;
    padding: 0 2px 0 clamp(18px, 5vw, 30px); /* только горизонтальный padding меняется */
    background: transparent;
    border: none;
    border-radius: 0;
    flex-shrink: 1;
    box-shadow: none;
    box-sizing: border-box;
}
.castleResItem + .castleResItem {
    border-left: 1px solid rgba(52, 152, 219, 0.18);
}
.castleResItem + .castleResItem::before {
    content: '';
    position: absolute;
    left: 0;
    top: 18%;
    bottom: 18%;
    width: 1px;
    background: linear-gradient(180deg, transparent 0%, rgba(255, 255, 255, 0.08) 50%, transparent 100%);
    pointer-events: none;
}
.castleResItem-icon {
    position: absolute;
    left: 4%;
    top: 50%;
    transform: translateY(-50%);
    display: inline-block;
    width: clamp(14px, 4vw, 22px);
    height: clamp(14px, 4vw, 22px);
    margin: 0;
    background-position: 50% 50%;
    background-size: 100% auto;
    background-repeat: no-repeat;
    filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.28));
}
.castleResItem-les { background: url(/public/img/res/les.png) 50% 50% / 100% auto no-repeat; }
.castleResItem-kam { background: url(/public/img/res/kam.png) 50% 50% / 100% auto no-repeat; }
.castleResItem-zel { background: url(/public/img/res/zel.png) 50% 50% / 100% auto no-repeat; }
.castleResItem-eda { background: url(/public/img/res/eda.png) 50% 50% / 100% auto no-repeat; }
.castleResItem-lud { background: url(/public/img/res/lud.png) 50% 50% / 100% auto no-repeat; }
.castleResItem-value {
    font-size: clamp(10px, 3.2vw, 16px);
    font-weight: 700;
    color: #f7d36a;
    text-shadow:
        0 1px 0 rgba(0, 0, 0, 0.65),
        0 2px 4px rgba(0, 0, 0, 0.35);
    white-space: nowrap;
    letter-spacing: 0.2px;
}

/* Нижняя панель (замок) — в одной гамме с castleBottomBar / castleResRow, не чистый чёрный */
.accountMainNav {
    position: relative;
    z-index: 5;
    width: 100%;
    margin: 0;
    padding: 0 0 env(safe-area-inset-bottom, 0);
    box-sizing: border-box;
    background: linear-gradient(180deg, #0d1e30 0%, #080e18 100%);
    border-top: 1px solid rgba(52, 152, 219, 0.25);
    box-shadow:
        inset 0 1px 0 rgba(52, 152, 219, 0.1),
        0 -4px 16px rgba(0, 0, 0, 0.5);
}
.accountMainNav-inner {
    max-width: 600px;
    margin: 0 auto;
    width: 100%;
    box-sizing: border-box;
}
.accountMainNav-row {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
    width: 100%;
    min-width: 0;
    height: 60px;          /* фиксированная высота — не меняется */
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    background: linear-gradient(180deg, #0d1e30 0%, #080e18 100%);
    overflow: hidden;
}
.accountMainNav-item {
    -webkit-box-flex: 1;
    -ms-flex: 1 1 0;
    flex: 1 1 0;
    min-width: 0;
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    gap: 4px;
    padding: 8px 2px 9px;
    margin: 0;
    text-decoration: none;
    color: #a8c0d8;
    background: transparent;
    border: none;
    border-right: 1px solid rgba(52, 152, 219, 0.12);
    -webkit-tap-highlight-color: transparent;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-transition: background 0.12s ease, -webkit-box-shadow 0.12s ease;
    transition: background 0.12s ease, -webkit-box-shadow 0.12s ease;
    transition: background 0.12s ease, box-shadow 0.12s ease;
}
.accountMainNav-item:last-child {
    border-right: none;
}
/* тонкий «блик» в стык ячеек, как у castleResItem */
.accountMainNav-item + .accountMainNav-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 14%;
    bottom: 14%;
    width: 1px;
    background: -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(40%, rgba(255, 255, 255, 0.1)), to(transparent));
    background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.1) 40%, transparent);
    pointer-events: none;
    z-index: 0;
    opacity: 0.5;
}
.accountMainNav-item--active111,
.accountMainNav-item111[aria-current="page"] {
    z-index: 1;
    background: -webkit-gradient(linear, left top, left bottom, from(rgba(50, 85, 120, 0.45)), to(rgba(28, 50, 78, 0.7)));
    background: linear-gradient(180deg, rgba(50, 85, 120, 0.45) 0%, rgba(28, 50, 78, 0.7) 100%);
    -webkit-box-shadow: inset 0 1px 0 rgba(255, 200, 120, 0.1), 0 0 0 1px rgba(82, 201, 255, 0.12);
    box-shadow: inset 0 1px 0 rgba(255, 200, 120, 0.1), 0 0 0 1px rgba(82, 201, 255, 0.12);
}
@media (hover: hover) {
    .accountMainNav-item:hover:not(.accountMainNav-item--active):not([aria-current="page"]) {
        background: rgba(52, 152, 219, 0.08);
    }
}
.accountMainNav-item:active {
    background: rgba(52, 152, 219, 0.14);
}
.accountMainNav-item-icon {
    display: block;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    position: relative;
    z-index: 1;
    width: 25px;
    height: 25px;
    margin: 0;
    background-position: 50% 50%;
    background-size: contain;
    background-repeat: no-repeat;
    -webkit-filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.4));
    filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.4));
    opacity: 0.95;
}
.accountMainNav-item--active,
.accountMainNav-item[aria-current="page"] {
    background: linear-gradient(180deg, rgba(52, 152, 219, 0.14) 0%, rgba(8, 14, 24, 0.0) 100%);
    box-shadow: inset 0 2px 0 rgba(246, 255, 177, 0.55);
}
.accountMainNav-item--active .accountMainNav-item-icon,
.accountMainNav-item[aria-current="page"] .accountMainNav-item-icon {
    opacity: 1;
    filter: drop-shadow(0 0 6px rgba(246, 255, 177, 0.35)) drop-shadow(0 1px 2px rgba(0, 0, 0, 0.45));
}
.accountMainNav-item-icon-home { background-image: url(/public/img/topPanel/home.png); }
.accountMainNav-item-icon-map { background-image: url(/public/img/topPanel/map.png); }
.accountMainNav-item-icon-profile { background-image: url(/public/img/topPanel/profile.png); }
.accountMainNav-item-icon-alliance { background-image: url(/public/img/topPanel/alliance.png); }
.accountMainNav-item-icon-gold { background-image: url(/public/img/topPanel/gold.png); }
.accountMainNav-item-label {
    position: relative;
    z-index: 1;
    font-size: clamp(10px, 2.5vw, 13px);
    font-weight: 600;
    line-height: 1.15;
    color: #d4e6f1;
    text-align: center;
    max-width: 100%;
    padding: 0 1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
    letter-spacing: 0.02em;
    font-family: arial, verdana, tahoma, sans-serif;
}
.accountMainNav-item--active .accountMainNav-item-label,
.accountMainNav-item[aria-current="page"] .accountMainNav-item-label {
    /* как цифры ресурсов */
    color: #f7d36a;
    text-shadow:
        0 1px 0 rgba(0, 0, 0, 0.65),
        0 2px 4px rgba(0, 0, 0, 0.35);
}

.accountMainNav-item:focus-visible {
    outline: 2px solid rgba(120, 180, 255, 0.55);
    outline-offset: -2px;
    z-index: 2;
}

/* Кнопка-кладка на странице замка */
.accountMainNav-item--btn {
    cursor: pointer;
    font-family: inherit;
    font-size: inherit;
    -webkit-appearance: none;
    appearance: none;
}

/* Иконка замка в нижнем таб-баре */
.accountMainNav-item-icon-castle { background-image: url(/public/img/icons/castle.png); }
/* Иконка почты в нижнем таб-баре */
.accountMainNav-item-icon-mail   { background-image: url(/public/img/topPanel/mail.png); }

/* Бейдж-число на элементе таб-бара */
.accountMainNav-item-num {
    position: absolute;
    top: 5px;
    right: 12%;
    min-width: 16px;
    height: 16px;
    padding: 0 3px;
    border-radius: 8px;
    background: #e74c3c;
    color: #fff;
    font-size: 9px;
    font-family: Arial, sans-serif;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
    box-shadow: 0 0 6px rgba(231,76,60,0.6);
    pointer-events: none;
}

/* ============================================
   ПЕРЕКЛЮЧАЕМЫЕ ПАНЕЛИ ЗАМКА (TAB PANELS)
   ============================================ */

.castle-tabpane {
    display: none;
    height: calc(100vh - 161px);
    height: calc(100svh - 161px);
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
}

.castle-tabpane.ctab-active {
    display: block;
}
#ctab-menu.ctab-active {
    display: flex;
}

/* Внутри панели «Замок» — castleMap занимает всё */
#ctab-castle {
    position: relative; /* якорь для FAB-кнопки */
}
#ctab-castle .castleMap {
    height: 100%;
}

/* ══════════════════════════════════════════════════════════════════════════
   ПОДЛОЖКИ КНОПОК ЗАМКА
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Подложка «Построить здание» — арочная платформа снизу по центру ─────── */
.castle-build-podlozhka {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 15;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    padding: clamp(18px, 4vw, 28px) clamp(30px, 8vw, 60px) clamp(12px, 2.5vw, 18px);

    /* Тёмный камень с лёгкой текстурой */
    background:
        radial-gradient(ellipse 80% 60% at 50% 0%, rgba(180, 130, 40, 0.12) 0%, transparent 70%),
        linear-gradient(180deg, rgba(55, 38, 12, 0.92) 0%, rgba(22, 14, 4, 0.98) 55%, rgba(8, 5, 1, 1) 100%);

    /* Арочная форма */
    border-radius: 50% 50% 0 0 / 45% 45% 0 0;

    /* Золотая окантовка */
    border-top: 2px solid #c8860a;
    border-left: 1px solid rgba(200, 134, 10, 0.4);
    border-right: 1px solid rgba(200, 134, 10, 0.4);

    /* Свечение и объём */
    box-shadow:
        0 -10px 35px rgba(200, 134, 10, 0.35),
        0 -3px 10px rgba(200, 134, 10, 0.18),
        inset 0 2px 14px rgba(255, 200, 70, 0.06);
}

/* Декоративный золотой штрих по верху арки */
.castle-build-podlozhka::before {
    content: '';
    position: absolute;
    top: -4px;
    left: 50%;
    transform: translateX(-50%);
    width: clamp(40px, 10vw, 70px);
    height: 6px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(200, 134, 10, 0.5) 15%,
        #ffe090 40%,
        #ffd060 50%,
        #ffe090 60%,
        rgba(200, 134, 10, 0.5) 85%,
        transparent 100%
    );
    border-radius: 3px;
    box-shadow: 0 0 12px rgba(200, 134, 10, 0.7);
}

/* Декоративные заклёпки по краям */
.castle-build-podlozhka::after {
    content: '';
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - 40px);
    height: 1px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(200, 134, 10, 0.2) 10%,
        rgba(200, 134, 10, 0.15) 90%,
        transparent 100%
    );
}

.castle-build-fab {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    text-decoration: none;
    background: none;
    border: none;
    padding: 0 4px;
    pointer-events: auto;
    transition: transform 0.15s, filter 0.15s;
    -webkit-tap-highlight-color: transparent;
}
.castle-build-fab img {
    height: clamp(44px, 11vw, 56px);
    width: 100%;
    max-width: 260px;
    object-fit: contain;
    display: block;
}
.castle-build-fab:hover {
    filter: brightness(1.12);
    transform: scale(1.04);
}
.castle-build-fab:active {
    filter: brightness(0.88);
    transform: scale(0.97);
}

/* ══════════════════════════════════════════════════════════════════════════
   НИЖНЯЯ ПАНЕЛЬ ЗАМКА — две кнопки: Меню (слева) и Ресурсы (справа)
   ══════════════════════════════════════════════════════════════════════════ */
.castle-bottom-bar {
    position: absolute;
    bottom: clamp(10px, 2.5vw, 16px);
    left: 0;
    right: 10px; /* учитываем ширину скроллбара */
    z-index: 15;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 clamp(10px, 2.5vw, 18px);
    pointer-events: none; /* клики сквозь пустое пространство */
}

.castle-bottom-btn {
    pointer-events: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: clamp(52px, 13vw, 64px);
    height: clamp(52px, 13vw, 64px);
    border-radius: 8px;
    cursor: pointer;
    text-decoration: none;
    appearance: none;
    -webkit-appearance: none;
    -webkit-tap-highlight-color: transparent;
    background: none;
    border: none;
    padding: 0;
    transition: transform 0.15s, filter 0.15s;
}

/* Картинки заполняют кнопку целиком */
.castle-bottom-btn img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 8px;
    display: block;
}

@media (hover: hover) {
    .castle-bottom-btn:hover {
        transform: scale(1.07);
        filter: brightness(1.15);
    }
}
.castle-bottom-btn:active {
    transform: scale(0.93);
    filter: brightness(0.85);
}

/* ---- Панель «Меню» ---- */
#ctab-menu {
    flex-direction: column;
    overflow: hidden;
    background: linear-gradient(180deg, #0b1928 0%, #091420 100%);
    position: relative;
    z-index: 20;
}

/* Шапка панели меню — sticky-строка с крестиком */
.ctab-menu-topbar {
    flex-shrink: 0;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    background: linear-gradient(180deg, #0b1928 0%, #0d1e30 100%);
    border-bottom: 1px solid rgba(52, 152, 219, 0.18);
    padding: 4px 6px;
    box-sizing: border-box;
}

/* Заголовок шапки */
.ctab-menu-topbar-title {
    flex: 1;
    font-family: Arial, sans-serif;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #f6ffb1;
    text-shadow: 0 0 12px rgba(246, 255, 177, 0.45);
    padding-left: 10px;
}

/* Крестик закрытия меню */
.ctab-menu-close {
    width: 34px;
    height: 34px;
    border: 1px solid rgba(52, 152, 219, 0.35);
    background: rgba(52, 73, 94, 0.45);
    color: #aed6f1;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0;
    padding: 0;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.ctab-menu-close:hover {
    background: rgba(231, 76, 60, 0.6);
    border-color: rgba(231, 76, 60, 0.5);
    color: #fff;
}

.ctab-menu-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;

    scrollbar-width: thin;
    scrollbar-color: rgba(52,152,219,0.4) rgba(0,0,0,0.2);
    padding: 10px 6px 20px;
}
.ctab-menu-body::-webkit-scrollbar { width: 4px; }
.ctab-menu-body::-webkit-scrollbar-track { background: rgba(0,0,0,0.2); }
.ctab-menu-body::-webkit-scrollbar-thumb { background: rgba(52,152,219,0.35); border-radius: 4px; }

/* Заголовок секции */
.ctab-section-title {
    font-family: Arial, sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: rgba(246, 255, 177, 0.5);
    padding: 14px 6px 7px;
    border-bottom: 1px solid rgba(52,152,219,0.15);
    margin-bottom: 4px;
}
.ctab-menu-body .ctab-section-title:first-child {
    padding-top: 4px;
}

/* Сетка иконок — 3 столбца */
.ctab-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: rgba(52,152,219,0.05);
    margin-bottom: 2px;
}

/* Карточка раздела */
.ctab-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 5px;
    padding: 12px 4px 10px;
    text-decoration: none;
    color: #aed6f1;
    font-family: Arial, sans-serif;
    font-size: 11px;
    text-align: center;
    background: rgba(255,255,255,0.012);
    border: 1px solid rgba(52,152,219,0.08);
    -webkit-tap-highlight-color: transparent;
    position: relative;
    overflow: hidden;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.ctab-item:hover,
.ctab-item:active {
    background: rgba(52,152,219,0.13);
    border-color: rgba(52,152,219,0.3);
    color: #fff;
}

.ctab-item__img {
    width: 34px;
    height: 34px;
    object-fit: contain;
    display: block;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.7));
    transition: transform 0.15s, filter 0.15s;
}

.ctab-item:hover .ctab-item__img,
.ctab-item:active .ctab-item__img {
    transform: translateY(-2px);
    filter: drop-shadow(0 0 7px rgba(82,201,255,0.55));
}

.ctab-item__name {
    line-height: 1.2;
    letter-spacing: 0.02em;
    word-break: break-word;
}

/* Обёртка для иконки с бейджем */
.ctab-item__bwrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Бейдж-кружок поверх иконки */
.ctab-item__badge {
    position: absolute;
    top: -4px;
    right: -6px;
    min-width: 16px;
    height: 16px;
    padding: 0 3px;
    border-radius: 8px;
    background: #e74c3c;
    color: #fff;
    font-size: 9px;
    font-family: Arial, sans-serif;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
    box-shadow: 0 0 6px rgba(231,76,60,0.7);
    pointer-events: none;
}

/* Кнопка выхода в меню-панели */
.ctab-exit {
    margin: 18px 0 8px;
    text-align: center;
}

.ctab-exit a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 24px;
    font-family: Arial, sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: rgba(255,180,170,0.7);
    text-decoration: none;
    letter-spacing: 0.5px;
    border: 1px solid rgba(231,76,60,0.2);
    background: rgba(231,76,60,0.06);
    transition: background 0.2s, border-color 0.2s, color 0.2s;
}

.ctab-exit a:hover {
    background: rgba(231,76,60,0.18);
    border-color: rgba(231,76,60,0.45);
    color: #ff9e93;
}

/* ══ Новая внутренняя страница подземелья ══ */
.dngm2-page{min-height:100dvh;background:#080f1a;display:flex;flex-direction:column;font-family:Arial,sans-serif;color:#c8dff0;}
.dngm2-body{flex:1;padding:10px 10px 10px;display:flex;flex-direction:column;gap:8px;}
.dngm2-energy-badge{display:inline-flex;align-items:center;gap:7px;padding:6px 14px;border-radius:22px;background:rgba(80,180,255,0.15);border:1px solid rgba(80,180,255,0.45);color:#a8dcff;font-size:14px;font-weight:700;white-space:nowrap;box-shadow:0 0 8px rgba(52,152,219,0.25);text-decoration:none;}
.dngm2-energy-badge--full{background:rgba(246,255,50,0.18);border-color:rgba(246,255,100,0.65);color:#f6ff80;box-shadow:0 0 14px rgba(246,255,50,0.35);}
.dngm2-energy-icon{width:15px;height:15px;flex-shrink:0;color:#60d0ff;filter:drop-shadow(0 0 5px rgba(80,200,255,0.7));}
.dngm2-energy-badge--full .dngm2-energy-icon{color:#f6ff80;filter:drop-shadow(0 0 5px rgba(246,255,80,0.8));}
.dngm2-level-row{display:flex;align-items:flex-start;gap:12px;padding:12px;border-radius:12px;background:rgba(52,152,219,0.08);border:1px solid rgba(52,152,219,0.3);box-shadow:0 0 18px rgba(52,152,219,0.08);}
.dngm2-level-wrap{position:relative;width:64px;height:80px;flex-shrink:0;margin-top:2px;}
.dngm2-level-wrap--max .dngm2-level-ring-svg{filter:drop-shadow(0 0 8px rgba(220,160,30,0.55));}
.dngm2-level-ring-svg{width:64px;height:64px;position:absolute;top:0;left:0;filter:drop-shadow(0 0 6px rgba(52,152,219,0.4));}
.dngm2-level-inner{position:absolute;top:0;left:0;width:64px;height:64px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;}
.dngm2-level-tag{font-size:9px;font-weight:700;letter-spacing:0.12em;color:rgba(174,214,241,0.45);text-transform:uppercase;line-height:1;margin-bottom:1px;}
.dngm2-level-tag--max{color:rgba(220,160,30,0.65);}
.dngm2-level-num{font-size:22px;font-weight:900;color:#e8f4fd;line-height:1;letter-spacing:-0.03em;}
.dngm2-level-num--max{color:#f5cc60;}
.dngm2-level-maxbadge{position:absolute;bottom:0;left:50%;transform:translateX(-50%);white-space:nowrap;font-size:8px;font-weight:800;letter-spacing:0.1em;padding:2px 6px;border-radius:4px;background:rgba(220,160,30,0.18);border:1px solid rgba(220,160,30,0.5);color:#f5cc60;text-shadow:0 0 8px rgba(220,160,30,0.6);}
.dngm2-level-meta{flex:1;display:flex;flex-direction:column;gap:7px;min-width:0;}
.dngm2-level-label{font-size:12px;font-weight:700;color:rgba(174,214,241,0.6);text-transform:uppercase;letter-spacing:0.06em;}
.dngm2-level-chips{display:flex;gap:6px;flex-wrap:wrap;}
.dngm2-players-chip{display:inline-flex;align-items:center;gap:4px;padding:3px 9px;border-radius:20px;background:rgba(52,152,219,0.1);border:1px solid rgba(52,152,219,0.2);color:rgba(174,214,241,0.65);font-size:11px;font-weight:600;text-decoration:none;transition:background 0.15s;-webkit-tap-highlight-color:transparent;}
.dngm2-players-chip svg{width:11px;height:11px;}
.dngm2-players-chip:hover{background:rgba(52,152,219,0.18);}
.dngm2-upgrade-chip{display:inline-flex;align-items:center;gap:4px;padding:3px 9px;border-radius:20px;background:rgba(39,174,96,0.1);border:1px solid rgba(39,174,96,0.22);color:rgba(130,224,170,0.7);font-size:11px;font-weight:600;text-decoration:none;transition:background 0.15s;-webkit-tap-highlight-color:transparent;}
.dngm2-upgrade-chip svg{width:11px;height:11px;}
.dngm2-upgrade-chip:hover{background:rgba(39,174,96,0.2);}
.dngm2-missions-link{position:relative;display:flex;align-items:center;gap:7px;padding:7px 9px;border-radius:8px;background:rgba(200,120,20,0.08);border:1px solid rgba(220,140,30,0.22);border-left:3px solid rgba(220,140,30,0.55);color:#e0a060;font-size:12px;font-weight:700;text-decoration:none;transition:background 0.15s,border-color 0.15s,color 0.15s;-webkit-tap-highlight-color:transparent;}
.dngm2-missions-link svg{width:13px;height:13px;flex-shrink:0;}
.dngm2-missions-link span{flex:1;}
.dngm2-missions-link-arr{color:rgba(224,160,96,0.4);transition:transform 0.15s,color 0.15s;}
.dngm2-missions-link:hover{background:rgba(200,120,20,0.16);border-color:rgba(240,160,40,0.45);color:#f0c080;}
.dngm2-missions-link:hover .dngm2-missions-link-arr{color:rgba(240,190,100,0.85);transform:translateX(3px);}
.dngm2-missions-link--ready{background:rgba(61,200,122,0.08);border-color:rgba(61,200,122,0.3);border-left-color:rgba(61,200,122,0.7);color:#3dc87a;}
.dngm2-missions-link--ready .dngm2-missions-link-arr{color:rgba(224,160,96,0.4);}
.dngm2-missions-link--ready:hover{background:rgba(61,200,122,0.14);border-color:rgba(61,200,122,0.5);color:#5ddd96;}
.dngm2-missions-link--ready:hover .dngm2-missions-link-arr{color:rgba(240,190,100,0.85);}
.dngm2-missions-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#3dc87a;box-shadow:0 0 6px rgba(61,200,122,0.8);animation:missions-dot-pulse 1.6s ease-in-out infinite;margin-left:5px;vertical-align:middle;pointer-events:none;}
@keyframes missions-dot-pulse{0%,100%{opacity:1;box-shadow:0 0 6px rgba(61,200,122,0.8);}50%{opacity:0.5;box-shadow:0 0 12px rgba(61,200,122,0.4);}}
.dngm2-section-title{font-size:11px;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:rgba(174,214,241,0.35);padding:4px 2px 0;}
.dngm2-locations{display:flex;flex-direction:column;gap:8px;}
.dngm2-loc{display:flex;align-items:center;gap:12px;background:rgba(255,255,255,0.035);border:1px solid rgba(52,152,219,0.13);border-radius:12px;overflow:hidden;text-decoration:none;color:#c8dff0;transition:background 0.18s,border-color 0.18s,transform 0.15s;-webkit-tap-highlight-color:transparent;padding-right:10px;}
.dngm2-loc:hover{transform:translateY(-1px);}
/* Позиция 1 — Ядовитая пещера (зелёный) */
.dngm2-loc--pos1{border-color:rgba(46,200,90,0.35);background:rgba(30,110,55,0.22);}
.dngm2-loc--pos1:hover{background:rgba(46,200,90,0.18);border-color:rgba(46,200,90,0.55);}
.dngm2-loc--pos1.dngm2-loc--done{border-color:rgba(46,200,90,0.5);background:rgba(30,110,55,0.28);}
.dngm2-loc--pos1.dngm2-loc--done .dngm2-loc-img img{filter:drop-shadow(0 0 10px rgba(46,200,90,0.7));}
/* Позиция 2 — Огненная пропасть (оранжевый/красный) */
.dngm2-loc--pos2{border-color:rgba(230,100,20,0.4);background:rgba(120,40,8,0.28);}
.dngm2-loc--pos2:hover{background:rgba(230,100,20,0.2);border-color:rgba(230,100,20,0.6);}
.dngm2-loc--pos2.dngm2-loc--done{border-color:rgba(240,110,20,0.55);background:rgba(120,40,8,0.35);}
.dngm2-loc--pos2.dngm2-loc--done .dngm2-loc-img img{filter:drop-shadow(0 0 10px rgba(240,110,30,0.75));}
.dngm2-loc--pos2 .dngm2-loc-name{color:#f5c090;}
/* Позиция 3 — Стела (фиолетово-синий) */
.dngm2-loc--pos3{border-color:rgba(150,90,240,0.38);background:rgba(60,20,110,0.28);}
.dngm2-loc--pos3:hover{background:rgba(150,90,240,0.18);border-color:rgba(150,90,240,0.58);}
.dngm2-loc--pos3.dngm2-loc--done{border-color:rgba(160,100,250,0.52);background:rgba(60,20,110,0.35);}
.dngm2-loc--pos3.dngm2-loc--done .dngm2-loc-img img{filter:drop-shadow(0 0 10px rgba(160,110,255,0.75));}
.dngm2-loc--pos3 .dngm2-loc-name{color:#c8a8f8;}
/* Рейд — всегда красный */
.dngm2-loc--raid{border-color:rgba(231,76,60,0.3)!important;background:rgba(231,76,60,0.06)!important;}
.dngm2-loc--raid .dngm2-loc-img img{filter:drop-shadow(0 0 8px rgba(231,76,60,0.55));}
.dngm2-loc--locked{cursor:default;filter:grayscale(0.35);opacity:0.85;}
.dngm2-loc--locked:hover{transform:none;}
.dngm2-loc--locked .dngm2-loc-img img{opacity:0.5;}
.dngm2-loc-lock{flex-shrink:0;display:flex;align-items:center;gap:6px;padding:0 12px 0 6px;}
.dngm2-loc-lock svg{color:#ffd050;filter:drop-shadow(0 0 6px rgba(255,200,50,0.6));flex-shrink:0;}
.dngm2-loc-lock-text{display:flex;flex-direction:column;gap:1px;}
.dngm2-loc-lock-label{font-size:9px;font-weight:600;color:rgba(255,200,80,0.55);letter-spacing:0.05em;line-height:1.2;}
.dngm2-loc-lock-level{font-size:12px;font-weight:900;color:#ffd050;letter-spacing:0.02em;line-height:1.2;text-shadow:0 0 8px rgba(255,200,50,0.5);white-space:nowrap;}
@media(max-width:400px){
  .dngm2-loc{gap:8px;padding-right:8px;}
  .dngm2-loc-img,.dngm2-loc-img img{width:58px;height:58px;}
  .dngm2-loc-name{font-size:13px;}
  .dngm2-loc-stages{font-size:10px;}
  .dngm2-loc-lock{gap:5px;padding:0 8px 0 4px;}
  .dngm2-loc-lock svg{width:16px;height:16px;}
  .dngm2-loc-lock-level{font-size:11px;}
  .dngm2-loc-cost{padding:3px 7px;font-size:12px;}
  .dngm2-loc-arrow svg{width:15px;height:15px;}
}
@media(max-width:299px){
  .dngm2-loc-lock-label{display:none;}
}
.dngm2-loc-img{position:relative;width:74px;height:74px;flex-shrink:0;}
.dngm2-loc-img img{width:74px;height:74px;object-fit:cover;border-radius:10px 0 0 10px;display:block;}
.dngm2-loc-badge{position:absolute;bottom:4px;left:4px;right:4px;text-align:center;font-size:9px;font-weight:700;padding:2px 4px;border-radius:4px;white-space:nowrap;}
.dngm2-loc-badge--raid{background:rgba(231,76,60,0.85);color:#fff;}
.dngm2-loc-badge--done{background:rgba(39,174,96,0.85);color:#fff;}
.dngm2-loc-badge--locked{background:rgba(0,0,0,0.7);color:rgba(174,214,241,0.6);border:1px solid rgba(52,152,219,0.2);}
.dngm2-loc-info{flex:1;display:flex;flex-direction:column;gap:4px;min-width:0;}
.dngm2-loc-name{font-size:14px;font-weight:700;color:#ddeeff;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:1.3;}
.dngm2-loc-mult{font-size:11px;font-weight:800;color:#ffd050;opacity:0.9;vertical-align:middle;}
.dngm2-loc-stages{font-size:11px;color:rgba(174,214,241,0.45);font-weight:600;}
.dngm2-loc-cost{flex-shrink:0;display:flex;align-items:center;gap:2px;padding:4px 9px;border-radius:8px;background:rgba(255,200,50,0.1);border:1px solid rgba(255,200,50,0.3);color:#ffd050;font-size:13px;font-weight:800;}
.dngm2-loc-cost-icon{width:12px;height:12px;flex-shrink:0;}
.dngm2-loc-cost--low{background:rgba(231,76,60,0.12);border-color:rgba(231,76,60,0.35);color:#e05555;}
.dngm2-loc-cost--low .dngm2-loc-cost-icon,.dngm2-loc-cost--low .dngm2-loc-cost-minus{color:#e05555;}
.dngm2-loc-arrow{flex-shrink:0;color:rgba(174,214,241,0.3);transition:color 0.15s,transform 0.15s;}
.dngm2-loc-arrow svg{width:18px;height:18px;display:block;}
.dngm2-loc:hover .dngm2-loc-arrow{color:rgba(174,214,241,0.7);transform:translateX(2px);}
.dngm2-exit{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:6px;padding:13px 20px;border-radius:10px;background:rgba(231,76,60,0.1);border:1px solid rgba(231,76,60,0.25);color:#f1948a;font-size:13px;font-weight:700;text-decoration:none;transition:background 0.2s,border-color 0.2s;-webkit-tap-highlight-color:transparent;}
.dngm2-exit svg{width:17px;height:17px;}
.dngm2-exit:hover{background:rgba(231,76,60,0.2);border-color:rgba(231,76,60,0.45);}

/* ═══════════════════════════════════════════
   СТРАНИЦЫ ПОДЗЕМЕЛИЙ — dng-* / dngd-* / dngm2-*
   ═══════════════════════════════════════════ */

/* ── Общая страница ── */
.dng-page {
    min-height: 100%;
    background: linear-gradient(180deg, #0a1520 0%, #070e18 100%);
    display: flex;
    flex-direction: column;
    font-family: Arial, sans-serif;
    color: #c8dff0;
}

/* ── Шапка ── */
.dng-topbar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    background: #06101c;
    border-bottom: 1px solid rgba(52,152,219,0.18);
    min-height: 52px;
    position: sticky;
    top: 0;
    z-index: 10;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
}
.dng-back {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: rgba(52,152,219,0.1);
    border: 1px solid rgba(52,152,219,0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #aed6f1;
    text-decoration: none;
    flex-shrink: 0;
    transition: background 0.15s;
}
.dng-back svg { width: 18px; height: 18px; }
.dng-back:hover { background: rgba(52,152,219,0.2); }
.dng-topbar-center {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}
.dng-topbar-title {
    font-size: 14px;
    font-weight: 800;
    color: #e8f4fd;
    letter-spacing: 0.02em;
}
.dng-topbar-alliance {
    font-size: 11px;
    color: #f6ffb1;
    font-weight: 600;
    letter-spacing: 0.04em;
    opacity: 0.8;
}
.dng-topbar-count {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 5px 11px 5px 9px;
    border-radius: 20px;
    background: rgba(52,152,219,0.13);
    border: 1px solid rgba(52,152,219,0.25);
    color: #aed6f1;
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
    flex-shrink: 0;
}
.dng-topbar-count svg { width: 14px; height: 14px; opacity: 0.7; flex-shrink: 0; }

/* ── Тело ── */
.dng-body {
    flex: 1;
    padding: 12px 10px 10px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* ── Сводка ── */
.dng-summary {
    display: flex;
    align-items: center;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(52,152,219,0.13);
    border-radius: 12px;
    padding: 10px 0;
}
.dng-summary-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    text-decoration: none;
}
.dng-summary-val {
    font-size: 18px;
    font-weight: 800;
    color: #f6ffb1;
    line-height: 1;
}
.dng-summary-label {
    font-size: 10px;
    font-weight: 600;
    color: rgba(174,214,241,0.4);
    text-transform: uppercase;
    letter-spacing: 0.07em;
}
.dng-summary-divider {
    width: 1px;
    height: 28px;
    background: rgba(52,152,219,0.14);
    flex-shrink: 0;
}
.dng-summary-link { color: #f6ffb1; text-decoration: none; font-weight: 800; }

/* ── Список карточек ── */
.dng-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.dng-card {
    display: flex;
    align-items: center;
    gap: 0;
    background: rgba(255,255,255,0.035);
    border: 1px solid rgba(52,152,219,0.12);
    border-radius: 12px;
    overflow: hidden;
    text-decoration: none;
    color: #c8dff0;
    transition: background 0.18s, border-color 0.18s, transform 0.15s;
    -webkit-tap-highlight-color: transparent;
}
.dng-card:hover { background: rgba(52,152,219,0.07); border-color: rgba(52,152,219,0.25); transform: translateY(-1px); }
.dng-card--upgrading { border-color: rgba(243,156,18,0.3); background: rgba(243,156,18,0.05); }
.dng-card--raid { border-color: rgba(231,76,60,0.3); background: rgba(231,76,60,0.05); }

.dng-card-left { flex-shrink: 0; padding: 10px 8px 10px 10px; }
.dng-card-imgwrap { width: 56px; height: 56px; border-radius: 50%; background: rgba(10,25,50,0.8); border: 1.5px solid rgba(52,152,219,0.25); overflow: visible; display: flex; align-items: center; justify-content: center; position: relative; }
.dng-card-img { width: 56px; height: 56px; object-fit: cover; display: block; border-radius: 50%; overflow: hidden; transition: transform 0.3s; }
.dng-card:hover .dng-card-img { transform: scale(1.06); }
.dng-card-level { position: absolute; bottom: -6px; left: 50%; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 3px; padding: 2px 7px; border-radius: 20px; background: linear-gradient(135deg, #1a4a6e 0%, #0d2a42 100%); border: 1px solid rgba(82, 201, 255, 0.4); color: #82d9ff; font-size: 11px; font-weight: 700; line-height: 1; white-space: nowrap; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5); }

.dng-card-main { flex: 1; padding: 10px 8px; min-width: 0; }
.dng-card-header { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; }
.dng-card-name { font-size: 14px; font-weight: 700; color: #ddeeff; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dng-badge { font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 10px; white-space: nowrap; }
.dng-badge--upgrade { background: rgba(243,156,18,0.18); border: 1px solid rgba(243,156,18,0.35); color: #f9ca74; }
.dng-badge--raid { background: rgba(231,76,60,0.18); border: 1px solid rgba(231,76,60,0.35); color: #f1948a; }

.dng-card-coords { display: flex; gap: 6px; margin-bottom: 6px; }
.dng-coord-item { display: flex; align-items: center; gap: 3px; background: rgba(52,152,219,0.1); border: 1px solid rgba(52,152,219,0.18); border-radius: 6px; padding: 2px 6px; }
.dng-coord-label { font-size: 10px; font-weight: 700; color: rgba(174,214,241,0.45); }
.dng-coord-val { font-size: 11px; font-weight: 700; color: #aed6f1; }

.dng-locals { display: flex; align-items: center; gap: 5px; }
.dng-local { width: 24px; height: 24px; border-radius: 6px; background: rgba(255,255,255,0.05); border: 1px solid rgba(52,152,219,0.15); display: flex; align-items: center; justify-content: center; font-size: 10px; flex-direction: column; gap: 0; }
.dng-local-num { font-size: 8px; color: rgba(174,214,241,0.35); font-weight: 700; line-height: 1; }
.dng-local-label { font-size: 10px; line-height: 1; }
.dng-local--done { background: rgba(39,174,96,0.15); border-color: rgba(39,174,96,0.3); color: #82e0aa; }
.dng-local--raid { background: rgba(231,76,60,0.15); border-color: rgba(231,76,60,0.3); color: #f1948a; }
.dng-locals-label { font-size: 10px; color: rgba(174,214,241,0.3); font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; margin-left: 2px; }
.dng-card-players { display: flex; align-items: center; gap: 5px; font-size: 12px; color: rgba(174,214,241,0.5); font-weight: 600; }

.dng-card-arrow { padding: 0 10px; color: rgba(174,214,241,0.2); transition: color 0.15s, transform 0.15s; }
.dng-card-arrow svg { width: 16px; height: 16px; display: block; }
.dng-card:hover .dng-card-arrow { color: rgba(174,214,241,0.6); transform: translateX(2px); }

/* ── Ссылка на подземелья альянса ── */
.dng-al-link { display: flex; align-items: center; gap: 14px; background: linear-gradient(135deg, rgba(40,60,120,0.65) 0%, rgba(20,30,70,0.75) 100%); border: 1px solid rgba(90,130,255,0.22); border-radius: 16px; padding: 14px 16px; margin-bottom: 14px; text-decoration: none; color: inherit; transition: border-color 0.2s, background 0.2s; position: relative; overflow: hidden; }
.dng-al-link::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 20% 50%, rgba(80,120,255,0.12) 0%, transparent 70%); pointer-events: none; }
.dng-al-link:hover { border-color: rgba(100,150,255,0.45); background: linear-gradient(135deg, rgba(50,75,150,0.7) 0%, rgba(25,40,90,0.8) 100%); }
.dng-al-link-icon { width: 50px; height: 50px; border-radius: 14px; flex-shrink: 0; background: rgba(80,120,255,0.18); border: 1px solid rgba(100,150,255,0.28); display: flex; align-items: center; justify-content: center; color: rgba(160,200,255,0.9); }
.dng-al-link-icon svg { width: 26px; height: 26px; }
.dng-al-link-info { flex: 1; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.dng-al-link-label { font-size: 10px; color: rgba(160,200,255,0.55); text-transform: uppercase; letter-spacing: 0.8px; font-weight: 500; }
.dng-al-link-name { font-size: 16px; font-weight: 700; color: #d6e8ff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dng-al-link-arr { width: 20px; height: 20px; color: rgba(140,180,255,0.45); flex-shrink: 0; }

/* ── Пустое состояние ── */
.dng-empty { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 28px 20px; text-align: center; }
.dng-empty-img { width: 120px; opacity: 0.28; filter: grayscale(0.5); }
.dng-empty-title { font-size: 16px; font-weight: 700; color: rgba(200,223,240,0.55); }
.dng-empty-sub { font-size: 12px; color: rgba(174,214,241,0.3); letter-spacing: 0.3px; line-height: 1.5; max-width: 240px; }
.dng-empty-btn { margin-top: 4px; display: inline-flex; align-items: center; padding: 10px 24px; background: rgba(52,152,219,0.14); border: 1px solid rgba(52,152,219,0.35); border-radius: 8px; color: #aed6f1; font-size: 13px; font-weight: 600; text-decoration: none; transition: background 0.2s, border-color 0.2s; }
.dng-empty-btn:hover { background: rgba(52,152,219,0.25); border-color: rgba(52,152,219,0.55); }

/* ── Кнопка создания подземелья в альянсе ── */
.dngal-create-wrap{padding:12px 12px 4px;}
.dngal-create-btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:13px 16px;border-radius:10px;background:linear-gradient(135deg,#1a6fa8 0%,#0e4a75 100%);border:1px solid rgba(52,152,219,0.45);color:#fff;font-size:14px;font-weight:700;text-decoration:none;box-shadow:0 4px 16px rgba(52,152,219,0.25);transition:background 0.2s,box-shadow 0.2s,transform 0.15s;-webkit-tap-highlight-color:transparent;box-sizing:border-box;cursor:pointer;font-family:inherit;}
.dngal-create-btn:hover{background:linear-gradient(135deg,#2080c0 0%,#145a8a 100%);box-shadow:0 6px 20px rgba(52,152,219,0.4);transform:translateY(-1px);}
.dngal-create-btn:active{transform:scale(0.98);}
.dngal-create-cost{display:flex;align-items:center;gap:4px;font-size:12px;font-weight:600;color:rgba(255,220,100,0.9);background:rgba(0,0,0,0.2);padding:2px 8px;border-radius:20px;margin-left:6px;}
.dngal-create-limit{display:flex;align-items:center;justify-content:center;gap:6px;padding:10px 16px;border-radius:10px;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.07);color:rgba(174,214,241,0.35);font-size:13px;font-weight:600;}

/* ── Экран «нет энергии» ── */
.dng-energy-gate {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 32px 20px;
    text-align: center;
}
.dng-energy-gate-icon {
    font-size: 40px;
    line-height: 1;
    filter: drop-shadow(0 0 12px rgba(255,200,50,0.5));
}
.dng-energy-gate-title {
    font-size: 17px;
    font-weight: 800;
    color: #ffd050;
    letter-spacing: 0.02em;
}
.dng-energy-gate-desc {
    font-size: 13px;
    color: rgba(200,223,240,0.7);
    line-height: 1.6;
}
.dng-energy-gate-desc strong { color: #ffd050; }
.dng-energy-gate-regen {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 14px;
    background: rgba(255,200,50,0.08);
    border: 1px solid rgba(255,200,50,0.2);
    border-radius: 20px;
    font-size: 12px;
    color: rgba(255,220,100,0.8);
}
.dng-energy-gate-regen strong { color: #ffd050; }

/* ── Модал смены локации ── */
.dng-switch-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0,0,0,0.65);
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.dng-switch-modal-box {
    background: #1e2226;
    border: 1px solid rgba(231,76,60,0.35);
    border-radius: 16px;
    padding: 24px 20px 20px;
    max-width: 340px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.55);
}
.dng-switch-modal-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(231,76,60,0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #e74c3c;
    flex-shrink: 0;
}
.dng-switch-modal-icon svg { width: 24px; height: 24px; }
.dng-switch-modal-title {
    font-size: 16px;
    font-weight: 700;
    color: #eaf0fb;
    text-align: center;
}
.dng-switch-modal-text {
    font-size: 13px;
    color: rgba(174,214,241,0.75);
    text-align: center;
    line-height: 1.55;
}
.dng-switch-modal-text strong { color: #eaf0fb; }
.dng-switch-modal-btns {
    display: flex;
    gap: 10px;
    width: 100%;
    margin-top: 4px;
}
.dng-switch-btn {
    flex: 1;
    padding: 11px 0;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 700;
    border: none;
    cursor: pointer;
    transition: background 0.18s;
}
.dng-switch-btn--cancel {
    background: rgba(174,214,241,0.08);
    color: rgba(174,214,241,0.75);
}
.dng-switch-btn--cancel:hover { background: rgba(174,214,241,0.14); }
.dng-switch-btn--confirm {
    background: rgba(231,76,60,0.75);
    color: #fff;
}
.dng-switch-btn--confirm:hover { background: rgba(231,76,60,0.9); }

/* ── Модал энергии (синий вариант) ── */
.dng-switch-modal-box--energy {
    border-color: rgba(52,152,219,0.55);
    background: linear-gradient(160deg,#0d1520 0%,#0e1825 60%,#0c1620 100%);
    box-shadow: 0 12px 40px rgba(0,0,0,0.7), 0 0 0 1px rgba(52,152,219,0.12), inset 0 1px 0 rgba(100,180,255,0.06);
    gap: 10px;
    padding: 28px 22px 22px;
}
.dng-switch-modal-box--energy .dng-switch-modal-title {
    font-size: 17px;
    color: #cce8ff;
    text-shadow: 0 1px 8px rgba(52,152,219,0.25);
}
.dng-switch-modal-box--energy .dng-switch-modal-text {
    color: rgba(174,214,241,0.55);
    font-size: 13px;
    line-height: 1.6;
}
.dng-switch-modal-box--energy .dng-switch-modal-text strong {
    color: #7ec8f0;
    font-weight: 700;
}
.dng-switch-modal-box--energy .dng-switch-modal-icon {
    width: 52px;
    height: 52px;
    background: rgba(20,80,140,0.35);
    color: #7ec8f0;
    border: 1px solid rgba(52,152,219,0.4);
    box-shadow: 0 0 16px rgba(52,152,219,0.15);
}
.dng-switch-modal-box--energy .dng-switch-btn--cancel {
    background: rgba(10,50,100,0.3);
    border: 1px solid rgba(52,152,219,0.3);
    color: rgba(174,214,241,0.55);
}
.dng-switch-modal-box--energy .dng-switch-btn--cancel:hover {
    background: rgba(15,65,120,0.4);
    border-color: rgba(52,152,219,0.5);
}
.dng-switch-modal-box--energy .dng-switch-btn--confirm {
    background: rgba(20,80,150,0.5);
    border: 1px solid rgba(52,152,219,0.65);
    color: #aed6f1;
}
.dng-switch-modal-box--energy .dng-switch-btn--confirm:hover {
    background: rgba(25,95,170,0.62);
    border-color: rgba(52,152,219,0.9);
}

/* ── Детали подземелья (dungeon/map) ── */
.dng-back-placeholder { width: 36px; height: 36px; flex-shrink: 0; }
.dngd-notice { margin: 10px 12px 0; padding: 10px 14px; border-radius: 8px; font-size: 13px; font-weight: 600; text-align: center; }
.dngd-notice--error { background: rgba(231,76,60,0.15); border: 1px solid rgba(231,76,60,0.35); color: #f1948a; }
.dngd-notice--success { background: rgba(39,174,96,0.15); border: 1px solid rgba(39,174,96,0.35); color: #82e0aa; }

.dngd-hero { display: flex; flex-direction: column; align-items: center; padding: 28px 16px 16px; gap: 14px; }
.dngd-hero-imgwrap { width: 120px; height: 120px; border-radius: 50%; background: rgba(52,152,219,0.08); border: 2px solid rgba(52,152,219,0.2); display: flex; align-items: center; justify-content: center; box-shadow: 0 0 24px rgba(52,152,219,0.12); }
.dngd-hero-img { width: 90px; height: 90px; object-fit: contain; filter: drop-shadow(0 4px 12px rgba(52,152,219,0.3)); }
.dngd-hero-title { font-size: 20px; font-weight: 700; color: #e8f4fd; letter-spacing: 0.02em; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.dngd-hero-alliance { font-size: 12px; font-weight: 600; color: #f6ffb1; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.85; }

/* Инфо-сетка */
.dngd-info { margin: 4px 12px 4px; display: flex; flex-direction: column; gap: 8px; }
.dngd-info-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.dngd-info-item { display: flex; align-items: center; gap: 10px; background: rgba(255,255,255,0.04); border: 1px solid rgba(52,152,219,0.12); border-radius: 10px; padding: 10px 12px; }
.dngd-info-icon { width: 18px; height: 18px; flex-shrink: 0; color: rgba(52,152,219,0.6); }
.dngd-info-content { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dngd-info-label { font-size: 10px; font-weight: 600; color: rgba(174,214,241,0.4); text-transform: uppercase; letter-spacing: 0.06em; }
.dngd-info-val { font-size: 14px; font-weight: 700; color: #c8dff0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dngd-info-link { color: #f6ffb1; text-decoration: none; }
.dngd-info-link:hover { text-decoration: underline; }

/* Статус генерала */
.dngd-status { margin: 8px 12px 12px; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.dngd-status-badge { display: flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 10px; font-size: 13px; font-weight: 600; width: 100%; box-sizing: border-box; }
.dngd-status-badge svg { width: 16px; height: 16px; flex-shrink: 0; }
.dngd-status-badge--here { background: rgba(39,174,96,0.14); border: 1px solid rgba(39,174,96,0.3); color: #82e0aa; }
.dngd-status-badge--going { background: rgba(52,152,219,0.12); border: 1px solid rgba(52,152,219,0.28); color: #aed6f1; }
.dngd-status-badge--busy { background: rgba(230,126,34,0.12); border: 1px solid rgba(230,126,34,0.28); color: #f0b27a; }
.dngd-status-badge--locked { background: rgba(231,76,60,0.12); border: 1px solid rgba(231,76,60,0.28); color: #f1948a; }
.dngd-travel { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.dngd-travel-time { display: flex; align-items: center; gap: 6px; font-size: 13px; color: rgba(174,214,241,0.7); }
.dngd-travel-time svg { width: 15px; height: 15px; }
.dngd-travel-time strong { color: #aed6f1; font-weight: 700; }
.dngd-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 13px 28px; border-radius: 10px; font-size: 14px; font-weight: 700; text-decoration: none; width: 100%; box-sizing: border-box; transition: background 0.2s, box-shadow 0.2s, transform 0.15s; }
.dngd-btn svg { width: 17px; height: 17px; }
.dngd-btn--primary { background: linear-gradient(135deg,#1a6fa8 0%,#0e4a75 100%); color: #fff; border: 1px solid rgba(52,152,219,0.45); box-shadow: 0 4px 16px rgba(52,152,219,0.25); }
.dngd-btn--primary:hover { background: linear-gradient(135deg,#2080c0 0%,#145a8a 100%); box-shadow: 0 6px 20px rgba(52,152,219,0.4); transform: translateY(-1px); }

/* ── Внутренняя страница подземелья (dngm2) ── */
.dngm2-page { min-height:100%; background:linear-gradient(180deg,#0a1520 0%,#070e18 100%); display:flex; flex-direction:column; font-family:Arial,sans-serif; color:#c8dff0; }
.dngm2-body { flex:1; padding:10px 10px 10px; display:flex; flex-direction:column; gap:8px; }
.dngm2-energy-badge { display:inline-flex; align-items:center; gap:7px; padding:8px 18px; border-radius:24px; background:rgba(80,180,255,0.15); border:1px solid rgba(80,180,255,0.45); color:#a8dcff; font-size:16px; font-weight:700; white-space:nowrap; box-shadow:0 0 8px rgba(52,152,219,0.25); text-decoration:none; }
.dngm2-energy-badge--full { background:rgba(246,255,50,0.18); border-color:rgba(246,255,100,0.65); color:#f6ff80; box-shadow:0 0 14px rgba(246,255,50,0.35); }
.dngm2-energy-badge--empty { background:rgba(231,76,60,0.15); border-color:rgba(231,76,60,0.55); color:#ff6b6b; box-shadow:0 0 8px rgba(231,76,60,0.25); }
.dngm2-energy-icon { width:17px; height:17px; flex-shrink:0; color:#60d0ff; filter:drop-shadow(0 0 5px rgba(80,200,255,0.7)); }
.dngm2-energy-badge--full .dngm2-energy-icon { color:#f6ff80; filter:drop-shadow(0 0 5px rgba(246,255,80,0.8)); }
.dngm2-energy-badge--empty .dngm2-energy-icon { color:#ff6b6b; filter:drop-shadow(0 0 5px rgba(231,76,60,0.7)); }

/* Блок уровень */
.dngm2-top-block { display:flex; align-items:flex-start; gap:12px; padding:12px; border-radius:12px; background:rgba(52,152,219,0.08); border:1px solid rgba(52,152,219,0.3); box-shadow:0 0 18px rgba(52,152,219,0.08); }
.dngm2-level-wrap { position:relative; width:64px; height:80px; flex-shrink:0; margin-top:2px; }
.dngm2-level-wrap--max .dngm2-level-ring-svg { filter:drop-shadow(0 0 8px rgba(220,160,30,0.55)); }
.dngm2-level-ring-svg { width:64px; height:64px; position:absolute; top:0; left:0; filter:drop-shadow(0 0 6px rgba(52,152,219,0.4)); }
.dngm2-level-inner { position:absolute; top:0; left:0; width:64px; height:64px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:0; }
.dngm2-level-tag { font-size:9px; font-weight:700; letter-spacing:0.12em; color:rgba(174,214,241,0.45); text-transform:uppercase; line-height:1; margin-bottom:1px; }
.dngm2-level-tag--max { color:rgba(220,160,30,0.65); }
.dngm2-level-num { font-size:22px; font-weight:900; color:#e8f4fd; line-height:1; letter-spacing:-0.03em; }
.dngm2-level-num--max { color:#f5cc60; }
.dngm2-level-maxbadge { position:absolute; bottom:0; left:50%; transform:translateX(-50%); white-space:nowrap; font-size:8px; font-weight:800; letter-spacing:0.1em; padding:2px 6px; border-radius:4px; background:rgba(220,160,30,0.18); border:1px solid rgba(220,160,30,0.5); color:#f5cc60; text-shadow:0 0 8px rgba(220,160,30,0.6); }
.dngm2-top-right { flex:1; display:flex; flex-direction:column; gap:7px; min-width:0; }
.dngm2-level-label { font-size:12px; font-weight:700; color:rgba(174,214,241,0.6); text-transform:uppercase; letter-spacing:0.06em; }
.dngm2-players-chip { display:inline-flex; align-items:center; gap:5px; padding:4px 10px; border-radius:20px; background:rgba(52,152,219,0.1); border:1px solid rgba(52,152,219,0.2); color:rgba(174,214,241,0.6); font-size:11px; font-weight:600; text-decoration:none; width:fit-content; transition:background 0.15s; }
.dngm2-players-chip svg { width:12px; height:12px; }
.dngm2-players-chip:hover { background:rgba(52,152,219,0.18); }
.dngm2-upgrade-chip { display:inline-flex; align-items:center; gap:5px; padding:4px 10px; border-radius:20px; background:rgba(39,174,96,0.1); border:1px solid rgba(39,174,96,0.22); color:rgba(130,224,170,0.7); font-size:11px; font-weight:600; text-decoration:none; width:fit-content; transition:background 0.15s; }
.dngm2-upgrade-chip svg { width:12px; height:12px; }
.dngm2-upgrade-chip:hover { background:rgba(39,174,96,0.2); }
.dngm2-missions-link { display:flex; align-items:center; gap:7px; padding:7px 9px; border-radius:8px; background:rgba(200,120,20,0.08); border:1px solid rgba(220,140,30,0.22); border-left:3px solid rgba(220,140,30,0.55); color:#e0a060; font-size:12px; font-weight:700; text-decoration:none; transition:background 0.15s,border-color 0.15s,color 0.15s; -webkit-tap-highlight-color:transparent; }
.dngm2-missions-link svg { width:13px; height:13px; flex-shrink:0; }
.dngm2-missions-link span { flex:1; }
.dngm2-missions-link-arr { color:rgba(224,160,96,0.4); transition:transform 0.15s,color 0.15s; }
.dngm2-missions-link:hover { background:rgba(200,120,20,0.16); border-color:rgba(240,160,40,0.45); color:#f0c080; }
.dngm2-missions-link:hover .dngm2-missions-link-arr { color:rgba(240,190,100,0.85); transform:translateX(3px); }

/* Заголовок секции */
.dngm2-section-title { font-size:11px; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color:rgba(174,214,241,0.35); padding:4px 2px 0; }

/* Локации */
.dngm2-locations { display:flex; flex-direction:column; gap:8px; }
.dngm2-loc { display:flex; align-items:center; gap:12px; background:rgba(255,255,255,0.035); border:1px solid rgba(52,152,219,0.13); border-radius:12px; overflow:hidden; text-decoration:none; color:#c8dff0; transition:background 0.18s,border-color 0.18s,transform 0.15s; -webkit-tap-highlight-color:transparent; padding-right:10px; }
.dngm2-loc:hover { transform:translateY(-1px); }
.dngm2-loc--pos1 { border-color:rgba(46,200,90,0.35); background:rgba(30,110,55,0.22); }
.dngm2-loc--pos1:hover { background:rgba(46,200,90,0.18); border-color:rgba(46,200,90,0.55); }
.dngm2-loc--pos1.dngm2-loc--done { border-color:rgba(46,200,90,0.5); background:rgba(30,110,55,0.28); }
.dngm2-loc--pos1.dngm2-loc--done .dngm2-loc-img img { filter:drop-shadow(0 0 10px rgba(46,200,90,0.7)); }
.dngm2-loc--pos2 { border-color:rgba(230,100,20,0.4); background:rgba(120,40,8,0.28); }
.dngm2-loc--pos2:hover { background:rgba(230,100,20,0.2); border-color:rgba(230,100,20,0.6); }
.dngm2-loc--pos2.dngm2-loc--done { border-color:rgba(240,110,20,0.55); background:rgba(120,40,8,0.35); }
.dngm2-loc--pos2.dngm2-loc--done .dngm2-loc-img img { filter:drop-shadow(0 0 10px rgba(240,110,30,0.75)); }
.dngm2-loc--pos2 .dngm2-loc-name { color:#f5c090; }
.dngm2-loc--pos3 { border-color:rgba(150,90,240,0.38); background:rgba(60,20,110,0.28); }
.dngm2-loc--pos3:hover { background:rgba(150,90,240,0.18); border-color:rgba(150,90,240,0.58); }
.dngm2-loc--pos3.dngm2-loc--done { border-color:rgba(160,100,250,0.52); background:rgba(60,20,110,0.35); }
.dngm2-loc--pos3.dngm2-loc--done .dngm2-loc-img img { filter:drop-shadow(0 0 10px rgba(160,110,255,0.75)); }
.dngm2-loc--pos3 .dngm2-loc-name { color:#c8a8f8; }
.dngm2-loc--raid { border-color:rgba(231,76,60,0.3)!important; background:rgba(231,76,60,0.06)!important; }
.dngm2-loc--raid .dngm2-loc-img img { filter:drop-shadow(0 0 8px rgba(231,76,60,0.55)); }
.dngm2-loc--locked { opacity:0.6; cursor:default; filter:grayscale(0.4); }
.dngm2-loc--locked:hover { transform:none; }
.dngm2-loc-img { position:relative; width:74px; height:74px; flex-shrink:0; overflow:visible; }
.dngm2-loc-img img { width:74px; height:74px; object-fit:cover; border-radius:10px 0 0 10px; display:block; }
.dngm2-loc-badge { position:absolute; bottom:4px; left:4px; right:4px; text-align:center; font-size:9px; font-weight:700; padding:2px 4px; border-radius:4px; letter-spacing:0.03em; white-space:nowrap; }
.dngm2-loc-badge--raid { background:rgba(231,76,60,0.85); color:#fff; }
.dngm2-loc-badge--done { background:rgba(39,174,96,0.85); color:#fff; }
.dngm2-loc-badge--battle { background:rgba(39,174,96,0.85); color:#fff; text-shadow:none; }
.dngm2-loc-badge--locked { background:rgba(0,0,0,0.7); color:rgba(174,214,241,0.6); border:1px solid rgba(52,152,219,0.2); }
.dngm2-loc-info { flex:1; display:flex; flex-direction:column; gap:4px; min-width:0; }
.dngm2-loc-name { font-size:14px; font-weight:700; color:#ddeeff; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; line-height:1.3; }
.dngm2-loc-meta { display:flex; align-items:center; gap:8px; }
.dngm2-loc-stages { font-size:11px; color:rgba(174,214,241,0.45); font-weight:600; }
.dngm2-loc-fighters { display:inline-flex; align-items:center; gap:3px; font-size:11px; color:rgba(255,200,100,0.75); font-weight:600; }
.dngm2-loc-cooldown { display:inline-flex; align-items:center; gap:3px; font-size:11px; color:rgba(231,76,60,0.8); font-weight:600; }
.dngm2-loc-arrow { flex-shrink:0; color:rgba(174,214,241,0.3); transition:color 0.15s,transform 0.15s; }
.dngm2-loc-arrow svg { width:18px; height:18px; display:block; }
.dngm2-loc:hover .dngm2-loc-arrow { color:rgba(174,214,241,0.7); transform:translateX(2px); }

/* Кнопка выхода */
.dngm2-exit { display:flex; align-items:center; justify-content:center; gap:8px; margin-top:6px; padding:13px 20px; border-radius:10px; background:rgba(231,76,60,0.1); border:1px solid rgba(231,76,60,0.25); color:#f1948a; font-size:13px; font-weight:700; text-decoration:none; transition:background 0.2s,border-color 0.2s; -webkit-tap-highlight-color:transparent; }
.dngm2-exit svg { width:17px; height:17px; }
.dngm2-exit:hover { background:rgba(231,76,60,0.2); border-color:rgba(231,76,60,0.45); }

/* ── Страница этапов локации (dngls-*) ── */
.dng-topbar-sub{font-size:11px;color:rgba(174,214,241,0.45);font-weight:400;display:block;margin-top:1px;}
.dngls-progress-chip{display:flex;align-items:center;gap:4px;padding:5px 10px;border-radius:20px;background:rgba(52,152,219,0.12);border:1px solid rgba(52,152,219,0.25);color:#aed6f1;font-size:12px;font-weight:700;white-space:nowrap;}
.dngls-list{display:flex;flex-direction:column;gap:8px;}
.dngls-stage{border-radius:12px;background:rgba(255,255,255,0.03);border:1px solid rgba(52,152,219,0.1);overflow:hidden;transition:border-color 0.2s;}
.dngls-stage--current{border-color:rgba(52,152,219,0.45);background:rgba(52,152,219,0.06);}
.dngls-stage--done{opacity:0.55;}
.dngls-stage--boss{border-color:rgba(245,200,66,0.3);background:rgba(245,200,66,0.04);}
.dngls-stage--boss.dngls-stage--current{border-color:rgba(245,200,66,0.6);background:rgba(245,200,66,0.08);}
.dngls-stage-head{display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid rgba(255,255,255,0.05);}
.dngls-stage--boss .dngls-stage-head{border-bottom-color:rgba(245,200,66,0.1);}
.dngls-stage-num{min-width:30px;height:30px;border-radius:50%;background:rgba(52,152,219,0.12);border:1px solid rgba(52,152,219,0.22);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:#aed6f1;flex-shrink:0;gap:2px;}
.dngls-stage--boss .dngls-stage-num{background:rgba(245,200,66,0.12);border-color:rgba(245,200,66,0.3);color:#f5c842;}
.dngls-stage-title{font-size:13px;font-weight:600;color:#ddeeff;flex:1;display:flex;flex-direction:column;gap:1px;}
.dngls-stage--boss .dngls-stage-title{color:#f5c842;}
.dngls-stage-enemy-name{font-size:10px;font-weight:500;color:rgba(174,214,241,0.45);}
.dngls-stage-status{flex-shrink:0;}
.dngls-badge{display:inline-flex;align-items:center;gap:4px;padding:3px 8px;border-radius:20px;font-size:11px;font-weight:600;}
.dngls-badge--current{background:rgba(52,152,219,0.2);color:#7ec8f5;border:1px solid rgba(52,152,219,0.35);}
.dngls-badge--done{background:rgba(39,174,96,0.15);color:#7dcea0;border:1px solid rgba(39,174,96,0.25);}
.dngls-badge--locked{background:rgba(255,255,255,0.05);color:rgba(174,214,241,0.35);border:1px solid rgba(255,255,255,0.07);}
.dngls-enemies{display:flex;flex-direction:column;gap:0;}
.dngls-enemy{display:flex;align-items:center;justify-content:center;padding:8px 14px;border-bottom:1px solid rgba(255,255,255,0.04);gap:10px;}
.dngls-enemy:last-child{border-bottom:none;}
.dngls-enemy--boss{background:rgba(245,200,66,0.03);}
.dngls-enemy-name{display:flex;align-items:center;gap:5px;font-size:13px;color:rgba(174,214,241,0.85);font-weight:500;flex:1;min-width:0;}
.dngls-enemy-count{font-size:11px;color:rgba(174,214,241,0.45);font-weight:400;}
.dngls-enemy-params{display:flex;align-items:center;gap:10px;flex-shrink:0;}
.dngls-param{display:flex;align-items:center;gap:3px;font-size:11px;font-weight:600;}
.dngls-param--hp{color:rgba(231,76,60,0.8);}
.dngls-param--atk{color:rgba(243,156,18,0.85);}
.dngls-param--def{color:rgba(52,152,219,0.8);}
.dngbt-stage-badge{text-decoration:none;}
.dngbt-stage-badge:hover{opacity:0.8;}

/* ── Выход из подземелья (dngexit-*) ── */
.dngexit-card{display:flex;flex-direction:column;align-items:center;gap:14px;padding:36px 24px 28px;margin:16px;border-radius:20px;background:rgba(255,255,255,0.025);border:1px solid rgba(231,76,60,0.2);box-shadow:0 8px 40px rgba(0,0,0,0.5);}
.dngexit-icon{width:72px;height:72px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:rgba(231,76,60,0.1);border:1px solid rgba(231,76,60,0.3);color:rgba(231,76,60,0.8);box-shadow:0 0 24px rgba(231,76,60,0.12);}
.dngexit-title{font-size:20px;font-weight:900;color:#e8f4fd;letter-spacing:-0.01em;}
.dngexit-sub{font-size:13px;color:rgba(174,214,241,0.45);}
.dngexit-time{display:inline-flex;align-items:center;gap:5px;font-size:14px;font-weight:700;color:#aed6f1;padding:5px 14px;border-radius:20px;background:rgba(52,152,219,0.1);border:1px solid rgba(52,152,219,0.2);}
.dngexit-actions{display:flex;gap:10px;width:100%;margin-top:6px;}
.dngexit-btn{flex:1;display:flex;align-items:center;justify-content:center;height:48px;border-radius:12px;font-size:15px;font-weight:800;text-decoration:none;transition:background 0.15s,transform 0.1s;-webkit-tap-highlight-color:transparent;}
.dngexit-btn:active{transform:scale(0.97);}
.dngexit-btn--cancel{background:rgba(52,152,219,0.08);border:1px solid rgba(52,152,219,0.2);color:rgba(174,214,241,0.7);}
.dngexit-btn--cancel:hover{background:rgba(52,152,219,0.16);}
.dngexit-btn--confirm{background:rgba(231,76,60,0.18);border:1px solid rgba(231,76,60,0.45);color:#e07070;}
.dngexit-btn--confirm:hover{background:rgba(231,76,60,0.3);border-color:rgba(231,76,60,0.7);color:#f08080;}

/* ── Кнопка пополнения за золото ── */
.dnge-refill-btn.dnge-refill-btn--gold{background:rgba(160,110,0,0.35) !important;border:1px solid rgba(220,165,30,0.6) !important;color:#f5d060 !important;}
.dnge-refill-btn.dnge-refill-btn--gold:hover{background:rgba(180,130,0,0.48) !important;border-color:rgba(220,165,30,0.85) !important;}
.dnge-refill-btn.dnge-refill-btn--gold:active{background:rgba(190,140,0,0.55) !important;}
.dnge-refill-btn.dnge-refill-btn--gold.dnge-refill-btn--disabled{background:rgba(160,110,0,0.15) !important;border-color:rgba(220,165,30,0.25) !important;color:rgba(245,208,96,0.4) !important;}
.dnge-refill-btn.dnge-refill-btn--gold .dnge-refill-cost{color:rgba(245,208,96,0.7) !important;}
/* ── Модал пополнения за золото ── */
.dng-switch-modal-box--gold{
    border-color:rgba(220,165,30,0.55);
    background:linear-gradient(160deg,#1e1a0e 0%,#1a1810 60%,#1c1a0d 100%);
    border-radius:18px;
    padding:28px 22px 22px;
    gap:10px;
    box-shadow:0 12px 40px rgba(0,0,0,0.7),0 0 0 1px rgba(220,165,30,0.12),inset 0 1px 0 rgba(255,220,80,0.06);
}
.dng-switch-modal-box--gold .dng-switch-modal-title{font-size:17px;color:#faecc2;text-shadow:0 1px 8px rgba(220,165,30,0.25);}
.dng-switch-modal-box--gold .dng-switch-modal-text{color:rgba(245,217,122,0.55);font-size:13px;line-height:1.6;}
.dng-switch-modal-box--gold .dng-switch-modal-text strong{color:#f5d060;font-weight:700;}
.dng-switch-modal-box--gold .dng-switch-modal-icon{width:52px;height:52px;background:rgba(160,110,0,0.3);color:#f5d060;border:1px solid rgba(220,165,30,0.4);box-shadow:0 0 16px rgba(220,165,30,0.15);}
.dng-switch-modal-box--gold .dng-switch-btn--cancel{background:rgba(120,80,0,0.25) !important;border:1px solid rgba(220,165,30,0.3) !important;color:rgba(245,208,96,0.55) !important;}
.dng-switch-modal-box--gold .dng-switch-btn--cancel:hover{background:rgba(140,95,0,0.35) !important;border-color:rgba(220,165,30,0.5) !important;}
.dng-switch-modal-box--gold .dng-switch-btn--confirm{background:rgba(160,110,0,0.45) !important;border:1px solid rgba(220,165,30,0.65) !important;color:#f5d060 !important;}
.dng-switch-modal-box--gold .dng-switch-btn--confirm:hover{background:rgba(180,130,0,0.58) !important;border-color:rgba(220,165,30,0.9) !important;}

/* === Kill effect === */
.dng-kill-overlay{
    position:fixed;inset:0;z-index:9999;
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
    pointer-events:none;
    background:rgba(180,0,0,0);
    animation:dngKillBg 1s ease-out forwards;
}
@keyframes dngKillBg{
    0%{background:rgba(180,0,0,0.28);}
    40%{background:rgba(180,0,0,0.18);}
    100%{background:rgba(180,0,0,0);}
}
.dng-kill-skull{
    opacity:0;
    animation:dngKillSkull 1s ease-out forwards;
    filter:drop-shadow(0 0 14px rgba(220,50,50,0.9));
}
@keyframes dngKillSkull{
    0%{opacity:0;transform:scale(0.4) translateY(10px);}
    25%{opacity:1;transform:scale(1.15) translateY(-4px);}
    55%{opacity:1;transform:scale(1) translateY(0);}
    80%{opacity:1;}
    100%{opacity:0;transform:scale(0.9) translateY(-6px);}
}
.dng-kill-text{
    opacity:0;
    font-size:17px;font-weight:700;letter-spacing:1px;
    color:#ff6b6b;
    text-shadow:0 0 12px rgba(220,50,50,0.9),0 1px 2px #000;
    text-transform:uppercase;
    animation:dngKillText 1s ease-out forwards;
}
@keyframes dngKillText{
    0%{opacity:0;transform:translateY(6px);}
    25%{opacity:1;transform:translateY(0);}
    65%{opacity:1;}
    100%{opacity:0;}
}
/* === Miss effect (enemy already dead) === */
.dng-miss-overlay{
    position:fixed;inset:0;z-index:9999;
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
    pointer-events:none;
    animation:dngMissBg 1.2s ease-out forwards;
}
@keyframes dngMissBg{
    0%{background:rgba(80,80,180,0.22);}
    50%{background:rgba(80,80,180,0.12);}
    100%{background:rgba(80,80,180,0);}
}
.dng-miss-icon{
    opacity:0;
    animation:dngMissIcon 1.2s ease-out forwards;
    filter:drop-shadow(0 0 14px rgba(120,120,255,0.9));
}
@keyframes dngMissIcon{
    0%{opacity:0;transform:scale(0.5) rotate(-15deg);}
    25%{opacity:1;transform:scale(1.1) rotate(5deg);}
    55%{opacity:1;transform:scale(1) rotate(0deg);}
    80%{opacity:1;}
    100%{opacity:0;transform:scale(0.9) translateY(-8px);}
}
.dng-miss-text{
    opacity:0;
    font-size:17px;font-weight:700;letter-spacing:1px;
    color:#a0a8ff;
    text-shadow:0 0 12px rgba(100,100,255,0.9),0 1px 2px #000;
    text-transform:uppercase;
    animation:dngMissText 1.2s ease-out forwards;
}
@keyframes dngMissText{
    0%{opacity:0;transform:translateY(6px);}
    25%{opacity:1;transform:translateY(0);}
    65%{opacity:1;}
    100%{opacity:0;}
}
.dng-battle-wrap{position:relative;}
.dng-battle-wrap--killed{
    animation:dngBattleShake 0.35s ease-out;
}
@keyframes dngBattleShake{
    0%{transform:translateX(0);}
    20%{transform:translateX(-5px);}
    40%{transform:translateX(5px);}
    60%{transform:translateX(-3px);}
    80%{transform:translateX(3px);}
    100%{transform:translateX(0);}
}

/* ── Страница улучшения подземелья (dngl-*) ── */
.dngl-level-card{display:flex;align-items:center;gap:16px;padding:14px;border-radius:14px;background:rgba(52,152,219,0.07);border:1px solid rgba(52,152,219,0.2);}
.dngl-level-ring{position:relative;width:72px;height:72px;flex-shrink:0;}
.dngl-ring-svg{width:72px;height:72px;position:absolute;top:0;left:0;filter:drop-shadow(0 0 6px rgba(52,152,219,0.4));}
.dngl-level-ring--max .dngl-ring-svg{filter:drop-shadow(0 0 8px rgba(220,160,30,0.5));}
.dngl-ring-inner{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;}
.dngl-ring-tag{font-size:9px;font-weight:700;letter-spacing:0.12em;color:rgba(174,214,241,0.45);text-transform:uppercase;line-height:1;}
.dngl-ring-tag--max{color:rgba(220,160,30,0.65);}
.dngl-ring-num{font-size:26px;font-weight:900;color:#e8f4fd;line-height:1;letter-spacing:-0.03em;}
.dngl-ring-num--max{color:#f5cc60;}
.dngl-level-info{flex:1;display:flex;flex-direction:column;gap:8px;}
.dngl-level-title{font-size:11px;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;color:rgba(174,214,241,0.45);}
.dngl-max-badge{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:6px;background:rgba(220,160,30,0.15);border:1px solid rgba(220,160,30,0.4);color:#f5cc60;font-size:12px;font-weight:700;width:fit-content;}
.dngl-upgrading-badge{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:6px;background:rgba(52,152,219,0.12);border:1px solid rgba(52,152,219,0.3);color:#a8dcff;font-size:12px;font-weight:700;width:fit-content;}
.dngl-cooldown-badge{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:6px;background:rgba(180,100,255,0.1);border:1px solid rgba(180,100,255,0.3);color:#d4a0ff;font-size:12px;font-weight:700;width:fit-content;}
.dngl-next-badge{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:6px;background:rgba(39,174,96,0.1);border:1px solid rgba(39,174,96,0.28);color:#6ddc90;font-size:12px;font-weight:700;width:fit-content;}
.dngl-progress-card{padding:16px;border-radius:12px;background:rgba(52,152,219,0.07);border:1px solid rgba(52,152,219,0.2);display:flex;flex-direction:column;gap:10px;}
.dngl-progress-header{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:700;color:#a8dcff;}
.dngl-progress-time{font-size:26px;font-weight:900;color:#e8f4fd;letter-spacing:-0.02em;text-align:center;padding:4px 0;}
.dngl-progress-bar{height:6px;border-radius:3px;background:rgba(52,152,219,0.12);overflow:hidden;}
.dngl-progress-fill{height:100%;width:60%;border-radius:3px;background:linear-gradient(90deg,rgba(52,152,219,0.6),rgba(100,200,255,0.9));animation:dngl-pulse 2s ease-in-out infinite;}
@keyframes dngl-pulse{0%,100%{opacity:0.7}50%{opacity:1}}
.dngl-cooldown-card{padding:16px;border-radius:12px;background:rgba(180,100,255,0.06);border:1px solid rgba(180,100,255,0.2);display:flex;flex-direction:column;gap:10px;}
.dngl-cooldown-header{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:700;color:#d4a0ff;}
.dngl-cooldown-time{font-size:26px;font-weight:900;color:#eedeff;letter-spacing:-0.02em;text-align:center;padding:4px 0;}
.dngl-cooldown-bar{height:6px;border-radius:3px;background:rgba(180,100,255,0.1);overflow:hidden;}
.dngl-cooldown-fill{height:100%;border-radius:3px;background:linear-gradient(90deg,rgba(180,100,255,0.5),rgba(210,150,255,0.85));transition:width 1s linear;}
.dngl-max-card{display:flex;align-items:center;gap:14px;padding:18px;border-radius:12px;background:rgba(220,160,30,0.1);border:1px solid rgba(220,160,30,0.3);color:#f5cc60;}
.dngl-max-card-title{font-size:15px;font-weight:800;color:#f5cc60;}
.dngl-max-card-sub{font-size:12px;color:rgba(245,204,96,0.55);margin-top:3px;}
.dngl-warn-card{display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:12px;background:rgba(231,76,60,0.07);border:1px solid rgba(231,76,60,0.22);color:rgba(241,148,138,0.8);font-size:13px;font-weight:600;}
.dngl-section-title{font-size:11px;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:rgba(174,214,241,0.35);padding:4px 2px 0;}
.dngl-cost-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;}
.dngl-cost-item{display:flex;flex-direction:column;align-items:center;gap:5px;padding:12px 6px;border-radius:10px;background:rgba(255,255,255,0.03);border:1px solid rgba(52,152,219,0.12);font-size:13px;font-weight:700;color:#ddeeff;}
.dngl-cost-item img{width:26px;height:26px;object-fit:contain;}
.dngl-cost-label{font-size:10px;font-weight:600;color:rgba(174,214,241,0.4);letter-spacing:0.03em;}
.dngl-duration-row{display:flex;align-items:center;gap:7px;padding:10px 14px;border-radius:8px;background:rgba(52,152,219,0.05);border:1px solid rgba(52,152,219,0.12);font-size:13px;color:rgba(174,214,241,0.6);}
.dngl-duration-row strong{color:#a8dcff;font-weight:700;}
.dngl-btn{display:flex;align-items:center;justify-content:center;gap:8px;padding:14px 20px;border-radius:12px;font-size:14px;font-weight:700;text-decoration:none;transition:background 0.2s,border-color 0.2s,transform 0.15s;-webkit-tap-highlight-color:transparent;}
.dngl-btn:active{transform:scale(0.98);}
.dngl-btn--res{background:rgba(52,152,219,0.15);border:1px solid rgba(52,152,219,0.4);color:#a8dcff;}
.dngl-btn--res:hover{background:rgba(52,152,219,0.25);border-color:rgba(52,152,219,0.65);color:#e8f4fd;}
.dngl-btn--gold{background:rgba(220,160,30,0.12);border:1px solid rgba(220,160,30,0.38);color:#f5cc60;}
.dngl-btn--gold:hover{background:rgba(220,160,30,0.22);border-color:rgba(220,160,30,0.6);color:#ffe080;}
.dngl-or-row{display:flex;align-items:center;gap:10px;color:rgba(174,214,241,0.2);font-size:12px;font-weight:600;letter-spacing:0.08em;text-transform:uppercase;}
.dngl-or-row::before,.dngl-or-row::after{content:'';flex:1;height:1px;background:rgba(52,152,219,0.1);}
/* dngl action cards */
.dngl-actions{display:flex;flex-direction:column;gap:10px;}
.dngl-action-card{display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:14px;text-decoration:none;transition:background 0.18s,border-color 0.18s,transform 0.13s;-webkit-tap-highlight-color:transparent;}
.dngl-action-card:active{transform:scale(0.98);}
.dngl-action-card--res{background:rgba(52,152,219,0.08);border:1px solid rgba(52,152,219,0.22);}
.dngl-action-card--res:hover{background:rgba(52,152,219,0.15);border-color:rgba(52,152,219,0.45);}
.dngl-action-card--res .dngl-action-icon{color:#5ab4e8;}
.dngl-action-card--res .dngl-action-title{color:#a8dcff;}
.dngl-action-card--res .dngl-action-arr{color:rgba(90,180,232,0.35);}
.dngl-action-card--gold{background:rgba(220,160,30,0.07);border:1px solid rgba(220,160,30,0.22);}
.dngl-action-card--gold:hover{background:rgba(220,160,30,0.14);border-color:rgba(220,160,30,0.45);}
.dngl-action-card--gold .dngl-action-title{color:#f5cc60;}
.dngl-action-card--gold .dngl-action-arr{color:rgba(220,160,30,0.35);}
.dngl-action-icon{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:10px;flex-shrink:0;}
.dngl-action-card--res .dngl-action-icon{background:rgba(52,152,219,0.12);}
.dngl-action-card--gold .dngl-action-icon{background:rgba(220,160,30,0.1);}
.dngl-action-body{flex:1;display:flex;flex-direction:column;gap:2px;}
.dngl-action-title{font-size:14px;font-weight:700;}
.dngl-action-sub{font-size:12px;font-weight:500;color:rgba(174,214,241,0.45);}
.dngl-action-card--gold .dngl-action-sub{color:rgba(220,160,30,0.55);}

/* ── Страница онлайн (dngo-*) ── */
.dngo-count-badge{display:inline-flex;align-items:center;gap:5px;padding:5px 12px;border-radius:20px;background:rgba(52,152,219,0.12);border:1px solid rgba(52,152,219,0.28);color:rgba(174,214,241,0.75);font-size:13px;font-weight:700;}
.dngo-count-badge svg{width:13px;height:13px;}
.dngo-list{display:flex;flex-direction:column;gap:6px;}

/* Базовая карточка */
.dngo-card{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:12px;background:rgba(255,255,255,0.03);border:1px solid rgba(52,152,219,0.1);border-left:3px solid rgba(52,152,219,0.15);transition:background 0.15s,border-color 0.15s;}
.dngo-card:hover{background:rgba(52,152,219,0.06);border-color:rgba(52,152,219,0.22);border-left-color:rgba(52,152,219,0.4);}

/* Топ-3 */
.dngo-card--top1{border-left-color:rgba(255,200,30,0.7);background:rgba(255,180,0,0.06);}
.dngo-card--top1:hover{background:rgba(255,180,0,0.1);border-left-color:rgba(255,200,30,0.9);}
.dngo-card--top2{border-left-color:rgba(180,190,210,0.7);background:rgba(160,175,200,0.05);}
.dngo-card--top2:hover{background:rgba(160,175,200,0.09);border-left-color:rgba(200,210,230,0.9);}
.dngo-card--top3{border-left-color:rgba(200,120,40,0.65);background:rgba(180,90,20,0.06);}
.dngo-card--top3:hover{background:rgba(180,90,20,0.1);border-left-color:rgba(220,140,60,0.85);}

/* Текущий игрок */
.dngo-card--me{border-color:rgba(39,174,96,0.25);border-left-color:rgba(39,174,96,0.7);background:rgba(39,174,96,0.05);}
.dngo-card--me:hover{background:rgba(39,174,96,0.09);}

/* Позиция */
.dngo-pos{width:24px;flex-shrink:0;display:flex;align-items:center;justify-content:center;}
.dngo-medal{font-size:20px;line-height:1;}
.dngo-pos-num{font-size:11px;font-weight:700;color:rgba(174,214,241,0.3);}

/* Аватар с инициалом */
.dngo-avatar{width:42px;height:42px;border-radius:50%;background:rgba(var(--av-rgb,52,152,219),0.15);border:2px solid color-mix(in srgb,var(--av-color,#3498db) 45%,transparent);display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:16px;font-weight:800;color:var(--av-color,#3498db);text-transform:uppercase;box-shadow:0 0 10px color-mix(in srgb,var(--av-color,#3498db) 20%,transparent);}

/* Основное */
.dngo-card-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px;}
.dngo-name-row{display:flex;align-items:center;gap:7px;min-width:0;}
.dngo-nick{font-size:14px;font-weight:700;color:#ddeeff;text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.dngo-nick:hover{color:#fff;}
.dngo-me-tag{flex-shrink:0;font-size:9px;font-weight:800;letter-spacing:0.08em;padding:2px 6px;border-radius:4px;background:rgba(39,174,96,0.2);border:1px solid rgba(39,174,96,0.4);color:#6ddc90;text-transform:uppercase;}
.dngo-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.dngo-repa{display:flex;align-items:center;gap:2px;}
.dngo-repa img{height:13px !important;width:auto !important;}
.dngo-blood{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:700;color:rgba(231,76,60,0.75);}
.dngo-blood svg{color:rgba(231,76,60,0.85);}

/* Кнопка выгнать */
.dngo-kick{flex-shrink:0;width:34px;height:34px;border-radius:8px;display:flex;align-items:center;justify-content:center;background:rgba(231,76,60,0.07);border:1px solid rgba(231,76,60,0.18);color:rgba(231,76,60,0.55);text-decoration:none;transition:background 0.15s,border-color 0.15s,color 0.15s;-webkit-tap-highlight-color:transparent;}
.dngo-kick svg{width:15px;height:15px;}
.dngo-kick:hover{background:rgba(231,76,60,0.18);border-color:rgba(231,76,60,0.45);color:#e74c3c;}

/* Модалка подтверждения */
.dngo-modal{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,0.65);backdrop-filter:blur(4px);padding:20px;}
.dngo-modal-box{width:100%;max-width:320px;background:linear-gradient(180deg,#0d1e32 0%,#091420 100%);border:1px solid rgba(231,76,60,0.3);border-radius:16px;padding:28px 24px 22px;display:flex;flex-direction:column;align-items:center;gap:12px;box-shadow:0 20px 60px rgba(0,0,0,0.7),0 0 30px rgba(231,76,60,0.1);}
.dngo-modal-icon{width:52px;height:52px;border-radius:50%;background:rgba(231,76,60,0.12);border:1px solid rgba(231,76,60,0.3);display:flex;align-items:center;justify-content:center;color:#e74c3c;}
.dngo-modal-icon svg{width:24px;height:24px;}
.dngo-modal-title{font-size:18px;font-weight:800;color:#e8f4fd;text-align:center;}
.dngo-modal-sub{font-size:13px;color:rgba(174,214,241,0.55);text-align:center;line-height:1.5;}
.dngo-modal-sub strong{color:#aed6f1;font-weight:700;}
.dngo-modal-actions{display:flex;gap:10px;width:100%;margin-top:6px;}
.dngo-modal-btn{flex:1;display:flex;align-items:center;justify-content:center;padding:11px 0;border-radius:10px;font-size:14px;font-weight:700;text-decoration:none;border:none;cursor:pointer;transition:background 0.15s,border-color 0.15s;-webkit-tap-highlight-color:transparent;}
.dngo-modal-btn--cancel{background:rgba(52,152,219,0.1);border:1px solid rgba(52,152,219,0.25);color:rgba(174,214,241,0.7);}
.dngo-modal-btn--cancel:hover{background:rgba(52,152,219,0.18);}
.dngo-modal-btn--confirm{background:rgba(231,76,60,0.15);border:1px solid rgba(231,76,60,0.4);color:#f1948a;}
.dngo-modal-btn--confirm:hover{background:rgba(231,76,60,0.28);border-color:rgba(231,76,60,0.65);color:#fff;}

/* Пагинация */
.dngo-nav{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;padding-top:4px;}
.dngo-nav-btn{display:inline-flex;align-items:center;justify-content:center;min-width:36px;height:36px;padding:0 12px;border-radius:8px;background:rgba(52,152,219,0.08);border:1px solid rgba(52,152,219,0.18);color:rgba(174,214,241,0.6);font-size:13px;font-weight:700;text-decoration:none;transition:background 0.15s,border-color 0.15s;-webkit-tap-highlight-color:transparent;}
.dngo-nav-btn:hover{background:rgba(52,152,219,0.18);border-color:rgba(52,152,219,0.38);color:#aed6f1;}
.dngo-nav-btn--active{background:rgba(52,152,219,0.22);border-color:rgba(52,152,219,0.55);color:#e8f4fd;cursor:default;}

/* ── Страница энергии (dnge-*) ── */
.dnge-card{display:flex;align-items:center;gap:16px;padding:18px;border-radius:14px;background:rgba(80,180,255,0.07);border:1px solid rgba(80,180,255,0.25);}
.dnge-icon-wrap{width:64px;height:64px;border-radius:50%;background:rgba(80,180,255,0.12);border:2px solid rgba(80,180,255,0.35);display:flex;align-items:center;justify-content:center;flex-shrink:0;color:#60d0ff;box-shadow:0 0 16px rgba(52,152,219,0.25);}
.dnge-icon-wrap svg{width:32px;height:32px;}
.dnge-icon-wrap--full{background:rgba(246,255,80,0.15);border-color:rgba(246,255,80,0.55);color:#f6ff80;box-shadow:0 0 20px rgba(246,255,80,0.35);}
.dnge-info{flex:1;display:flex;flex-direction:column;gap:6px;}
.dnge-title{font-size:11px;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;color:rgba(174,214,241,0.55);}
.dnge-counter{display:flex;align-items:baseline;gap:3px;}
.dnge-current{font-size:36px;font-weight:900;color:#a8dcff;line-height:1;letter-spacing:-0.02em;}
.dnge-sep{font-size:20px;color:rgba(174,214,241,0.3);font-weight:300;}
.dnge-max{font-size:20px;color:rgba(174,214,241,0.45);font-weight:700;}
.dnge-counter--full .dnge-current{color:#f6ff80;}
.dnge-counter--full .dnge-sep,.dnge-counter--full .dnge-max{color:rgba(246,255,128,0.5);}
.dnge-regen-row{display:flex;align-items:center;gap:6px;font-size:12px;color:rgba(174,214,241,0.5);}
.dnge-regen-time{color:#a8dcff;font-weight:700;}
.dnge-regen-full{font-size:12px;font-weight:700;color:#6ddc90;}
.dnge-bar-wrap{display:flex;flex-direction:column;gap:6px;}
.dnge-bar-track{height:8px;border-radius:4px;background:rgba(255,255,255,0.06);overflow:hidden;border:1px solid rgba(80,180,255,0.15);}
.dnge-bar-fill{height:100%;border-radius:4px;background:linear-gradient(90deg,rgba(52,152,219,0.8),rgba(100,200,255,0.9));transition:width 0.4s ease;box-shadow:0 0 8px rgba(80,200,255,0.4);}
.dnge-bar-fill--full{background:linear-gradient(90deg,rgba(200,240,60,0.8),rgba(246,255,100,0.95));box-shadow:0 0 10px rgba(246,255,80,0.5);}
.dnge-bar-labels{display:flex;gap:2px;}
.dnge-bar-tick{flex:1;height:4px;border-radius:2px;background:rgba(255,255,255,0.06);}
.dnge-bar-tick--active{background:rgba(80,180,255,0.5);}
.dnge-bar-fill--full~.dnge-bar-labels .dnge-bar-tick--active{background:rgba(246,255,80,0.6);}
.dnge-full-row{display:flex;align-items:center;gap:7px;padding:10px 14px;border-radius:8px;background:rgba(52,152,219,0.06);border:1px solid rgba(52,152,219,0.15);font-size:12px;color:rgba(174,214,241,0.6);}
.dnge-full-row strong{color:#a8dcff;}
/* ── Пополнение энергии за кристаллы ── */
.dnge-refill-form{margin-top:4px;display:flex;flex-direction:column;gap:8px;}
.dnge-refill-btn{width:100%;display:flex;align-items:center;justify-content:space-between;padding:13px 16px;border-radius:10px;background:rgba(52,152,219,0.14);border:1px solid rgba(52,152,219,0.35);color:#aed6f1;font-size:14px;font-weight:600;cursor:pointer;transition:background 0.2s,border-color 0.2s;-webkit-tap-highlight-color:transparent;}
.dnge-refill-btn:hover{background:rgba(52,152,219,0.25);border-color:rgba(52,152,219,0.55);}
.dnge-refill-btn:active{background:rgba(52,152,219,0.32);}
.dnge-refill-btn--disabled{opacity:0.38;cursor:not-allowed;}
.dnge-refill-btn--disabled:hover{background:rgba(52,152,219,0.14);border-color:rgba(52,152,219,0.35);}
.dnge-refill-label{display:flex;align-items:center;gap:7px;}
.dnge-refill-cost{display:flex;align-items:center;gap:5px;font-size:13px;color:rgba(174,214,241,0.6);}
.dnge-refill-balance{font-size:12px;color:rgba(174,214,241,0.4);text-align:center;}
.dnge-refill-balance--low{color:rgba(231,76,60,0.7);}
.dnge-refill-need{color:rgba(231,76,60,0.9);}
.dnge-balance-card{background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.07);border-radius:12px;padding:14px 16px 12px;margin-top:2px;}
.dnge-balance-label{font-size:11px;text-transform:uppercase;letter-spacing:0.06em;color:rgba(255,255,255,0.25);text-align:center;margin-bottom:12px;}
.dnge-balance-cols{display:flex;align-items:stretch;gap:0;}
.dnge-balance-col{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;padding:4px 8px;}
.dnge-balance-icon{display:block;filter:drop-shadow(0 1px 4px rgba(0,0,0,0.4));}
.dnge-balance-val{font-size:18px;font-weight:700;color:rgba(255,255,255,0.88);line-height:1.1;}
.dnge-balance-sub{font-size:11px;color:rgba(255,255,255,0.28);}
.dnge-balance-col--low .dnge-balance-val{color:rgba(231,76,60,0.85);}
.dnge-balance-col--low .dnge-balance-sub{color:rgba(231,76,60,0.5);}
.dnge-balance-lack{color:rgba(231,76,60,0.9);font-weight:600;}
.dnge-balance-divider{width:1px;background:rgba(255,255,255,0.07);margin:4px 0;align-self:stretch;}

.dnge-about{display:flex;flex-direction:column;gap:0;border-radius:12px;background:rgba(255,255,255,0.03);border:1px solid rgba(52,152,219,0.12);overflow:hidden;margin-top:4px;}
.dnge-about-title{font-size:11px;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;color:rgba(174,214,241,0.4);padding:10px 14px 8px;border-bottom:1px solid rgba(52,152,219,0.1);}
.dnge-about-item{display:flex;align-items:center;gap:10px;padding:10px 14px;font-size:13px;color:rgba(174,214,241,0.65);border-bottom:1px solid rgba(52,152,219,0.07);}
.dnge-about-item:last-child{border-bottom:none;}
.dnge-about-item svg{flex-shrink:0;color:#60d0ff;opacity:0.7;}

/* Состояние ошибки/загрузки */
.dngm2-state { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; padding:48px 24px; color:rgba(174,214,241,0.55); font-size:14px; font-weight:600; text-align:center; }
.dngm2-state strong { color:#aed6f1; }

/* ── Страница миссий подземелья (dngms-*) ── */

/* Топбар — бейдж */
.dngms-topbadge{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:20px;background:rgba(220,140,30,0.15);border:1px solid rgba(220,140,30,0.38);color:#f5cc60;font-size:13px;font-weight:800;}
.dngms-topbadge-dot{width:7px;height:7px;border-radius:50%;background:#f5cc40;box-shadow:0 0 6px rgba(245,204,64,0.9);animation:dngms-dot-pulse 1.4s ease-in-out infinite;}
@keyframes dngms-dot-pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:0.6;transform:scale(0.75)}}

/* Правило */
.dngms-rule{display:flex;align-items:center;gap:7px;font-size:12px;color:rgba(174,214,241,0.38);font-weight:600;padding:0 2px;}
.dngms-rule svg{width:13px;height:13px;flex-shrink:0;opacity:0.5;}

/* Сетка карточек */
.dngms-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;}

/* Карточка — портретная */
.dngms-card{display:flex;flex-direction:column;border-radius:16px;overflow:hidden;border:1px solid color-mix(in srgb,var(--dc,#3498db) 22%,transparent);background:rgba(10,18,30,0.9);transition:transform 0.18s,box-shadow 0.18s;position:relative;}
.dngms-card:active{transform:scale(0.98);}
.dngms-card--ready{border-color:color-mix(in srgb,var(--dc,#f5cc40) 50%,transparent);animation:dngms-ready-pulse 2.6s ease-in-out infinite;}
@keyframes dngms-ready-pulse{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--dc,#f5cc40) 0%,transparent)}50%{box-shadow:0 0 18px 2px color-mix(in srgb,var(--dc,#f5cc40) 20%,transparent)}}

/* Верхняя зона — изображение */
.dngms-card-top{position:relative;height:110px;display:flex;align-items:center;justify-content:center;overflow:hidden;background:radial-gradient(ellipse at 50% 80%,color-mix(in srgb,var(--dc,#3498db) 18%,transparent) 0%,transparent 70%);}
.dngms-card-bg{position:absolute;inset:0;background:linear-gradient(180deg,color-mix(in srgb,var(--dc,#3498db) 12%,transparent) 0%,transparent 100%);pointer-events:none;}
.dngms-card-img{height:95px;width:auto;object-fit:contain;position:relative;filter:drop-shadow(0 6px 16px color-mix(in srgb,var(--dc,#3498db) 45%,transparent));}
.dngms-card--ready .dngms-card-img{filter:drop-shadow(0 6px 20px color-mix(in srgb,var(--dc,#f5cc40) 55%,transparent));}
.dngms-card-dot{position:absolute;top:8px;right:8px;width:9px;height:9px;border-radius:50%;background:var(--dc,#f5cc40);border:2px solid #070e18;box-shadow:0 0 8px var(--dc,#f5cc40);animation:dngms-dot-pulse 1.4s ease-in-out infinite;}

/* Нижняя зона — инфо */
.dngms-card-body{display:flex;flex-direction:column;gap:8px;padding:10px 11px 12px;border-top:1px solid color-mix(in srgb,var(--dc,#3498db) 15%,transparent);background:rgba(6,12,22,0.7);}
.dngms-card-name{font-size:13px;font-weight:800;color:var(--dc,#ddeeff);line-height:1.15;min-height:30px;display:flex;align-items:center;}

/* Пипки */
.dngms-pips{display:flex;gap:4px;}
.dngms-pip{flex:1;height:5px;border-radius:3px;background:rgba(255,255,255,0.07);transition:background 0.2s,box-shadow 0.2s;}
.dngms-pip--on{background:color-mix(in srgb,var(--dc,#3498db) 80%,#fff 20%);box-shadow:0 0 6px color-mix(in srgb,var(--dc,#3498db) 50%,transparent);}
.dngms-kills-row{display:flex;align-items:baseline;gap:3px;}
.dngms-kills-val{font-size:18px;font-weight:900;color:#e8f4fd;line-height:1;letter-spacing:-0.02em;}
.dngms-kills-sep{font-size:13px;color:rgba(174,214,241,0.3);font-weight:600;}
.dngms-kills-lbl{font-size:10px;color:rgba(174,214,241,0.35);font-weight:600;margin-left:2px;}

/* Награда */
.dngms-reward{display:flex;align-items:center;gap:7px;padding:7px 9px;border-radius:9px;background:color-mix(in srgb,var(--dc,#f5cc40) 8%,transparent);border:1px solid color-mix(in srgb,var(--dc,#f5cc40) 22%,transparent);}
.dngms-chest-link{display:flex;flex-shrink:0;}
.dngms-chest-img{height:32px;width:auto;object-fit:contain;filter:drop-shadow(0 2px 8px color-mix(in srgb,var(--dc,#f5cc40) 40%,transparent));}
.dngms-chest-count{font-size:18px;font-weight:900;color:var(--dc,#f5cc40);letter-spacing:-0.02em;line-height:1;}

/* Кнопка */
.dngms-claim-btn{display:flex;align-items:center;justify-content:center;width:100%;padding:9px 0;border-radius:9px;background:color-mix(in srgb,var(--dc,#f5cc40) 20%,transparent);border:1px solid color-mix(in srgb,var(--dc,#f5cc40) 50%,transparent);color:var(--dc,#f5cc40);font-size:13px;font-weight:800;cursor:pointer;letter-spacing:0.03em;transition:background 0.15s,transform 0.1s;-webkit-tap-highlight-color:transparent;}
.dngms-claim-btn:hover{background:color-mix(in srgb,var(--dc,#f5cc40) 32%,transparent);}
.dngms-claim-btn:active{transform:scale(0.97);}

/* Модальное окно */
.dngms-modal{position:fixed;inset:0;z-index:200;display:none;align-items:flex-end;justify-content:center;background:rgba(0,0,0,0.7);backdrop-filter:blur(5px);padding:0;}
.dngms-modal.active{display:flex;}
.dngms-modal-box{width:100%;max-width:420px;background:linear-gradient(180deg,#0e2035 0%,#080f1a 100%);border:1px solid rgba(220,160,30,0.25);border-bottom:none;border-radius:20px 20px 0 0;padding:8px 22px 32px;display:flex;flex-direction:column;align-items:center;gap:14px;box-shadow:0 -10px 60px rgba(0,0,0,0.8),0 0 40px rgba(220,140,20,0.08);position:relative;animation:dngms-slide-up 0.28s cubic-bezier(0.34,1.4,0.64,1);}
@keyframes dngms-slide-up{from{transform:translateY(100%);opacity:0}to{transform:translateY(0);opacity:1}}
.dngms-modal-handle{width:40px;height:4px;border-radius:2px;background:rgba(255,255,255,0.1);margin-bottom:4px;flex-shrink:0;}
.dngms-modal-close{position:absolute;top:16px;right:16px;width:30px;height:30px;border-radius:8px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.08);color:rgba(174,214,241,0.4);cursor:pointer;transition:background 0.15s,color 0.15s;-webkit-tap-highlight-color:transparent;}
.dngms-modal-close svg{width:14px;height:14px;}
.dngms-modal-close:hover{background:rgba(231,76,60,0.15);border-color:rgba(231,76,60,0.3);color:#e74c3c;}
.dngms-modal-glow{position:absolute;top:0;left:50%;transform:translateX(-50%);width:180px;height:1px;background:linear-gradient(90deg,transparent,rgba(220,160,30,0.6),transparent);}
.dngms-modal-chest-wrap{display:flex;align-items:center;justify-content:center;padding:4px 0;}
.dngms-modal-chest-img{height:100px;width:auto;object-fit:contain;filter:drop-shadow(0 6px 20px rgba(220,160,30,0.5));animation:dngms-chest-float 3s ease-in-out infinite;}
@keyframes dngms-chest-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
.dngms-modal-title{font-size:20px;font-weight:900;color:#e8f4fd;letter-spacing:-0.01em;}
.dngms-modal-avail{font-size:13px;color:rgba(174,214,241,0.45);padding:4px 16px;border-radius:20px;background:rgba(255,255,255,0.04);border:1px solid rgba(52,152,219,0.12);}
.dngms-modal-avail strong{color:#f5cc60;font-weight:800;}
.dngms-qty-wrap{display:flex;align-items:center;gap:12px;width:100%;}
.dngms-qty-btn{width:46px;height:46px;border-radius:12px;background:rgba(52,152,219,0.1);border:1px solid rgba(52,152,219,0.28);color:#a8dcff;font-size:22px;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background 0.15s,border-color 0.15s,transform 0.1s;-webkit-tap-highlight-color:transparent;flex-shrink:0;}
.dngms-qty-btn:hover{background:rgba(52,152,219,0.22);border-color:rgba(52,152,219,0.5);}
.dngms-qty-btn:active{transform:scale(0.93);}
.dngms-qty-btn:disabled{opacity:0.35;cursor:default;}
.dngms-qty-center{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;}
.dngms-qty-input{width:100%;text-align:center;background:rgba(255,255,255,0.05);border:1px solid rgba(52,152,219,0.22);border-radius:10px;color:#e8f4fd;font-size:26px;font-weight:900;padding:8px 0;outline:none;-moz-appearance:textfield;}
.dngms-qty-input::-webkit-outer-spin-button,.dngms-qty-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}
.dngms-qty-unit{font-size:10px;font-weight:700;color:rgba(174,214,241,0.35);letter-spacing:0.08em;text-transform:uppercase;}
.dngms-modal-actions{display:flex;gap:10px;width:100%;}
.dngms-modal-btn{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:14px 0;border-radius:12px;font-size:15px;font-weight:800;border:none;cursor:pointer;transition:background 0.15s,border-color 0.15s,transform 0.1s;-webkit-tap-highlight-color:transparent;}
.dngms-modal-btn:active{transform:scale(0.97);}
.dngms-modal-btn--cancel{background:rgba(52,152,219,0.08);border:1px solid rgba(52,152,219,0.2);color:rgba(174,214,241,0.6);}
.dngms-modal-btn--cancel:hover{background:rgba(52,152,219,0.16);}
.dngms-modal-btn--confirm{background:linear-gradient(135deg,rgba(200,120,10,0.35),rgba(240,180,30,0.25));border:1px solid rgba(220,160,30,0.55);color:#f5cc60;box-shadow:0 4px 16px rgba(220,140,20,0.15);}
.dngms-modal-btn--confirm:hover{background:linear-gradient(135deg,rgba(220,140,20,0.45),rgba(255,200,50,0.35));border-color:rgba(240,185,50,0.75);color:#ffe080;}

/* ── Центрированный модал сбора сундуков (dngclaim-*) ── */
.dngclaim-overlay{position:fixed;inset:0;z-index:300;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,0.76);backdrop-filter:blur(6px);padding:16px;}
.dngclaim-overlay.active{display:flex;}
.dngclaim-box{background:linear-gradient(160deg,#0e1f35 0%,#06101e 100%);border:1px solid rgba(52,152,219,0.22);border-radius:20px;padding:28px 24px 24px;width:100%;max-width:340px;display:flex;flex-direction:column;align-items:center;gap:16px;position:relative;box-shadow:0 24px 80px rgba(0,0,0,0.9),0 0 0 1px rgba(255,255,255,0.03);animation:dngclaim-in 0.22s cubic-bezier(0.34,1.4,0.64,1);}
@keyframes dngclaim-in{from{opacity:0;transform:scale(0.88)}to{opacity:1;transform:scale(1)}}
.dngclaim-close{position:absolute;top:14px;right:14px;width:28px;height:28px;border-radius:8px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.08);color:rgba(174,214,241,0.4);cursor:pointer;transition:background 0.15s,color 0.15s;}
.dngclaim-close svg{width:13px;height:13px;}
.dngclaim-close:hover{background:rgba(231,76,60,0.15);border-color:rgba(231,76,60,0.3);color:#e74c3c;}
.dngclaim-chest{height:90px;width:auto;object-fit:contain;filter:drop-shadow(0 6px 20px rgba(220,160,30,0.45));animation:dngms-chest-float 3s ease-in-out infinite;}
.dngclaim-title{font-size:19px;font-weight:900;color:#e8f4fd;letter-spacing:-0.01em;text-align:center;}
.dngclaim-avail{font-size:12px;color:rgba(174,214,241,0.45);padding:4px 14px;border-radius:20px;background:rgba(255,255,255,0.04);border:1px solid rgba(52,152,219,0.12);}
.dngclaim-avail strong{color:#f5cc60;font-weight:800;}
.dngclaim-qty{display:flex;align-items:center;width:100%;border-radius:12px;overflow:hidden;border:1px solid rgba(52,152,219,0.2);background:rgba(255,255,255,0.03);}
.dngclaim-qty-btn{width:48px;height:50px;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:rgba(52,152,219,0.08);border:none;color:#aed6f1;font-size:22px;font-weight:300;cursor:pointer;transition:background 0.15s;-webkit-tap-highlight-color:transparent;}
.dngclaim-qty-btn:hover{background:rgba(52,152,219,0.18);}
.dngclaim-qty-btn:disabled{opacity:0.3;cursor:default;}
.dngclaim-qty-input{flex:1;height:50px;background:transparent;border:none;border-left:1px solid rgba(52,152,219,0.12);border-right:1px solid rgba(52,152,219,0.12);color:#e8f4fd;font-size:22px;font-weight:700;text-align:center;outline:none;min-width:0;}
.dngclaim-actions{display:flex;gap:10px;width:100%;}
.dngclaim-btn{flex:1;height:48px;display:flex;align-items:center;justify-content:center;border-radius:12px;font-size:15px;font-weight:800;cursor:pointer;transition:background 0.15s,transform 0.1s;-webkit-tap-highlight-color:transparent;}
.dngclaim-btn:active{transform:scale(0.97);}
.dngclaim-btn--cancel{background:rgba(52,152,219,0.08);border:1px solid rgba(52,152,219,0.2);color:rgba(174,214,241,0.6);}
.dngclaim-btn--cancel:hover{background:rgba(52,152,219,0.16);}
.dngclaim-btn--confirm{background:linear-gradient(135deg,rgba(200,120,10,0.4),rgba(240,180,30,0.28));border:1px solid rgba(220,160,30,0.6);color:#f5cc60;box-shadow:0 4px 16px rgba(220,140,20,0.15);}
.dngclaim-btn--confirm:hover{background:linear-gradient(135deg,rgba(220,140,20,0.5),rgba(255,200,50,0.4));border-color:rgba(240,185,50,0.8);color:#ffe080;}

/* ── Локация / битва (dngbt-*) ── */
.dngbt-stage-badge{display:inline-flex;align-items:center;gap:5px;padding:5px 12px;border-radius:20px;background:color-mix(in srgb,var(--lc,#3498db) 16%,transparent);border:1px solid color-mix(in srgb,var(--lc,#3498db) 40%,transparent);color:var(--lc,#3498db);font-size:12px;font-weight:800;letter-spacing:0.04em;box-shadow:0 0 10px color-mix(in srgb,var(--lc,#3498db) 20%,transparent);}
.dngbt-stage-label{font-size:9px;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;opacity:0.65;}
.dngbt-stage-num{font-size:13px;font-weight:900;letter-spacing:0.02em;}

/* ── Арена ── */
.dngbt-arena{position:relative;border-radius:18px;overflow:hidden;background:#030810;border:1px solid color-mix(in srgb,var(--lc,#3498db) 28%,transparent);box-shadow:0 8px 48px rgba(0,0,0,0.75);}
.dngbt-arena::after{content:'';position:absolute;inset:0;pointer-events:none;z-index:0;background:radial-gradient(ellipse 90% 55% at 50% 100%,color-mix(in srgb,var(--lc,#3498db) 28%,transparent) 0%,transparent 70%);}
.dngbt-dead-overlay{position:absolute;inset:0;z-index:20;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;background:rgba(0,0,0,0.82);backdrop-filter:blur(3px);border-radius:18px;padding:24px;}
.dngbt-dead-skull{font-size:52px;line-height:1;filter:drop-shadow(0 0 18px rgba(200,50,50,0.7));}
.dngbt-dead-title{font-size:22px;font-weight:900;color:#fff;text-shadow:0 0 20px rgba(220,50,50,0.8),0 2px 8px rgba(0,0,0,0.9);}
.dngbt-dead-sub{font-size:14px;color:rgba(255,255,255,0.6);text-align:center;}
.dngbt-dead-sub strong{color:#ffd050;}
.dngbt-dead-btn{margin-top:8px;padding:11px 28px;border-radius:12px;background:rgba(231,76,60,0.15);border:1px solid rgba(231,76,60,0.45);color:#e05555;font-size:14px;font-weight:700;text-decoration:none;transition:background 0.18s,border-color 0.18s;}
.dngbt-dead-btn:hover{background:rgba(231,76,60,0.28);border-color:rgba(231,76,60,0.7);}
.dngbt-arena-bg{position:absolute;inset:0;pointer-events:none;background-size:cover;background-position:center center;}
.dngbt-arena-split{display:none;}

/* HUD — верхняя полоса (имена + HP + VS) */
.dngbt-hud{display:flex;align-items:center;gap:12px;padding:18px 16px 16px;position:relative;z-index:2;}
.dngbt-hud-side{flex:1;display:flex;flex-direction:column;gap:7px;min-width:0;}
.dngbt-hud-enemy{align-items:flex-end;}
.dngbt-hud-name{font-size:16px;font-weight:900;color:#e0eeff;letter-spacing:0.03em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:0 1px 6px rgba(0,0,0,0.8);}
.dngbt-hud-name--enemy{color:#ffbbbb;}
.dngbt-hud-bar{position:relative;width:100%;height:18px;border-radius:10px;background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.08);overflow:hidden;}
.dngbt-hud-enemy .dngbt-hud-bar{transform:scaleX(-1);}
.dngbt-hud-enemy .dngbt-hp-text{transform:scaleX(-1);}
.dngbt-hud-vs{flex-shrink:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;}

/* Энергокольцо VS */
.dngbt-energy-ring{position:relative;width:64px;height:64px;display:flex;align-items:center;justify-content:center;}
.dngbt-energy-svg{position:absolute;inset:0;width:100%;height:100%;}
.dngbt-vs-text{font-size:14px;font-weight:900;color:#fff;letter-spacing:0.14em;position:relative;z-index:1;text-shadow:0 0 14px color-mix(in srgb,var(--lc,#3498db) 95%,transparent);}

/* Сцена — персонажи */
.dngbt-stage{display:flex;align-items:flex-end;position:relative;z-index:1;}
.dngbt-stage-side{flex:1;display:flex;align-items:flex-end;justify-content:center;position:relative;padding:14px 8px 18px;}
.dngbt-stage-center{flex-shrink:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0 6px 10px;}

/* Напольное свечение — скрыто, заменено фоновым изображением */
.dngbt-fighter-glow{display:none;}

/* Накопление крови */
.dngbt-blood{position:relative;z-index:2;padding:7px 14px 8px;background:rgba(0,0,0,0.52);border-top:1px solid color-mix(in srgb,var(--lc,#3498db) 20%,transparent);}
.dngbt-blood-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:5px;}
.dngbt-blood-left{display:flex;align-items:center;gap:5px;}
.dngbt-blood-icon{color:var(--lc,#3498db);flex-shrink:0;opacity:0.85;}
.dngbt-blood-label{font-size:10px;color:rgba(255,255,255,0.42);text-transform:uppercase;letter-spacing:0.09em;font-weight:600;}
.dngbt-blood-right{display:flex;align-items:baseline;gap:3px;}
.dngbt-blood-cur{font-size:12px;font-weight:800;color:var(--lc,#3498db);}
.dngbt-blood-sep{font-size:10px;color:rgba(255,255,255,0.25);}
.dngbt-blood-max{font-size:10px;color:rgba(255,255,255,0.35);font-weight:600;}
.dngbt-blood-bar{height:3px;background:rgba(255,255,255,0.08);border-radius:2px;overflow:hidden;}
.dngbt-blood-fill{height:100%;background:var(--lc,#3498db);border-radius:2px;transition:width 0.4s ease;}

/* Аватары */
.dngbt-avatar{width:150px;height:150px;background-size:contain;background-position:center bottom;background-repeat:no-repeat;flex-shrink:0;position:relative;z-index:1;transition:transform 0.2s;}
.dngbt-avatar--hero{filter:drop-shadow(0 8px 16px rgba(0,0,0,0.9));}
.dngbt-avatar--enemy{display:block;text-decoration:none;-webkit-tap-highlight-color:transparent;cursor:pointer;filter:drop-shadow(0 8px 16px rgba(0,0,0,0.9));transition:transform 0.15s;}
.dngbt-avatar--enemy:hover{transform:scale(1.08) translateY(-6px);}
.dngbt-avatar--enemy:active{transform:scale(0.92);}

/* ── Эффект удара мечом ── */
@keyframes dngbt-hit-shake{0%,100%{transform:translateX(0) rotate(0deg)}18%{transform:translateX(-10px) rotate(-3deg)}38%{transform:translateX(7px) rotate(2deg)}58%{transform:translateX(-4px) rotate(-1deg)}78%{transform:translateX(2px)}}
@keyframes dngbt-slash{0%{clip-path:inset(0 100% 0 0 round 2px);opacity:1}30%{clip-path:inset(0 0% 0 0 round 2px);opacity:1}100%{clip-path:inset(0 0% 0 0 round 2px);opacity:0}}
/* Тряска аватаров */
.dngbt-stage-enemy.dngbt-hit .dngbt-avatar--enemy{animation:dngbt-hit-shake 0.32s ease-out;will-change:transform;}
.dngbt-stage-hero.dngbt-hit .dngbt-avatar--hero{animation:dngbt-hit-shake 0.32s ease-out;will-change:transform;}
/* Главный разрез */
.dngbt-stage-enemy.dngbt-hit::before{content:'';position:absolute;top:46%;left:6%;width:88%;height:5px;margin-top:-2px;background:linear-gradient(to right,rgba(255,255,255,0.05),rgba(255,255,255,1) 25%,rgba(255,230,140,0.95) 60%,rgba(255,255,255,0.05));transform:rotate(-34deg);border-radius:3px;animation:dngbt-slash 0.4s cubic-bezier(0.15,0,0.35,1) forwards;pointer-events:none;z-index:5;}
/* Второй параллельный разрез — враг */
.dngbt-stage-enemy.dngbt-hit::after{content:'';position:absolute;top:54%;left:22%;width:58%;height:3px;margin-top:-1px;background:linear-gradient(to right,rgba(255,255,255,0.03),rgba(255,215,110,0.75) 40%,rgba(255,255,255,0.03));transform:rotate(-34deg);border-radius:2px;animation:dngbt-slash 0.36s cubic-bezier(0.15,0,0.35,1) 0.05s forwards;pointer-events:none;z-index:5;}
/* Красный slash по герою (дракон бьёт справа — угол зеркальный) */
.dngbt-stage-hero.dngbt-hit::before{content:'';position:absolute;top:46%;left:6%;width:88%;height:5px;margin-top:-2px;background:linear-gradient(to right,rgba(255,40,40,0.05),rgba(255,60,60,1) 25%,rgba(255,160,100,0.95) 60%,rgba(255,40,40,0.05));transform:rotate(34deg);border-radius:3px;animation:dngbt-slash 0.4s cubic-bezier(0.15,0,0.35,1) forwards;pointer-events:none;z-index:5;}
.dngbt-stage-hero.dngbt-hit::after{content:'';position:absolute;top:54%;left:20%;width:58%;height:3px;margin-top:-1px;background:linear-gradient(to right,rgba(255,40,40,0.03),rgba(220,80,60,0.75) 40%,rgba(255,40,40,0.03));transform:rotate(34deg);border-radius:2px;animation:dngbt-slash 0.36s cubic-bezier(0.15,0,0.35,1) 0.05s forwards;pointer-events:none;z-index:5;}

/* Счётчик врагов */
.dngbt-enemies-count{display:flex;flex-direction:column;align-items:center;gap:1px;padding:3px 8px;border-radius:8px;background:color-mix(in srgb,var(--lc,#3498db) 10%,rgba(3,8,16,0.7));border:1px solid color-mix(in srgb,var(--lc,#3498db) 28%,transparent);}
.dngbt-enemies-icon{display:none;}
.dngbt-enemies-num{font-size:11px;font-weight:900;color:color-mix(in srgb,var(--lc,#3498db) 90%,#fff);line-height:1;text-shadow:0 0 8px color-mix(in srgb,var(--lc,#3498db) 60%,transparent);}
.dngbt-enemies-label{font-size:7px;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:color-mix(in srgb,var(--lc,#3498db) 50%,rgba(174,214,241,0.3));}

/* HP бар */
.dngbt-hp-bar{position:relative;width:100%;height:14px;border-radius:7px;background:rgba(0,0,0,0.55);border:1px solid rgba(255,255,255,0.07);overflow:hidden;}
.dngbt-hp-fill{height:100%;border-radius:10px;transition:width 0.5s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden;}
.dngbt-hp-fill::after{content:'';position:absolute;top:2px;left:6px;right:6px;height:4px;border-radius:2px;background:rgba(255,255,255,0.2);}
.dngbt-hp-fill--green{background:linear-gradient(90deg,#1a6e40,#27ae60,#43d47a);box-shadow:0 0 10px rgba(46,204,113,0.35);}
.dngbt-hp-fill--red{background:linear-gradient(90deg,#6e1a1a,#c0392b,#e05555);box-shadow:0 0 10px rgba(192,57,43,0.35);}
.dngbt-hp-text{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;color:rgba(255,255,255,0.88);text-shadow:0 1px 4px rgba(0,0,0,0.9);letter-spacing:0.02em;}

/* Inline-статы в HUD (под HP-баром) */
.dngbt-hud-stats{display:flex;gap:14px;margin-top:1px;}
.dngbt-hud-enemy .dngbt-hud-stats{justify-content:flex-end;}
.dngbt-hud-stat{display:inline-flex;align-items:center;gap:5px;font-size:15px;font-weight:800;line-height:1;}
.dngbt-hud-stat svg{opacity:0.8;flex-shrink:0;width:14px;height:14px;}
.dngbt-hud-stat--atk{color:#ff8850;}
.dngbt-hud-stat--def{color:#5ab8ff;}

/* Урон */
.dngbt-dmg{position:absolute;top:8px;font-size:22px;font-weight:900;text-shadow:0 2px 12px rgba(0,0,0,0.9);pointer-events:none;z-index:10;}
.dngbt-dmg--self{left:50%;animation:dngbt-dmg-self 2.4s ease-out forwards;color:#ff3030;}
.dngbt-dmg--enemy{right:12px;animation:dngbt-dmg-enemy 2.4s ease-out forwards;color:#ff3030;}
@keyframes dngbt-dmg-self{0%{opacity:1;transform:translateX(-50%) translateY(0) scale(1.3)}8%{opacity:1;transform:translateX(-50%) translateY(-8px) scale(1.05)}50%{opacity:1;transform:translateX(-50%) translateY(-14px) scale(1.0)}100%{opacity:0;transform:translateX(-50%) translateY(-44px) scale(0.8)}}
@keyframes dngbt-dmg-enemy{0%{opacity:1;transform:translateY(0) scale(1.3)}8%{opacity:1;transform:translateY(-8px) scale(1.05)}50%{opacity:1;transform:translateY(-14px) scale(1.0)}100%{opacity:0;transform:translateY(-44px) scale(0.8)}}

/* Кнопка атаки */
.dngbt-attack-btn{display:flex;align-items:center;justify-content:center;gap:10px;padding:17px 20px;border-radius:16px;background:linear-gradient(135deg,color-mix(in srgb,var(--lc,#3498db) 28%,#060c16),color-mix(in srgb,var(--lc,#3498db) 16%,#060c16));border:1px solid color-mix(in srgb,var(--lc,#3498db) 55%,transparent);color:#fff;font-size:16px;font-weight:900;text-decoration:none;letter-spacing:0.06em;text-transform:uppercase;transition:all 0.15s;-webkit-tap-highlight-color:transparent;box-shadow:0 4px 24px color-mix(in srgb,var(--lc,#3498db) 30%,transparent),inset 0 1px 0 rgba(255,255,255,0.1);position:relative;overflow:hidden;}
.dngbt-attack-btn::before{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.06),transparent);transform:translateX(-100%);transition:transform 0.4s;}
.dngbt-attack-btn:hover::before{transform:translateX(100%);}
.dngbt-attack-btn:hover{box-shadow:0 6px 32px color-mix(in srgb,var(--lc,#3498db) 45%,transparent),inset 0 1px 0 rgba(255,255,255,0.15);transform:translateY(-1px);}
.dngbt-attack-btn:active{transform:scale(0.97) translateY(0);}
.dngbt-attack-btn svg{width:20px;height:20px;flex-shrink:0;filter:drop-shadow(0 0 6px currentColor);}
@keyframes dngbt-pulse{0%,100%{transform:translateY(0) scale(1);opacity:1;}50%{transform:translateY(-2px) scale(1.01);opacity:0.88;}}
.dngbt-attack-btn{box-shadow:0 4px 24px color-mix(in srgb,var(--lc,#3498db) 35%,transparent);animation:dngbt-pulse 2.5s ease-in-out infinite;will-change:transform;}

/* ── Адаптив арены для маленьких экранов ── */
@media(max-width:400px){
  .dngbt-hud{padding:10px 10px 10px;gap:6px;}
  .dngbt-hud-name{font-size:12px;}
  .dngbt-hud-bar{height:14px;}
  .dngbt-hud-stats{gap:8px;margin-top:0;}
  .dngbt-hud-stat{font-size:12px;gap:3px;}
  .dngbt-hud-stat svg{width:11px;height:11px;}
  .dngbt-energy-ring{width:48px;height:48px;}
  .dngbt-vs-text{font-size:11px;}
  .dngbt-avatar{width:100px;height:100px;}
  .dngbt-stage-side{padding:8px 4px 12px;}
  .dngbt-dmg{font-size:16px;}
  .dngbt-attack-btn{padding:13px 16px;font-size:14px;}
  .dngbt-attack-btn svg{width:16px;height:16px;}
}

/* Уведомления */
.dngd-notice{padding:10px 14px;border-radius:12px;font-size:13px;font-weight:600;text-align:center;margin-bottom:2px;}
.dngd-notice--success{background:rgba(46,204,113,0.1);border:1px solid rgba(46,204,113,0.25);color:#6ddc90;}
.dngd-notice--error{background:rgba(231,76,60,0.1);border:1px solid rgba(231,76,60,0.25);color:#ff7b6b;}
.dngd-notice--warn{background:rgba(230,180,0,0.1);border:1px solid rgba(230,180,0,0.3);color:#f0c040;display:flex;align-items:center;justify-content:center;gap:7px;}

/* Лог боя */
.dngbt-log{border-radius:16px;background:linear-gradient(180deg,#07101e 0%,#040a13 100%);border:1px solid color-mix(in srgb,var(--lc,#3498db) 22%,transparent);overflow:hidden;box-shadow:0 4px 24px rgba(0,0,0,0.4),inset 0 1px 0 rgba(255,255,255,0.04);}
.dngbt-log-head{display:flex;align-items:center;gap:8px;padding:11px 14px 10px;font-size:10px;font-weight:800;letter-spacing:0.14em;text-transform:uppercase;color:color-mix(in srgb,var(--lc,#3498db) 85%,#fff);background:linear-gradient(90deg,color-mix(in srgb,var(--lc,#3498db) 14%,transparent),transparent 80%);border-bottom:1px solid color-mix(in srgb,var(--lc,#3498db) 16%,transparent);}
.dngbt-log-count{margin-left:auto;background:color-mix(in srgb,var(--lc,#3498db) 18%,transparent);border:1px solid color-mix(in srgb,var(--lc,#3498db) 30%,transparent);color:color-mix(in srgb,var(--lc,#3498db) 90%,#fff);font-size:10px;font-weight:800;padding:1px 7px;border-radius:20px;letter-spacing:0;}
.dngbt-log-list{display:flex;flex-direction:column;}
.dngbt-log-row{display:flex;align-items:center;gap:0;padding:0;border-bottom:1px solid rgba(255,255,255,0.03);transition:background 0.15s;position:relative;overflow:hidden;}
.dngbt-log-row:last-child{border-bottom:none;}
.dngbt-log-row:hover{background:rgba(255,255,255,0.025);}
.dngbt-log-accent{width:3px;flex-shrink:0;align-self:stretch;background:color-mix(in srgb,var(--lc,#3498db) 60%,transparent);}
.dngbt-log-row--kill .dngbt-log-accent{background:linear-gradient(180deg,#4ade80,#22c55e);box-shadow:0 0 6px rgba(74,222,128,0.5);}
.dngbt-log-row--kill{background:linear-gradient(90deg,rgba(74,222,128,0.06) 0%,transparent 60%);}
.dngbt-log-row--kill:hover{background:linear-gradient(90deg,rgba(74,222,128,0.10) 0%,rgba(74,222,128,0.02) 60%);}
.dngbt-log-icon{width:28px;flex-shrink:0;display:flex;align-items:center;justify-content:center;color:color-mix(in srgb,var(--lc,#3498db) 55%,rgba(180,210,240,0.3));}
.dngbt-log-row--kill .dngbt-log-icon{color:#4ade80;}
.dngbt-log-left{display:flex;align-items:center;gap:4px;min-width:0;flex:1;padding:8px 8px 8px 0;}
.dngbt-log-nick{color:#c8dff0;font-weight:700;text-decoration:none;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.dngbt-log-nick:hover{color:#fff;text-decoration:underline;}
.dngbt-log-row--kill .dngbt-log-nick{color:#86efac;}
.dngbt-log-vip{color:#f5cc40;}
.dngbt-log-kill{display:inline-flex;align-items:center;gap:5px;background:linear-gradient(135deg,rgba(74,222,128,0.18),rgba(34,197,94,0.10));color:#4ade80;font-weight:800;font-size:11px;padding:3px 10px 3px 8px;border-radius:20px;border:1px solid rgba(74,222,128,0.30);white-space:nowrap;flex-shrink:0;margin-right:10px;text-shadow:0 0 8px rgba(74,222,128,0.5);box-shadow:0 0 10px rgba(74,222,128,0.12);}
.dngbt-log-hit{display:flex;align-items:baseline;gap:1px;flex-shrink:0;margin-right:10px;padding:8px 0;color:#ff5f5f;font-weight:900;font-size:15px;text-shadow:0 0 12px rgba(255,60,60,0.5);letter-spacing:-0.03em;}
.dngbt-log-hit-minus{color:rgba(255,95,95,0.55);font-weight:900;font-size:12px;}

/* Чат */
.dngbt-chat{display:flex;flex-direction:column;gap:8px;}
.dngbt-chat-form{display:flex;gap:8px;}
.dngbt-chat-input{flex:1;background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.08);border-radius:12px;padding:11px 14px;color:#e8f4fd;font-size:13px;outline:none;transition:border-color 0.15s;}
.dngbt-chat-input::placeholder{color:rgba(174,214,241,0.25);}
.dngbt-chat-input:focus{border-color:color-mix(in srgb,var(--lc,#3498db) 45%,transparent);}
.dngbt-chat-send{width:42px;height:42px;border-radius:12px;background:color-mix(in srgb,var(--lc,#3498db) 14%,transparent);border:1px solid color-mix(in srgb,var(--lc,#3498db) 30%,transparent);color:var(--lc,#3498db);cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all 0.15s;-webkit-tap-highlight-color:transparent;}
.dngbt-chat-send svg{width:15px;height:15px;}
.dngbt-chat-send:hover{background:color-mix(in srgb,var(--lc,#3498db) 24%,transparent);}
.dngbt-chat-msgs{display:flex;flex-direction:column;gap:4px;}
.dngbt-chat-panel .dngbt-chat-msgs{padding:8px 10px;background:none;border:none;}
.dngbt-chat-msg{display:flex;align-items:flex-start;gap:5px;flex-wrap:wrap;font-size:12px;padding:2px 0;}
.dngbt-chat-time{color:rgba(174,214,241,0.2);font-size:10px;flex-shrink:0;padding-top:1px;}
.dngbt-chat-author{color:#aed6f1;font-weight:700;text-decoration:none;font-size:12px;}
.dngbt-chat-author:hover{color:#fff;}
.dngbt-chat-text{color:rgba(174,214,241,0.65);word-break:break-word;}
.dngbt-chat-empty{font-size:12px;color:rgba(174,214,241,0.2);text-align:center;padding:10px 0;}

/* ── Чат FAB + панель ── */
/* FAB зона — sticky внутри игрового контейнера */
.dngbt-fab-zone{position:sticky;bottom:16px;height:52px;overflow:visible;display:flex;justify-content:flex-end;align-items:flex-end;pointer-events:none;z-index:50;padding-right:16px;margin-bottom:-52px;}

/* FAB кнопка */
.dngbt-chat-fab{pointer-events:auto;position:relative;width:52px;height:52px;border-radius:50%;background:linear-gradient(135deg,color-mix(in srgb,var(--lc,#3498db) 38%,#060c16),color-mix(in srgb,var(--lc,#3498db) 22%,#060c16));border:1.5px solid color-mix(in srgb,var(--lc,#3498db) 60%,transparent);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 20px color-mix(in srgb,var(--lc,#3498db) 40%,transparent),0 2px 8px rgba(0,0,0,0.6);transition:transform 0.2s,box-shadow 0.2s;-webkit-tap-highlight-color:transparent;padding:0;flex-shrink:0;}
.dngbt-chat-fab:hover{transform:scale(1.08);box-shadow:0 6px 28px color-mix(in srgb,var(--lc,#3498db) 55%,transparent),0 2px 8px rgba(0,0,0,0.6);}
.dngbt-chat-fab:active{transform:scale(0.92);}
.dngbt-chat-fab-icon{width:22px;height:22px;position:absolute;transition:opacity 0.18s,transform 0.18s;}
.dngbt-chat-fab-icon--close{opacity:0;transform:rotate(-90deg) scale(0.7);}
.dngbt-chat-fab--open .dngbt-chat-fab-icon--open{opacity:0;transform:rotate(90deg) scale(0.7);}
.dngbt-chat-fab--open .dngbt-chat-fab-icon--close{opacity:1;transform:rotate(0deg) scale(1);}
.dngbt-chat-fab-badge{position:absolute;top:-4px;right:-4px;min-width:18px;height:18px;padding:0 4px;border-radius:9px;background:#e74c3c;color:#fff;font-size:10px;font-weight:800;display:flex;align-items:center;justify-content:center;border:2px solid #070e18;pointer-events:none;}

/* Панель — fixed, но координаты проставляет JS по реальному положению FAB */
.dngbt-chat-panel{pointer-events:none;position:fixed;z-index:999;width:min(340px,calc(100vw - 32px));max-height:calc(100dvh - 110px);background:#0a1520;border:1px solid color-mix(in srgb,var(--lc,#3498db) 30%,transparent);border-radius:18px;box-shadow:0 12px 48px rgba(0,0,0,0.8),0 0 0 1px rgba(255,255,255,0.04);display:flex;flex-direction:column;overflow:hidden;opacity:0;transform:translateY(12px) scale(0.95);transition:opacity 0.2s cubic-bezier(.4,0,.2,1),transform 0.2s cubic-bezier(.4,0,.2,1);}
.dngbt-chat-panel--open{opacity:1;transform:translateY(0) scale(1);pointer-events:auto;}

/* Шапка панели */
.dngbt-chat-panel-head{padding:13px 16px 11px;background:linear-gradient(135deg,color-mix(in srgb,var(--lc,#3498db) 18%,#060c16),color-mix(in srgb,var(--lc,#3498db) 10%,#070e18));border-bottom:1px solid color-mix(in srgb,var(--lc,#3498db) 20%,transparent);flex-shrink:0;display:flex;align-items:center;gap:8px;}
.dngbt-chat-panel-head::before{content:'';display:block;width:7px;height:7px;border-radius:50%;background:var(--lc,#3498db);box-shadow:0 0 8px var(--lc,#3498db);flex-shrink:0;animation:dngbt-dot-pulse 2s ease-in-out infinite;}
@keyframes dngbt-dot-pulse{0%,100%{opacity:1;box-shadow:0 0 6px var(--lc,#3498db)}50%{opacity:0.5;box-shadow:0 0 12px var(--lc,#3498db)}}
.dngbt-chat-panel-title{font-size:11px;font-weight:800;letter-spacing:0.1em;text-transform:uppercase;color:#e8f4fd;}

/* Сообщения */
.dngbt-chat-panel .dngbt-chat-msgs{flex:1;overflow-y:auto;padding:8px 10px;display:flex;flex-direction:column;gap:4px;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,0.08) transparent;}
.dngbt-chat-panel .dngbt-chat-msg{display:flex;flex-direction:column;gap:3px;padding:7px 10px;border-radius:10px;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.05);transition:background 0.15s,border-color 0.15s;}
.dngbt-chat-panel .dngbt-chat-msg:hover{background:rgba(255,255,255,0.06);border-color:color-mix(in srgb,var(--lc,#3498db) 20%,transparent);}
.dngbt-chat-msg-meta{display:flex;align-items:center;gap:4px;}
.dngbt-chat-panel .dngbt-chat-author{color:color-mix(in srgb,var(--lc,#3498db) 95%,#fff);font-weight:800;text-decoration:none;font-size:12px;line-height:1;}
.dngbt-chat-panel .dngbt-chat-author:hover{color:#fff;}
.dngbt-chat-panel .dngbt-chat-time{color:rgba(174,214,241,0.25);font-size:9px;font-family:monospace;margin-left:auto;}
.dngbt-chat-bubble{color:rgba(210,230,248,0.85);font-size:12px;word-break:break-word;line-height:1.45;padding-left:2px;}
.dngbt-chat-panel .dngbt-chat-empty{padding:20px 16px;text-align:center;font-size:12px;color:rgba(174,214,241,0.2);}

/* Форма ввода */
.dngbt-chat-panel .dngbt-chat-form{display:flex;gap:8px;padding:10px 10px;background:rgba(0,0,0,0.25);border-top:1px solid rgba(255,255,255,0.06);flex-shrink:0;}
.dngbt-chat-panel .dngbt-chat-input{flex:1;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.1);border-radius:12px;padding:9px 13px;color:#e8f4fd;font-size:13px;outline:none;transition:border-color 0.15s,background 0.15s;}
.dngbt-chat-panel .dngbt-chat-input::placeholder{color:rgba(174,214,241,0.25);}
.dngbt-chat-panel .dngbt-chat-input:focus{border-color:color-mix(in srgb,var(--lc,#3498db) 55%,transparent);background:rgba(255,255,255,0.08);}
.dngbt-chat-panel .dngbt-chat-send{width:38px;height:38px;border-radius:12px;background:color-mix(in srgb,var(--lc,#3498db) 22%,transparent);border:1px solid color-mix(in srgb,var(--lc,#3498db) 45%,transparent);color:var(--lc,#3498db);cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all 0.15s;-webkit-tap-highlight-color:transparent;box-shadow:0 2px 8px color-mix(in srgb,var(--lc,#3498db) 20%,transparent);}
.dngbt-chat-panel .dngbt-chat-send:hover{background:color-mix(in srgb,var(--lc,#3498db) 35%,transparent);transform:scale(1.05);}
.dngbt-chat-panel .dngbt-chat-send:active{transform:scale(0.93);}
.dngbt-chat-panel .dngbt-chat-send svg{width:14px;height:14px;}

.castleCreateButton{
    background: url(/public/img/castle/create.png) 0 59% / 100% no-repeat;
    position: absolute;
    display: inline-block;
    width: 40%;
    height: 100%;
    margin: 0px !important;
    background-size: 100% auto;
    background-position: 0% 50%;
    left: 30%;
}
.castleScrollButton{
    background: url(/public/img/castle/menu.png) 0 59% / 100% no-repeat;
    position: absolute;
    display: inline-block;
    width: 130px;
    height: 70px;
    margin: 0px !important;
    background-size: 100% auto;
    background-position: 0% 50%;
    left: 2%;
    bottom: 7%;
    z-index: 10;
}
.castleResButton{
    background: url(/public/img/castle/res.png) 0 59% / 100% no-repeat;
    position: absolute;
    display: inline-block;
    width: 23%;
    height: 93%;
    margin: 0px !important;
    background-size: 100% auto;
    background-position: 0% 50%;
    right: 2%;
    bottom: 7%;
}
.castlePosition{
    position: absolute;
    display: inline-block;
    width: 10%;
    height: 5%;
    margin: 0px !important;
    background-size: 100% auto;
    background-position: 0% 50%;
}
.back2{
    background: #40545f;
        padding: 10px 0px 15px 0px;
        background: linear-gradient(to right, #40545f, #517489, #40545f);
}
.infoMain{
    background: linear-gradient(to right, #10192021, #16161680, #10192021);
    color: #FED36B;
    padding: 10px;
}
.gameName{
    background: linear-gradient(#f5d952, #ef830f);
    text-shadow: none;
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    filter: drop-shadow(0 2px 0 #000) drop-shadow(0 3px 1px rgba(0, 0, 0, .25));
}
.gameNameSize {
    
    font-size: 10vw;
} 

@media (min-width: 600px){
    .gameNameSize {
        font-size: 60px;
    }   
}
.gameNameDiscription{
    color: #f3cfb4;
}
.gameNameDiscriptionSize{
    font-size: 3vw;
}
@media (min-width: 600px) {
    .gameNameDiscriptionSize{
        font-size: 18px;
    }
}


.gameNameText{
    text-shadow: 0 0 2px #fff, 
             /* выпуклость надписи */
             -1px -1px 0 hsl(80, 70%, 35%),
             -2px -2px 1px hsl(80, 70%, 35%),
             /* переход к подложке */  
             -2px -2px 2px hsl(80, 10%, 15%), 
             /* подложка */                            
             -2px -2px 0 7px hsl(60, 80%, 95%),
             -3px -3px 0 7px hsl(60, 10%, 65%),
             -4px -4px 0 7px hsl(60, 10%, 65%),
             -5px -5px 0 7px hsl(60, 10%, 65%),
             -6px -6px 0 7px hsl(60, 10%, 65%),
             /* тень подложки */                            
             -7px -7px 4px 8px hsl(60, 10%, 40%),
             -8px -8px 6px 9px hsl(60, 10%, 55%);
}

.bigName{
    color: #FFFADD;
    font-size: 18px;
}
.rel {
    position: relative;
}
.absolute{
    position: absolute;
}
.inh{
    position: inherit
}
.onlineOval{
    background: #856A4D;
    border-radius: 15px;
    position: inherit;
    padding: 5px 15px;
    top: -6px;
    border: solid 2px #8F7962;
    box-shadow: 0px 0px 0px 1px #0a0a0a, -1px -1px 0px 0px #675a5a21, inset 0px -2px 0px 0px #100e0cb5, inset 0px 1px 0px 0px #2f2f2f, 0px 0px 0px 3px #674f4894, inset 0px 2px 12px 1px #6f3505;
}
a {
	
	color: #fff;
}
.aTDN{
    text-decoration: none;
}
form{
    margin: 0;
}
hr{
    margin: 0;
    padding: 0;
    height: 0;
    border: none;
    /*border-top: 1px solid #000000bd;
    border-bottom: 1px solid #ffffff26;*/
    border-top: 1px #000000 solid;
    border-bottom: 1px #425763 solid;
}
.hr2 {
    margin: 0;
    padding: 0;
    height: 0;
    border: none;
    border-top: 1px #000000 solid;
    border-bottom: 1px #7691a1 solid;
}
.repaColor1{
   filter: hue-rotate(70deg);
}
.repaColor2{
    filter: hue-rotate(264deg);
}
.repaColor3{
    filter: hue-rotate(170deg);
    
}
.repaColor4{
    filter: hue-rotate(220deg);
}
.repaColor5{
    filter: hue-rotate(330deg);
}

.knockAnimate {
  
  
  -webkit-animation: knock 5s infinite;
  animation: knock 5s infinite;
}
@keyframes knock {
  0%   { filter: saturate(2) hue-rotate(0deg); }
  50%  { filter: saturate(1) hue-rotate(200deg); }
  100% { filter: saturate(2) hue-rotate(0deg); }
}
@-webkit-keyframes knock {
  0%   { -webkit-filter: saturate(2) hue-rotate(0deg); }
  50%  { -webkit-filter: saturate(1) hue-rotate(200deg); }
  100% { -webkit-filter: saturate(2) hue-rotate(0deg); }
}


.row {
    display: flex;
    flex-wrap: wrap;
}
.w100 {
    width: 100%;
}
.w95 {
    width: 95%;
}
.w90 {
    width: 90%;
}
.w60 {
    width: 60%;
}
.w50 {
    width: 50%;
}
.w33 {
    width: 33%;
}
.w20 {
    width: 100%;
}
.col2 {
    flex: 0 0 50%;
    max-width: 50%;
}
.col4 {
    flex: 0 0 25%;
    max-width: 25%;
}
.col7 {
    flex: 0 0 14.28%;
    max-width: 14.28%;
}

.col3-320 {
	    flex: 0 0 33%;
	    max-width: 33%;
	}
@media (min-width: 320px){
    .col5 {
        flex: 0 0 20%;
        max-width: 20%;
    }	
}
@media (min-width: 400px){
	.col3 {
	    flex: 0 0 33%;
	    max-width: 33%;
	}
}
.fontSizeCastle {
    font-size: calc(var(--cfw) * 0.013);
    font-family: Segoe UI, Roboto, Arial, sans-serif;
}

.fz12{
	font-size: 12px;
}
.fz16{
    font-size: 16px;
}
.fz18{
    font-size: 18px;
}
.strokeText{
    text-shadow: 
    -0   -1px 1px #000000,
     0   -1px 1px #000000,
    -0    1px 1px #000000,
     0    1px 1px #000000,
    -1px -0   1px #000000,
     1px -0   1px #000000,
    -1px  0   1px #000000,
     1px  0   1px #000000,
    -1px -1px 1px #000000,
     1px -1px 1px #000000,
    -1px  1px 1px #000000,
     1px  1px 1px #000000,
    -1px -1px 1px #000000,
     1px -1px 1px #000000,
    -1px  1px 1px #000000,
     1px  1px 1px #000000;
}

.bg {
    background: #34474f;
    border-left: solid 1px #000000;
    border-right: solid 1px #000000;
    border-radius: 2px;
    box-shadow: inset 0px 0px 2px 1px #ffffff1f, 0px 0px 12px 0px #00000059;
}
.p-5-10{
    padding: 5px 10px;
}
.p20-0-0-0{
	padding: 20px 0px 0px 0px;
}
.p3-0{
	padding: 3px 0;
}
.p4-0{
    padding: 4px 0;
}
.p3{
	padding: 3px;
}
.p7-0{
    padding: 7px 0;
}
.p1{
    padding: 1px;
}
.p2{
    padding: 2px;
}
.p10{
    padding: 10px;
}
.p10-0{
    padding: 10px 0px;
}
.p0-10{
    padding: 0px 10px;
}
.p10-20{
    padding: 10px 20px;
}
.p20{
    padding: 20px;
}
.p0-5{
    padding: 0px 5px;
}
.p5persent{
    padding: 5%;
}
.p2persent{
    padding: 2%;
}
.mTop10{
    margin-top: 10px;
}
.mTop3 {
    margin-top: 3px;
}
.mLeft10{
    margin-left: 10px;
}
.content{
    background: #1f2d3b;
    border-radius: 5px;
}
.center{
    text-align: center;
}
.right{
    text-align: right;
}
.fr {
    float: right;
}
.fl {
    float: left;
}
.inputForm {
    color: #ffffff;
    border: solid 1px #AAB4BD;
    background: #3C474D;
    padding: 9px 10px;
    border-radius: 3px;
    box-shadow: inset 0px 1px 0px 0px #2E393F, inset 0px -1px 0px 0px #4b4b4b, 0px -1px 0px 0px #505D66, 0px 1px 0px 0px #3F4E55, 0px 0px 4px 2px #22303942;
}
.inputForm2 {
    color: #290B06;
    border: none;
    background: #CAC9C2;
    border-radius: 3px;
    box-shadow: inset 0px -1px 1px 0px #ffffffbd, inset 0px 3px 1px 0px #0000008c;
    padding: 10px 5px;
    width: 97%;
}
/* Эффект при наведении и фокусе */
.inputForm2:focus,
.inputForm2:hover {
    border-color: rgba(255, 255, 255, 0.5); /* Более заметная рамка при взаимодействии */
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15); /* Тень становится глубже */
}

/* Дизайн placeholder-текста */
.inputForm2::-webkit-input-placeholder {
    color: rgba(255, 255, 255, 0.5); /* Светлый серый цвет placeholder */
}

.inputForm2:-ms-input-placeholder {
    color: rgba(255, 255, 255, 0.5);
}

.inputForm2::placeholder {
    color: rgba(255, 255, 255, 0.5);
}
.button{
	background: #83a6a9;
    border: solid 0px;
    box-shadow: inset 0px 0px 1px 2px #ffffff2e, inset 0px -1px 0px 1px #0000006b, 0px 0px 0px 1px #00000069, 0px 4px 2px 0px #0000002e, inset 0px 1px 0px 0px #ffffff59;
    border-radius: 1px;
    color: #fff;
    padding: 9px 20px;
    color: #ffffff;
    border-radius: 3px;
    text-shadow: 1px 1px 2px #000000;
}
.button2 {
    border-radius: 10px;
    padding: 9px 20px;
    background: #CAC9C2;
    border: 1px solid #0e0e0e;
    box-shadow: inset 0px 30px 16px 0px #ffffff42, inset 0 3px 2px 0px #ffffffeb, inset 0 -2px 2px 0px #0000007d;
    text-shadow: 1px 1px 2px #AB958D;
    color: #28100E;
}
.errorColor{
	color: red;
}
.red{
	color: #ff7b7b;
}
.green{
    color: #16bd16;
}
.topPanel{
	background: #112933;
    padding: 5px;
/*    margin: 4px 0px;*/
    border-top: solid 1px #8A8FA0;
    border-bottom: solid 1px #8A8FA0;
    color: #ffffff;
    box-shadow: 0px 1px 3px 0px #000000, 0px 0px 0px 0px #000000, inset 0px 13px 20px 0px #ffffff24, inset 0px -13px 20px 0px #00000085;
}
.vs{
	vertical-align: sub;
}
.vm {
    vertical-align: middle;
}
.minW100{
	min-width: 100px;
}
.minW150{
	min-width: 150px;
}
.minW180{
    min-width: 180px;
}
.minW200{
    min-width: 200px;
}
.tdlt{
	text-decoration: line-through;
}
.mapBack{
    background: url(/public/img/back/grass.png) repeat;
}
.pml0{
    padding: 0px;
    margin: 0;
    line-height: 0px;
}
.buttonBig{
    background: #945232;
    border-radius: 5px;
    padding: 5px;
    margin: 5px 0px;
    border-top: solid 1px #fff;
    border-bottom: solid 1px #000;
    box-shadow: inset 0px 0px 5px 1px #C96C40;
}
.tableInfoBack1{
    background: #455d67;
}
.tableInfoBack2{
    background: #2f4047;
}
.tableInfoBackGold{
    background: #D1B89B;
}
.nav_button_on {
    background-color: #7c9aa7;
    border-color: #ffffff;
    box-shadow: 1px;
    box-shadow: inset 1px 1px 0px 0px #fdfdfda1, inset -1px -1px 0px 0px #00000040;
}
.nav_button_off {
    background-color: #7c9aa7;
    box-shadow: inset -1px -1px 0px 0px #fdfdfdba, inset 1px 1px 0px 0px #0000006b;
}
.nav {
    padding: 3px;
    font-size: 17px;
    border: solid 1px #000;
    min-width: 26px;
    border-radius: 0px;
    text-shadow: 1px 1px 2px #000000;
}

.nav2 {
    padding: 8px;
    font-size: 20px;
    border: solid 1px #000;
    min-width: 26px;
    border-radius: 3px;
    text-shadow: 1px 1px 2px #000000;
}
.nav_button_on2 {
    background-color: #96B0C0;
    box-shadow: 1px;
    box-shadow: inset 1px 1px 0px 0px #fdfdfda1, inset -1px -1px 0px 0px #00000040;
}
.nav_button_off2 {
    background-color: #96b0c09e;
    box-shadow: inset -1px -1px 0px 0px #fdfdfdba, inset 1px 1px 0px 0px #0000006b;
}


.displayIB{
    display:inline-block
}
.checkbox {
    position: absolute;
    z-index: -1;
    opacity: 0;
    margin: 1px 0 0 0px;
}
.checkbox + label {
    position: relative;
    padding: 0px 0px 0px 40px;
    cursor: pointer;
}
.checkbox + label:before {
    content: '';
    position: absolute;
    top: 1px;
    left: 0;
    width: 33px;
    height: 15px;
    border-radius: 13px;
    background: #676d7f;
    box-shadow: inset 0 2px 3px rgba(0,0,0,.2);
    transition: .2s;
}
.checkbox + label:after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 12px;
    height: 13px;
    border-radius: 10px;
    background: #f5f5f5;
    box-shadow: 0 2px 5px rgba(0,0,0,.3);
    transition: .2s;
}
.checkbox:checked + label:before {
    background: #b4bac9;
}
.checkbox:checked + label:after {
    left: 20px;
}
.checkbox:focus + label:before {
}
.bflex {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.header .headerCenterBlock {
    width: calc(100% - 28%);
    text-align: center;
}
.header .headerLeftBlock, .header .headerRightBlock {
    width: 14%;
    display: inline-block;
}
.slot{
    border: solid 1px #101010;
    box-shadow: inset 0px 0px 0px 1px #BEA68B;
    border-radius: 4px;
    background: #112933;
    padding: 2px;
}
.profileSlotLeft{
    width: 25%;
}
.profileSlotCenter{
    width: calc(100% - 50%);
}
.profileSlotRight{
    width: 25%;
}
.item {
    display: block;
    height: 70px;
    position: relative;
    overflow: hidden;
    border: 1px solid #000;
    text-decoration: none;
    border-radius: 5px;
    background: #E3473B;
    box-shadow: inset 0px -2px 0px 1px #00000047, inset 0px 2px 1px 1px #ffffff52;
}
.itemImg {
    height: 30px;
    padding: 12px 0 2px 0;
    background: url(https://bratki.mobi/images/klyak.png) no-repeat 50% 4px;
}
.menuItem {
    height: auto;
    padding: 5px 0;
    text-align: left;
    background: #6C757E;
    display: block;
    position: relative;
    overflow: hidden;
    white-space: nowrap;
    font-size: 14px;
    border: 1px solid #000;
    text-decoration: none;
    border-radius: 3px;
}
.menuItem img {
    vertical-align: middle;
    margin: 0 3px;
}
.right{
    text-align: right;
}
.left{
    text-align: left;
}
.imgParamGeneral{
    max-height: 200px;
    max-width: 200px;
}
.yellow{
    color:yellow;
}
.earth{
    width: 100%;
    background-image: url(/public/img/map/earth.png);
    height: 100%;
    background-size: cover;
}
.leftimg {
    float:left; /* Выравнивание по левому краю */
    margin: 7px 7px 7px 0; /* Отступы вокруг картинки */
   }
.footBack{
    background: #A8A092;
}
.backHp{
    background: #a99f8d;
}
.dungeonMap {
    background-image: url(/public/img/dungeon/map.jpg);
    padding-bottom: 133%;
    position: relative;
    background-repeat: repeat-y;
    background-position: 50% 0;
    background-size: 100% auto;
    display: block !important;
}
.poisonCaveMap{
    background-image: url(/public/img/dungeon/maps/1.jpg);
    padding-bottom: 146%;
    position: relative;
    background-repeat: repeat-y;
    background-position: 50% 0;
    background-size: 100% auto;
    display: block !important;
}
.fieryAbyssMap{
    background-image: url(/public/img/dungeon/maps/2.jpg);
    padding-bottom: 146%;
    position: relative;
    background-repeat: repeat-y;
    background-position: 50% 0;
    background-size: 100% auto;
    display: block !important;
}
.steleMap{
    background-image: url(/public/img/dungeon/maps/3.jpg);
    padding-bottom: 138%;
    position: relative;
    background-repeat: repeat-y;
    background-position: 50% 0;
    background-size: 100% auto;
    display: block !important;
}
.dungeonPosition{
    position: absolute;
    display: inline-block;
    margin: 0px !important;
    background-size: 100% auto;
    background-position: 0% 50%;
    cursor: pointer;
}

.dungeon1Position:hover{
    filter: drop-shadow(-6px 0px 6px #27a450);
}
.dungeon2Position:hover{
    filter: drop-shadow(7px -5px 6px #ae5927);
}
.dungeon3Position:hover{
    filter: drop-shadow(-7px 3px 6px #558ed1);
}
.dungeonExitPosition:hover{
    filter: drop-shadow(-7px 3px 6px #6fa0c7);
}

.dungeonImg1 {
    background-image: url(/public/img/dungeon/dungeon1.png);
}

.dungeonImg2 {
    background-image: url(/public/img/dungeon/dungeon2.png);
}

.dungeonImg3 {
    background-image: url(/public/img/dungeon/dungeon3.png);
}
.dungeonImg1Click {
    background-image: url(/public/img/dungeon/clickDungeon1.png);
}
.dungeonImg2Click {
    background-image: url(/public/img/dungeon/clickDungeon2.png);
}
.dungeonImg3Click {
    background-image: url(/public/img/dungeon/clickDungeon3.png);
}
.dungeonImgExitClick {
    background-image: url(/public/img/dungeon/exit.png);
}
.dungeonLevelPanel {
    background-image: url(/public/img/dungeon/panelLevel.png);
}
.dungeonMissionsPanel {
    background-image: url(/public/img/main/aute.png);
}
.dungeon1Position {
    width: 45%;
    height: 45%;
    right: 0%;
    top: 49%;
}
.dungeon2Position {
    width: 61%;
    height: 48%;
    left: 0%;
    bottom: 0%;
}
.dungeon3Position {
    width: 26%;
    height: 30%;
    right: 0%;
    top: 16%;
}
.dungeonExitPosition {
    width: 29%;
    height: 14%;
    left: 25%;
    top: 24%;
}
.dungeonLevelPanelPosition {
    width: 40%;
    height: 15%;
    left: 2%;
    top: 2%;
}
.dungeonMissionsPosition {
    width: 34%;
    height: 5%;
    right: 2%;
    top: 5%;
}
.dungeonMissionsPositionText {
    width: 100%;
    height: 55%;
    top: 19%;
}
.dungeonImgFilter{
    filter: grayscale(1);
}


.fontSizeDungeon1Name {
    font-size: 5vw;
}
.fontSizeDungeon2Name {
    font-size: 6vw;
}
.fontSizeDungeon3Name {
    font-size: 6vw;
}
.fontSizeDungeonExitName {
    font-size: 5vw;
}
.fontSizeDungeonLevelPanel {
    font-size: 6.5vw;
}
.fontSizeDungeonOnlinePanel {
    font-size: 4.5vw;
}
.fontSizeMissionsPanel {
    font-size: 4.5vw;
}
@media (min-width: 600px) {
    .fontSizeDungeon1Name {
        font-size: 30px;
    }
    .fontSizeDungeon2Name {
        font-size: 36px;
    }
    .fontSizeDungeon3Name {
        font-size: 36px;
    }
    .fontSizeDungeonExitName {
        font-size: 30px;
    }
    .fontSizeDungeonLevelPanel {
        font-size: 40px;
    }
    .fontSizeDungeonOnlinePanel {
        font-size: 24px;
    }
    .fontSizeMissionsPanel {
        font-size: 24px;
    }
}
.dungeonPosition1Name{
    color: #78bf7c;
    position: absolute;
    z-index: 5;
    left: 29%;
    width: 68%;
    bottom: 30%;
    text-align: center;
    background: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0.1)), color-stop(30%, rgba(0, 0, 0, 0.5)), color-stop(70%, rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0.1)));
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.5) 30%, rgba(0, 0, 0, 0.5) 70%, rgba(0, 0, 0, 0.1) 100%);
}
.dungeonPosition2Name{
    color: #dbca72;
    position: absolute;
    z-index: 5;
    left: 8%;
    width: 68%;
    bottom: 13%;
    text-align: center;
    background: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0.1)), color-stop(30%, rgba(0, 0, 0, 0.5)), color-stop(70%, rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0.1)));
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.5) 30%, rgba(0, 0, 0, 0.5) 70%, rgba(0, 0, 0, 0.1) 100%);
}
.dungeonPosition3Name{
    color: #ae93dd;
    position: absolute;
    z-index: 5;
    left: 29%;
    width: 68%;
    bottom: 30%;
    text-align: center;
    background: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0.1)), color-stop(30%, rgba(0, 0, 0, 0.5)), color-stop(70%, rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0.1)));
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.5) 30%, rgba(0, 0, 0, 0.5) 70%, rgba(0, 0, 0, 0.1) 100%);
}


.dungeonPosition1NameOff{
    color: #78bf7c;
    position: absolute;
    z-index: 5;
    left: 29%;
    width: 68%;
    bottom: 30%;
    text-align: center;
    background: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0.1)), color-stop(30%, rgba(0, 0, 0, 0.5)), color-stop(70%, rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0.1)));
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.5) 30%, rgba(0, 0, 0, 0.5) 70%, rgba(0, 0, 0, 0.1) 100%);
}
.dungeonPosition2NameOff{
    color: #dbca72;
    position: absolute;
    z-index: 5;
    left: 8%;
    width: 68%;
    bottom: 13%;
    text-align: center;
    background: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0.1)), color-stop(30%, rgba(0, 0, 0, 0.5)), color-stop(70%, rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0.1)));
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.5) 30%, rgba(0, 0, 0, 0.5) 70%, rgba(0, 0, 0, 0.1) 100%);
}
.dungeonPosition3NameOff{
    color: #ae93dd;
    position: absolute;
    z-index: 5;
    left: 0%;
    width: 100%;
    bottom: 17%;
    text-align: center;
    background: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0.1)), color-stop(30%, rgba(0, 0, 0, 0.5)), color-stop(70%, rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0.1)));
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.5) 30%, rgba(0, 0, 0, 0.5) 70%, rgba(0, 0, 0, 0.1) 100%);
}


.dungeonPositionExitName{
    color: #3b80bf;
    position: absolute;
    z-index: 5;
    left: 14%;
    width: 68%;
    bottom: 13%;
    text-align: center;
    background: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0.1)), color-stop(30%, rgba(0, 0, 0, 0.5)), color-stop(70%, rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0.1)));
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.5) 30%, rgba(0, 0, 0, 0.5) 70%, rgba(0, 0, 0, 0.1) 100%);
}
.dungeonLevelPanelLevel{
    color: #ffffff;
    position: absolute;
    z-index: 5;
    left: 2%;
    width: 40%;
    bottom: 33%;
    text-align: center;
}
.dungeonPanelOnline{
    color: #ffffff;
    position: absolute;
    z-index: 5;
    left: 47%;
    width: 41%;
    bottom: 49%;
    text-align: center;
}
.dungeonStageImgPosition1 {
    background-image: url(/public/img/dungeon/stage/1.png);
}
.dungeonStageImgUnit1 {
    background-image: url(/public/img/dungeon/units/1.png);
}
.dungeonStageImgUnit2 {
    background-image: url(/public/img/dungeon/units/2.png);
}
.dungeonStageImgUnit3 {
    background-image: url(/public/img/dungeon/units/3.png);
}
.dungeonStageImgUnit4 {
    background-image: url(/public/img/dungeon/units/4.png);
}
.dungeonStageImgUnit5 {
    background-image: url(/public/img/dungeon/units/5.png);
}
.dungeonStageImgUnit6 {
    background-image: url(/public/img/dungeon/units/6.png);
}
.fontSizeDungeonLevelStage {
    font-size: 2.5vw;
}
@media (min-width: 600px) {
    .fontSizeDungeonLevelStage {
        font-size: 14px;
    }
}

.dungeonLevelStage {
    color: #ffffff;
    position: absolute;
    z-index: 5;
    left: 0%;
    width: 100%;
    bottom: 0%;
    text-align: center;
    
}
.dungeonLevelStageText {
    padding: 0 5%;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    background: #0d161b;
    border-radius: 13px;
    border: solid 1px #b3b3b3;
}
.dungeonStagepoisonCavePosition1 {
    width: 12%;
    height: 10%;
    left: 70%;
    top: 6%;
}
.dungeonStagepoisonCavePosition2 {
    width: 12%;
    height: 10%;
    left: 87%;
    top: 9%;
}
.dungeonStagepoisonCavePosition3 {
    width: 12%;
    height: 10%;
    left: 50%;
    top: 9%;
}
.dungeonStagepoisonCavePosition4 {
    width: 12%;
    height: 10%;
    left: 62%;
    top: 19%;
}
.dungeonStagepoisonCavePosition5 {
    width: 12%;
    height: 10%;
    left: 32%;
    top: 18%;
}
.dungeonStagepoisonCavePosition6 {
    width: 12%;
    height: 10%;
    left: 52%;
    top: 29%;
}
.dungeonStagepoisonCavePosition7 {
    
    width: 12%;
    height: 10%;
    left: 40%;
    top: 39%;
}
.dungeonStagepoisonCavePosition8 {
    width: 12%;
    height: 10%;
    left: 61%;
    top: 40%;
}
.dungeonStagepoisonCavePosition9 {
    width: 12%;
    height: 10%;
    left: 85%;
    top: 43%;
}
.dungeonStagepoisonCavePosition10 {
    width: 12%;
    height: 10%;
    left: 48%;
    top: 50%;
}
.dungeonStagepoisonCavePosition11 {
    width: 12%;
    height: 10%;
    left: 30%;
    top: 69%;
}
.dungeonStagepoisonCavePosition12 {
    width: 12%;
    height: 10%;
    left: 20%;
    top: 79%;
}
.dungeonStagepoisonCavePosition13 {
    width: 12%;
    height: 10%;
    left: 40%;
    top: 81%; 
}
.dungeonStagepoisonCavePosition14 {
    
    width: 12%;
    height: 10%;
    left: 61%;
    top: 83%;
}
.dungeonStagepoisonCavePosition15 {
    width: 12%;
    height: 10%;
    left: 52%;
    top: 70%;
}
.dungeonStagepoisonCavePosition16 {
    width: 11%;
    height: 7%;
    left: 64%;
    top: 66%;
}
.dungeonStagepoisonCavePosition17 {
    width: 11%;
    height: 7%;
    left: 69%;
    top: 54%;
}
.dungeonStagepoisonCavePosition18 {
    width: 11%;
    height: 7%;
    left: 88%;
    top: 55%;
}
.dungeonStagepoisonCavePosition19 {
    width: 11%;
    height: 7%;
    left: 85%;
    top: 68%;
}
.dungeonStagepoisonCavePosition20 {
    width: 17%;
    height: 12%;
    left: 14%;
    top: 51%;
}
.dungeonStage2ImgPosition1 {
    background-image: url(/public/img/dungeon/stage/2.png);
}
.dungeonStage3ImgPosition1 {
    background-image: url(/public/img/dungeon/stage/3.png);
}
.dungeonStagefieryAbyssPosition1 {
    width: 8%;
    height: 7%;
    left: 23%;
    top: 17%;
}
.dungeonStagefieryAbyssPosition2 {
    width: 8%;
    height: 7%;
    left: 33%;
    top: 21%;
}
.dungeonStagefieryAbyssPosition3 {
    width: 8%;
    height: 7%;
    left: 36%;
    top: 29%;
}
.dungeonStagefieryAbyssPosition4 {
    width: 8%;
    height: 7%;
    left: 34%;
    top: 37%;
}
.dungeonStagefieryAbyssPosition5 {
    width: 8%;
    height: 7%;
    left: 33%;
    top: 45%;
}
.dungeonStagefieryAbyssPosition6 {
    width: 8%;
    height: 7%;
    left: 6%;
    top: 54%;
}
.dungeonStagefieryAbyssPosition7 {
    width: 8%;
    height: 7%;
    left: 27%;
    top: 62%;
}
.dungeonStagefieryAbyssPosition8 {
    width: 8%;
    height: 7%;
    left: 61%;
    top: 62%;
}
.dungeonStagefieryAbyssPosition9 {
    width: 8%;
    height: 7%;
    left: 49%;
    top: 64%;
}
.dungeonStagefieryAbyssPosition10 {
    width: 8%;
    height: 7%;
    left: 36%;
    top: 69%;
}
.dungeonStagefieryAbyssPosition11 {
    width: 8%;
    height: 7%;
    left: 39%;
    top: 77%;
}
.dungeonStagefieryAbyssPosition12 {
    width: 8%;
    height: 7%;
    left: 47%;
    top: 84%;
}
.dungeonStagefieryAbyssPosition13 {
    width: 8%;
    height: 7%;
    left: 59%;
    top: 86%;
}
.dungeonStagefieryAbyssPosition14 {
    width: 8%;
    height: 7%;
    left: 72%;
    top: 86%;
}
.dungeonStagefieryAbyssPosition15 {
    width: 8%;
    height: 7%;
    left: 84%;
    top: 84%;
}
.dungeonStagefieryAbyssPosition16 {
    width: 10%;
    height: 7%;
    left: 51%;
    top: 21%;
}
.dungeonStagefieryAbyssPosition17 {
    width: 10%;
    height: 7%;
    left: 62%;
    top: 12%;
}
.dungeonStagefieryAbyssPosition18 {
    width: 10%;
    height: 7%;
    left: 1%;
    top: 39%;
}
.dungeonStagefieryAbyssPosition19 {
    width: 10%;
    height: 7%;
    left: 15%;
    top: 38%;
}
.dungeonStagefieryAbyssPosition20 {
    width: 10%;
    height: 7%;
    left: 77%;
    top: 25%;
}
.dungeonStagefieryAbyssPosition21 {
    width: 10%;
    height: 7%;
    left: 86%;
    top: 17%;
}
.dungeonStagefieryAbyssPosition22 {
    width: 10%;
    height: 7%;
    left: 51%;
    top: 44%;
}
.dungeonStagefieryAbyssPosition23 {
    width: 10%;
    height: 7%;
    left: 83%;
    top: 44%;
}
.dungeonStagefieryAbyssPosition24 {
    width: 17%;
    height: 12%;
    left: 9%;
    top: 80%;
}
.dungeonStagefieryAbyssPosition25 {
    width: 17%;
    height: 12%;
    left: 61%;
    top: 73%;
}
.dungeonStagestelePosition1 {
    width: 12%;
    height: 12%;
    left: 3%;
    top: 19%;
}
.dungeonStagestelePosition2 {
    width: 12%;
    height: 12%;
    left: 16%;
    top: 24%;
}
.dungeonStagestelePosition3 {
    width: 12%;
    height: 12%;
    left: 30%;
    top: 29%;
}
.dungeonStagestelePosition4 {
    width: 12%;
    height: 12%;
    left: 44%;
    top: 34%;
}
.dungeonStagestelePosition5 {
    width: 12%;
    height: 12%;
    left: 58%;
    top: 38%;
}
.dungeonStagestelePosition6 {
    width: 12%;
    height: 12%;
    left: 72%;
    top: 42%;
}
.dungeonStagestelePosition7 {
    width: 12%;
    height: 12%;
    left: 86%;
    top: 46%;
}
.dungeonStagestelePosition8 {
    width: 12%;
    height: 12%;
    left: 86%;
    top: 68%;
}
.dungeonStagestelePosition9 {
    width: 12%;
    height: 12%;
    left: 74%;
    top: 75%;
}
.dungeonStagestelePosition10 {
    width: 12%;
    height: 12%;
    left: 59%;
    top: 81%;
}
.dungeonStagestelePosition11 {
    width: 12%;
    height: 12%;
    left: 44%;
    top: 86%;
}
.dungeonStagestelePosition12 {
    width: 12%;
    height: 12%;
    left: 27%;
    top: 86%;
}
.dungeonStagestelePosition13 {
    width: 12%;
    height: 12%;
    left: 9%;
    top: 86%;
}
.dungeonStagestelePosition14 {
    width: 12%;
    height: 12%;
    left: 3%;
    top: 74%;
}
.dungeonStagestelePosition15 {
    width: 12%;
    height: 12%;
    left: 19%;
    top: 74%;
}
.dungeonStagestelePosition16 {
    width: 12%;
    height: 12%;
    left: 37%;
    top: 74%;
}
.dungeonStagestelePosition17 {
    width: 12%;
    height: 12%;
    left: 56%;
    top: 68%;
}
.dungeonStagestelePosition18 {
    width: 12%;
    height: 12%;
    left: 42%;
    top: 62%;
}
.dungeonStagestelePosition19 {
    width: 12%;
    height: 12%;
    left: 26%;
    top: 60%;
}
.dungeonStagestelePosition20 {
    width: 12%;
    height: 12%;
    left: 8%;
    top: 60%;
}
.dungeonStagestelePosition21 {
    width: 13%;
    height: 9%;
    left: 58%;
    top: 56%;
}
.dungeonStagestelePosition22 {
    width: 13%;
    height: 9%;
    left: 38%;
    top: 50%;
}
.dungeonStagestelePosition23 {
    width: 13%;
    height: 9%;
    left: 15%;
    top: 45%;
}
.dungeonStagestelePosition24 {
    width: 13%;
    height: 9%;
    left: 5%;
    top: 8%;
}
.dungeonStagestelePosition25 {
    width: 13%;
    height: 9%;
    left: 25%;
    top: 14%;
}
.dungeonStagestelePosition26 {
    width: 13%;
    height: 9%;
    left: 46%;
    top: 10%;
}
.dungeonStagestelePosition27 {
    width: 13%;
    height: 9%;
    left: 42%;
    top: 22%;
}
.dungeonStagestelePosition28 {
    width: 13%;
    height: 9%;
    left: 64%;
    top: 19%;
}
.dungeonStagestelePosition29 {
    width: 13%;
    height: 9%;
    left: 58%;
    top: 29%;
}
.dungeonStagestelePosition30 {
    width: 13%;
    height: 9%;
    left: 79%;
    top: 33%;
}

.dungeonStage2ImgPosition1 {
    background-image: url(/public/img/dungeon/stage/2.png);
}


.dungeonLock {
    width: 40%;
    height: 15%;
    left: 2%;
    top: 2%;
    background-image: url(/public/img/icons/lock.png);
    position: absolute;
    display: inline-block;
    margin: 0px !important;
    background-size: 100% auto;
    background-position: 0% 50%;
    cursor: pointer;
}
.brightness50{
    filter: brightness(50%);  
}
.poisonCaveBattle {
    background-image: url(/public/img/dungeon/battle/1.jpg);
    padding-bottom: 94%;
    position: relative;
    background-repeat: repeat-y;
    background-position: 50% 0;
    background-size: 100% auto;
    display: block !important;
}
.poisonCaveGeneralPosition {
    width: 30%;
    height: 31%;
    left: 14%;
    top: 45%;
}
.poisonCaveEnemyPosition {
    width: 30%;
    height: 31%;
    right: 14%;
    top: 45%;
}
.poisonCaveEnemyText {
    color: #78bf7c;
    position: absolute;
    z-index: 5;
    left: 42%;
    width: 16%;
    top: 0%;
    text-align: center;
}
.fieryAbyssBattle {
    background-image: url(/public/img/dungeon/battle/2.jpg);
    padding-bottom: 94%;
    position: relative;
    background-repeat: repeat-y;
    background-position: 50% 0;
    background-size: 100% auto;
    display: block !important;
}
.fieryAbyssGeneralPosition {
    width: 30%;
    height: 31%;
    left: 14%;
    top: 52%;
}
.fieryAbyssEnemyPosition {
    width: 30%;
    height: 31%;
    right: 14%;
    top: 52%;
}
.fieryAbyssEnemyText {
    color: #dbca72;
    position: absolute;
    z-index: 5;
    left: 42%;
    width: 16%;
    top: 0%;
    text-align: center;
}
.steleBattle {
    background-image: url(/public/img/dungeon/battle/3.jpg);
    padding-bottom: 94%;
    position: relative;
    background-repeat: repeat-y;
    background-position: 50% 0;
    background-size: 100% auto;
    display: block !important;
}
.steleGeneralPosition {
    width: 30%;
    height: 31%;
    left: 14%;
    top: 52%;
}
.steleEnemyPosition {
    width: 30%;
    height: 31%;
    right: 14%;
    top: 52%;
}
.steleEnemyText {
    color: #ae93dd;
    position: absolute;
    z-index: 5;
    left: 42%;
    width: 16%;
    top: 0%;
    text-align: center;
}
.scaleXm1{
  transform: scaleX(-1);
}
.scaleX1{
  transform: scaleX(1);
}
.battlePanelHpGeneralPosition{
    

    width: 40%;
    height: 5%;
    left: 1%;
    top: 1%;
}
.battlePanelHpGeneralPositionBack{
    border: solid 1px #a0c59a;
    background: #173f2d;
}
.battlePanelHpGeneralPositionBackGreen{
    background: -webkit-gradient(linear, left top, right top, from(#337736), color-stop(50%, #4EA02C), to(#76db1f));
    background: linear-gradient(90deg, #337736 0%, #4EA02C 50%, #76DB1F 100%);
}
.battlePanelEnergyGeneralPosition{
    width: 40%;
    height: 1%;
    left: 1%;
    top: 6%;
}
.battlePanelEnergyGeneralPositionBack{
    border: solid 1px #ffffff;
    background: #173f2d;
}
.battlePanelEnergyGeneralPositionBackGreen{
    background: #e5bd44;
}
.battlePanelHpEnemyPosition{
    width: 40%;
    height: 5%;
    right: 1%;
    top: 1%;
}
.battlePanelHpEnemyPositionBack{
    border: solid 1px #d57875;
    background: #431d1a;
}
.battlePanelHpEnemyPositionBackRed{
    background: -webkit-gradient(linear, left top, right top, from(#430604), color-stop(50%, #8e2813), to(#D94C22));
    background: linear-gradient(90deg, #430604 0%, #8E2813 50%, #D94C22 100%);
}
.battlePanelGeneralPositionParamHp{
    width: 5%;
    height: 5%;
    left: 1%;
    top: 8%;
}
.battlePanelEnemyPositionParamHp{
    width: 5%;
    height: 5%;
    right: 1%;
    top: 8%;
}
.battlePanelGeneralPositionParamHpText{
    width: 35%;
    height: 5%;
    left: 7%;
    top: 9%;
}
.battlePanelEnemyPositionParamHpText{
    width: 35%;
    height: 5%;
    right: 7%;
    top: 9%;
}
.battlePanelGeneralPositionParamAttackText{
    width: 35%;
    height: 5%;
    left: 7%;
    top: 10%;
}
.battlePanelEnemyPositionParamAttackText{
    width: 35%;
    height: 5%;
    right: 7%;
    top: 10%;
}
.battlePanelGeneralPositionParamDefText{
    width: 35%;
    height: 5%;
    left: 7%;
    top: 16%;
}
.battlePanelGeneralPositionParamBloodText{
    width: 35%;
    height: 5%;
    left: 7%;
    top: 22%;
}
.battlePanelEnemyPositionParamDefText{
    width: 35%;
    height: 5%;
    right: 7%;
    top: 16%;
}
.battlePanelImgParamHp{
    background-image: url(/public/img/param/hp.png);
}
.battlePanelGeneralPositionParamAttack{
    width: 5%;
    height: 5%;
    left: 1%;
    top: 9%;
}
.battlePanelEnemyPositionParamAttack{
    width: 5%;
    height: 5%;
    right: 1%;
    top: 9%;
}
.battlePanelImgParamAttack{
    background-image: url(/public/img/param/attack.png);
}
.battlePanelGeneralPositionParamDef{
    width: 5%;
    height: 5%;
    left: 1%;
    top: 15%;
}
.battlePanelGeneralPositionParamBlood{
    width: 5%;
    height: 5%;
    left: 1%;
    top: 21%;
}
.battlePanelEnemyPositionParamDef{
    width: 5%;
    height: 5%;
    right: 1%;
    top: 15%;
}
.battlePanelImgParamDef{
    background-image: url(/public/img/param/def.png);
}
.battlePanelImgParamBlood{
    background-image: url(/public/img/icons/blood.png);
}
.fontSizeDungeonParam {
    font-size: 2.5vw;
}
.fontSizeDungeonMHp {
    font-size: 5vw;
}
@media (min-width: 600px) {
    .fontSizeDungeonParam {
        font-size: 14px;
    }
    .fontSizeDungeonMHp {
        font-size: 30px;
    }
}



.dungeonBattleUnitName{
    width: 100%;
    height: 10%;
    left: 0%;
    top: -15%;
    background: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0.1)), color-stop(30%, rgba(0, 0, 0, 0.5)), color-stop(70%, rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0.1)));
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.5) 30%, rgba(0, 0, 0, 0.5) 70%, rgba(0, 0, 0, 0.1) 100%);

}

.battlePanelGeneralHpText {
    width: 100%;
    height: 20%;
    left: 2%;
    top: 25%;
}
.battlePanelGeneralHpAttackText {
    width: 100%;
    height: 20%;
    right: 2%;
    top: 25%;
}
.battlePanelEnemyHpText {
    width: 100%;
    height: 20%;
    left: 2%;
    top: 25%;
}
.battlePanelEnemyHpAttackText {
    width: 100%;
    height: 20%;
    right: 2%;
    top: 25%;
}
.boxName{
    color: #f6ffb1;
    padding: 5px 0px;
    top: 5px;
    position: absolute;
    background: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0.1)), color-stop(30%, rgba(0, 0, 0, 0.5)), color-stop(70%, rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0.1)));
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.5) 30%, rgba(0, 0, 0, 0.5) 70%, rgba(0, 0, 0, 0.1) 100%);
}
.boxBuy{
    padding: 5px 0px;
    bottom: 0px;
    position: absolute;
}
.cursorPointer{
    cursor: pointer;
}
.p25P{
    padding: 25%;
}
.loginBack {
    background-color: #1a1614;
    background-image: url(/public/img/login/back.webp?v=1);
    background-repeat: no-repeat;
    background-position: center 42%;
    background-size: cover;
    position: relative;
    box-sizing: border-box;
    min-height: 100dvh;
    height: 100dvh;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding: max(4px, env(safe-area-inset-top, 0)) max(10px, env(safe-area-inset-right, 0)) max(8px, env(safe-area-inset-bottom, 0)) max(10px, env(safe-area-inset-left, 0));
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
@media (min-aspect-ratio: 4/3) {
    .loginBack {
        background-position: center center;
    }
}
/* Центр экрана — свиток; полоса онлайна отдельно внизу */
.loginScrollStage {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 0;
    box-sizing: border-box;
    padding: 0.5rem max(10px, env(safe-area-inset-left, 0)) 0.5rem max(10px, env(safe-area-inset-right, 0));
}
/*
  Свиток: как на макете — сам PNG задаёт высоту (нижний ролик не режется).
  Текст/кнопки в слое поверх; отступы в % от ШИРИНЫ свитка (так совпадает с масштабом арта).
*/
.loginScroll {
    position: relative;
    width: min(72vw, 620px);
    max-width: 100%;
    margin: 0 auto;
    flex-shrink: 0;
}
.loginScroll-art {
    display: block;
    width: 100%;
    height: auto;
    image-rendering: crisp-edges;
}
.loginScroll-inner {
    position: absolute;
    inset: 0;
    padding: 42% 19% 17.5%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: clamp(12px, 3vmin, 24px);
}
.loginScroll-intro {
    flex-shrink: 0;
    min-width: 0;
}
.loginScroll-desc {
    margin: 0;
    padding: 0;
    text-align: center;
    color: #1e1810;
    /* vmin — не раздувается на узких/низких экранах; верх ~14px на телефонах */
    font-size: clamp(11px, 2.55vmin, 14px);
    line-height: 1.42;
    font-family: Georgia, "Times New Roman", Times, serif;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.25);
    overflow-wrap: break-word;
    hyphens: auto;
}
.loginScroll-bottom {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: clamp(0.25rem, 0.9vmin, 0.6rem);
    flex-shrink: 0;
}
.loginLanding-actions {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(0.25rem, 1.2vmin, 0.65rem);
}
.loginLanding-btnRow {
    width: 100%;
    text-align: center;
}
.loginLanding-btnImg {
    width: min(78%, 400px);
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}
/* Тяжёлые filter/drop-shadow только у устройств с настоящим hover — на телефонах меньше подвисаний */
@media (hover: hover) and (pointer: fine) {
    .loginLanding-btnImg {
        transition: filter 0.2s ease, transform 0.2s ease;
    }
    .loginLanding-btnRow a:hover .loginLanding-btnImg,
    .loginLanding-btnRow a:focus-visible .loginLanding-btnImg,
    .loginLanding-btnRow > img.loginLanding-btnImg:hover,
    .loginLanding-btnRow > img.loginLanding-btnImg:focus-visible {
        filter: brightness(1.1) drop-shadow(0 0 12px rgba(255, 215, 120, 0.5));
        transform: scale(1.02);
    }
    .loginLanding-btnRow a:active .loginLanding-btnImg,
    .loginLanding-btnRow > img.loginLanding-btnImg:active {
        filter: brightness(1.16) drop-shadow(0 0 14px rgba(255, 230, 150, 0.55));
        transform: scale(0.99);
    }
}
@media (hover: none), (pointer: coarse) {
    .loginLanding-btnRow a:active .loginLanding-btnImg,
    .loginLanding-btnRow > img.loginLanding-btnImg:active {
        filter: none;
        opacity: 0.92;
        transform: scale(0.99);
    }
}
@media (prefers-reduced-motion: reduce) {
    .loginLanding-btnImg {
        transition: none;
    }
    .loginLanding-btnRow a:hover .loginLanding-btnImg,
    .loginLanding-btnRow a:focus-visible .loginLanding-btnImg,
    .loginLanding-btnRow > img.loginLanding-btnImg:hover,
    .loginLanding-btnRow > img.loginLanding-btnImg:focus-visible,
    .loginLanding-btnRow a:active .loginLanding-btnImg,
    .loginLanding-btnRow > img.loginLanding-btnImg:active {
        transform: none;
    }
    .loginLanding-social a .socialMediaImgSize {
        transition: none;
    }
    .loginLanding-social a:hover .socialMediaImgSize,
    .loginLanding-social a:focus-visible .socialMediaImgSize,
    .loginLanding-social a:active .socialMediaImgSize {
        transform: none;
    }
}
.loginLanding-btnRow a {
    display: inline-block;
    line-height: 0;
}
.loginLanding-social {
    line-height: 0;
}
.loginLanding-social a {
    display: inline-block;
    line-height: 0;
}
.loginLanding-social a .socialMediaImgSize {
    transition: opacity 0.18s ease, transform 0.18s ease;
    -webkit-tap-highlight-color: transparent;
    vertical-align: middle;
}
@media (hover: hover) and (pointer: fine) {
    .loginLanding-social a .socialMediaImgSize {
        transition: filter 0.2s ease, transform 0.2s ease;
    }
    .loginLanding-social a:hover .socialMediaImgSize,
    .loginLanding-social a:focus-visible .socialMediaImgSize {
        filter: brightness(1.1) drop-shadow(0 0 12px rgba(255, 215, 120, 0.5));
        transform: scale(1.08);
    }
    .loginLanding-social a:active .socialMediaImgSize {
        filter: brightness(1.16) drop-shadow(0 0 14px rgba(255, 230, 150, 0.55));
        transform: scale(0.96);
    }
}
@media (hover: none), (pointer: coarse) {
    .loginLanding-social a:active .socialMediaImgSize {
        filter: none;
        opacity: 0.9;
        transform: scale(0.96);
    }
}
.loginLanding-footer {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 0;
    flex-shrink: 0;
}
.loginLanding-footer--online {
    justify-content: center;
    padding: 4px 8px calc(10px + env(safe-area-inset-bottom, 0));
    background: linear-gradient(to top, rgba(10, 8, 6, 0.45), transparent);
}
.loginLanding-footer--online .onlinePodlozhka {
    max-width: min(96vw, 620px);
}
@media (max-width: 499px) {
    .loginScroll {
        width: min(88vw, 620px);
    }
    .loginScroll-desc {
        font-size: clamp(10px, 2.5vmin, 13px);
        line-height: 1.38;
    }
}
@media (max-height: 560px) {
    .loginScroll-inner {
        gap: 0.35rem;
    }
    .loginScroll-desc {
        font-size: clamp(10px, 2.4vmin, 13px);
        line-height: 1.35;
    }
}
@media (max-width: 349px) {
    .loginScroll-desc {
        font-size: clamp(9px, 2.35vmin, 11px);
        line-height: 1.32;
    }
}
@media (max-width: 299px) {
    .loginScroll-desc {
        font-size: clamp(8px, 2.2vmin, 10px);
        line-height: 1.28;
    }
}
/* Логин: под артом до низа окна — плотная подложка (без «дыры» и без второго фона body) */
body:has(.loginBack) {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
}
body:has(.loginBack) > .bg {
    display: flex;
    flex-direction: column;
    min-height: 0;
    background-color: #202325;
}
body:has(.loginBack) > .bg > .fontSegoe {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
}
body:has(.loginBack) > .bg > .fontSegoe > .loginBack {
    flex: 1 1 auto;
    width: 100%;
}
.startPosition {
    left: 21%;
    top: 61%;
    position: absolute;
    display: inline-block;
    width: 59%;
    height: 8%;
    margin: 0px !important;
    background-size: 100% auto;
    background-position: 0% 50%;
    background-image: url(/public/img/main/aute.png);
    cursor: pointer;
}
.regNextPosition {
    left: 21%;
    top: 83%;
    position: absolute;
    display: inline-block;
    width: 59%;
    height: 8%;
    margin: 0px !important;
    background-size: 100% auto;
    background-position: 0% 50%;
    background-image: url(/public/img/main/auteYellow.png);
    cursor: pointer;
}
.buttonName{
    filter: drop-shadow(0 2px 0 #000) drop-shadow(0 3px 1px rgba(0, 0, 0, .25));
}
.buttonSize{
    font-size: 7.5vw;
}
@media (min-width: 600px) {
    .buttonSize{
        font-size: 45px;
    }
}
.socialMediaPosition {
    left: 0%;
    top: 82%;
    position: absolute;
    display: inline-block;
    width: 100%;
    height: 8%;
    margin: 0px !important;
    background-size: 100% auto;
    background-position: 0% 50%;
}
.socialMediaImgSize {
    
    width: 8vw;
} 

@media (min-width: 600px){
    .socialMediaImgSize {
        width: 48px;
    }   
}
.onlineBack {
    background: linear-gradient(to right, #10192000, #0a030333, #10192000);
    color: #fff1ce;
    padding: 10px;
}
/* Главная: подложка «онлайн» — компактная полоса, текст внутри рамки */
.onlinePodlozhka {
    position: relative;
    display: block;
    width: fit-content;
    max-width: min(94vw, 400px);
    margin-left: auto;
    margin-right: auto;
    cursor: pointer;
}
@media (min-width: 900px) {
    .onlinePodlozhka {
        max-width: min(100%, 360px);
    }
}
.onlinePodlozhka-frame {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: clamp(30px, 8vmin, 48px);
    margin: 0 auto;
    vertical-align: top;
    pointer-events: none;
    user-select: none;
    object-fit: contain;
    object-position: center;
}
.onlinePodlozhka-content {
    position: absolute;
    left: 7%;
    right: 7%;
    top: 10%;
    bottom: 10%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.15em 0.3em;
    box-sizing: border-box;
    text-align: center;
    color: #fff1ce;
    font-size: clamp(10px, min(2.8vw, 2.6vmin), 16px);
    line-height: 1.25;
    word-break: break-word;
}
.onlinePodlozhka-text,
.onlinePodlozhka-count {
    min-width: 0;
}
.onlinePodlozhka-icon {
    flex-shrink: 0;
    height: 1.15em !important;
    width: auto;
    vertical-align: middle;
}
@media (max-width: 360px) {
    .onlinePodlozhka {
        max-width: min(98vw, 100%);
    }
    .onlinePodlozhka-frame {
        max-height: clamp(28px, 9vw, 40px);
    }
    .onlinePodlozhka-content {
        left: 5%;
        right: 5%;
        font-size: clamp(9px, 2.6vw, 13px);
    }
}
.imgStandartSize{
    height: 4.2vw;
}
@media (min-width: 600px){
    .imgStandartSize {
        height: 24px;
    }   
}
.padding20{
    padding: 20px;
}
.regBack{
    background-image: url(/public/img/login/regBack.png);
    padding-bottom: 150%;
    position: relative;
    background-repeat: repeat-y;
    background-position: 50% 0;
    background-size: 100% auto;
    display: block !important;
}
.topPanelRegPosition {
    left: 0%;
    top: 0%;
    position: absolute;
    display: inline-block;
    width: 100%;
    height: 12%;
    margin: 0px !important;
    background-size: 100% auto;
    background-position: 0% 50%;
}
.topPanelRegBackPosition {
    left: 2%;
    top: 0%;
    position: absolute;
    display: inline-block;
    width: 9%;
    height: 5%;
    margin: 0px !important;
    background-size: 100% auto;
    background-position: 0% 50%;
    background-image: url(/public/img/login/back.png);
    z-index: 9999;
}
.regNameColor{
    color: #DFCA9D;;
}
.regNameSize{
    font-size: 4vw;
}

@media (min-width: 600px){
    .regNameSize {
        font-size: 24px;
    }   
}
.textShadow{
    text-shadow: 1px 1px 0px black;
}
.textInfoPosition {
    left: 0%;
    top: 57%;
    position: absolute;
    display: inline-block;
    width: 100%;
    height: 26%;
    margin: 0px !important;
    z-index: 1;
}
.regUnitPosition {
    position: absolute;
    display: inline-block;
    width: 45%;
    height: 30%;
    margin: 0px !important;
    left: 29%;
    top: 25%;
    background-size: 100% auto;
    background-position: 0% 50%;
}
.regUnitLeftPosition {
    position: absolute;
    display: inline-block;
    width: 18%;
    height: 12%;
    margin: 0px !important;
    left: 10%;
    top: 33%;
    background-size: 100% auto;
    background-position: 0% 50%;
    background-image: url(/public/img/login/left.png);
}
.regUnitRightPosition {
    position: absolute;
    display: inline-block;
    width: 18%;
    height: 12%;
    margin: 0px !important;
    right: 10%;
    top: 33%;
    background-size: 100% auto;
    background-position: 0% 50%;
    background-image: url(/public/img/login/right.png);
}
.startPositionText {
    left: 21%;
    top: 61%;
    position: absolute;
    display: inline-block;
    width: 59%;
    height: 8%;
    margin: 0px !important;

}
.lh44{
    line-height: 10.5vw;
}
.lh18{
    line-height: 6vw;
}


@media (min-width: 600px){
    .lh44 {
        line-height: unset;
    } 
    .lh18{
        line-height: unset;
    }  
}
.topPanelOrange {
    padding: 9px;
    background-image: url(/public/img/main/topPanel.png);
    background-repeat: repeat-x;
    color: #FFF6AE;
    font-size: 24px;
    background-position: 100% 0px;
    height: 30px;
    /* text-shadow: 1px 1px 1px #000000; */
    text-shadow: 1px 1px 2px #000000, -1px 1px 1px #000000, -1px -1px 0.2px #000000;
}

.topOrangeName{
    background: linear-gradient(#FFE9BA, #DDC098);
    text-shadow: none;
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    filter: drop-shadow(0 2px 0 #000) drop-shadow(0 3px 1px rgba(0, 0, 0, .25));
}


.fz14_25{
    font-size: 2.5vw;
}
@media (min-width: 600px){
    .fz14_25 {
        font-size: 14px;
    }   
}
.fz14_25 {
    
    font-size: 2.5vw;
} 

@media (min-width: 600px){
    .fz14_25 {
        font-size: 14px;
    }   
}
.gradientTopBack{
    background: linear-gradient(to top, #28373e, #0c0f12, #28373e);
}
.cardBack{
    padding: 10px 0px;
    text-align: center;
    background-size: 100% 100%;
    background-image: url(/public/img/main/card.png);
}
.p5{
    padding: 5px;
}
.w70{
    width: 70%
}
.bottom10px{
   bottom: 10px; 
}

.imgStandartSize20 {
    height: 3.5vw;
}
@media (min-width: 600px) {
    .imgStandartSize20 {
        height: 20px;
    }
}
.cardNameColor{
    color: #E6E9E6;
}

.font-size24_4{
    font-size: 4vw;
}

@media (min-width: 600px){
    .font-size24_4 {
        font-size: 24px;
    }   
}
.blueMiniTextColor{
    color: #88E4F7;
}
.goldMibiTextColor{
    color: #f6ee71;
}
.cardButton{
    cursor: pointer;
    background: #257585;
    padding: 10px;
    border-radius: 20px;
    color: #DDF3C3;
    box-shadow: inset 1px 1px 0px 0px #fdfdfda1, inset -1px -1px 0px 0px #00000040, inset 0px -6px 3px 0px #0000004d, inset 0px 4px 2px 0px #ffffff30, inset 0px -25px 7px 0px #00000030;
    background: linear-gradient(to right, #257585ad, #257585, #257585a8);
}
.cardButtonText{
    background: linear-gradient(#bbf2ff, #DDF3C3);
    text-shadow: none;
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    filter: drop-shadow(0 2px 0 #000) drop-shadow(0 3px 1px rgba(0, 0, 0, .25));
}
.windowBlueBack {
    border: none;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    box-shadow: none;
    min-width: auto;
    min-width: 15vw;
    max-width: 420px;
    background: #1E4253;
    /* box-shadow: 0px 0px 4px 1px #000000; */
    border-radius: 5px;
    border: 1px solid #000000;
}
.textShadow{
    text-shadow: 1px 1px 0px #000000, -1px -1px 0px #000000;
}
.imgSize66px_11vh {
    height: 11vw
}
@media (min-width: 600px) {
    .imgSize66px_11vh {
        height: 66px;
    }
}
.font-size4vw24px{
    font-size: 4vw;
}

@media (min-width: 600px){
    .font-size4vw24px {
        font-size: 24px;
    }   
}

.imgSize100px_17vw {
    height: 17vw
}
@media (min-width: 600px) {
    .imgSize100px_17vw {
        height: 100px;
    }
}
.imgSize55px_9vh {
    height: 9vw
}
@media (min-width: 600px) {
    .imgSize55px_9vh {
        height: 55px;
    }
}

.map{
    display: block;
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    overflow: hidden;
    width: 100%;
    height: 100%;
    TEXT-ALIGN: center;
}
.mapHome{
    top: 2%;
    position: absolute;
    right: 0%;
    width: 15%;
    display: flex;
    overflow-y: auto;
    transform: translate(0%, 0%);
}
.mapCastleMenu{
    position: absolute;
    left: 4%;
    width: 20%;
    display: flex;
    overflow-y: auto;
    z-index: 999;
    transform: translate(0%, 0%);
    TEXT-ALIGN: center;
    bottom: 1%;
}
.mapGlass{
    position: absolute;
    left: 50%;
    width: 50%;
    display: flex;
    overflow-y: auto;
    z-index: 999;
    transform: translate(-50%, -50%);
    TEXT-ALIGN: center;
    bottom: 0%;
    cursor: pointer;
}
.mapSearchBack{
    padding: 5px;background: linear-gradient(to right, #10192000, #2b2b2b80, #10192000);
}
.mapPlassMinus{
    bottom: 4%;
    position: absolute;
    right: 0%;
    width: 25%;
    display: flex;
    overflow-y: auto;
    transform: translate(0%, 0%);
}
.panelLine {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    padding: 4px 0;
    text-decoration: none;
}
.panelInfo{
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    margin-top: 4px;
    line-height: 1.5;
}
.panelImg {
    width: 52px;
    height: 52px;
    padding: 0 6px;
}
.pageLineColor1{
    background-color: #2f4047;
}
.pageLineColor2{
    background-color: #455d67;
}
.panelImgSize {
    width: 48px;
    height: 48px;
}
.panelInfoDescription{
    font-size: small;
    color: #afb4ba;
}
.panelInfoRight{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -ms-flex-pack: distribute;
    justify-content: space-around;
    padding-right: 6px;
    text-align: center;
}
.iconSizeMiniS {
    top: 3px;
    width: 16px;
    height: 16px;
}
.fz10{
    font-size: 10px;
}
.panelImgSizeBig {
    width: 70px;
    height: 70px;
}
.panelImgBig {
    width: 70px;
    height: 70px;
    padding: 0 6px;
}
.violetColor {
    color: #c38ed7;
}
.redColor {
    color: #f78b9b;
}
.yellowColor {
    color: #ffc107;
}

.fontSizeSmall{
    font-size: small;
}
.verticalCenter{
    height: 25px;
    
}
.verticalCenter46 {
    height: 46px;
}
.line {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    padding: 4px 0;
    text-decoration: none;
}
.lineView {
    width: 52px;
    height: 52px;
    padding: 0 6px;
}
.lineView90 {
    width: 90px;
    height: 90px;
    padding: 0 6px;
}
.lineSize48 {
    width: 48px;
    height: 48px;
}
.lineSize88 {
    width: 88px;
    height: 88px;
}
.lineInfo {
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    margin-top: 4px;
    line-height: 1.5;
}
.lineInfo2 {
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    line-height: 1.5;
}
.lineRightCenter {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -ms-flex-pack: distribute;
    justify-content: space-around;
    padding-right: 6px;
    text-align: center;
}
.colorBrown{
    color: #2C110D
}
.colorBlack{
    color: #000000
}

.shadowBrown{
    text-shadow: 1px 1px 2px #AB958D;
}
.bold {
  font-weight: 700;
}
.backBead{
    background: #BEAD99;
    
}
.post{
    background: #CAC9C2;
    border: 1px solid #000000;
    border-radius: 3px;
    box-shadow: 0 0px 9px #00000040;
    padding: 7px;
}
.postReplica {
    background: #b8bf7e;
    border: 1px solid #000000;
    border-radius: 3px;
    box-shadow: 0 0px 9px #00000040;
    padding: 7px;
}
.postInfo{
    background: #797974;
    border-radius: 4px;
    padding: 10px;
}
.postMessage{
    padding: 6px 8px;
}
.navigationBack{
    background: #2a3a41;
}
.font-size30_5{
    font-size: 5vw;
}

@media (min-width: 600px){
    .font-size30_5 {
        font-size: 30px;
    }   
}
.fz16_27 {

    font-size: 2.7vw;
} 

@media (min-width: 600px){
    .fz16_27 {
        font-size: 16px;
    }   
}
.font-size40_6{
    font-size: 6vw;
}

@media (min-width: 600px){
    .font-size40_6 {
        font-size: 40px;
    }   
}
.border-radius28{
    border-radius: 28px;
}

/* ══════════════════════════════════════
   Обучение — модальный оверлей (RPG-стиль)
   ══════════════════════════════════════ */
.edu-overlay {
    position: fixed;
    inset: 0;
    z-index: 9000;
    background: rgba(0, 0, 0, 0.62);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-bottom: env(safe-area-inset-bottom, 0);
}
.edu-dialog {
    width: 100%;
    max-width: 500px;
    max-height: 100dvh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    display: flex;
    flex-direction: column;
}
.edu-npc {
    display: block;
    width: clamp(70px, 22vw, 100px);
    height: auto;
    margin: 0 auto 12px;
    filter: drop-shadow(0 4px 12px rgba(0,0,0,0.55));
    pointer-events: none;
    user-select: none;
}
.edu-panel {
    width: 100%;
    background: linear-gradient(180deg, #faf0d4 0%, #edd9a6 100%);
    border-top: 3px solid #b88c38;
    border-left: 3px solid #b88c38;
    border-right: 3px solid #b88c38;
    border-radius: 14px 14px 0 0;
    box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.6), inset 0 2px 0 rgba(255, 240, 180, 0.55), inset 0 -2px 0 rgba(160, 100, 20, 0.15);
    padding: 10px 10px 10px;
    box-sizing: border-box;
    position: relative;
    z-index: 1;
}
.edu-close {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 34px;
    height: 34px;
    padding: 0;
    background: rgba(120, 65, 10, 0.18);
    border: 1.5px solid rgba(140, 80, 18, 0.55);
    border-radius: 50%;
    color: #5a2c00;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    text-shadow: none;
    transition: background 0.15s ease, border-color 0.15s ease;
    -webkit-tap-highlight-color: transparent;
    z-index: 2;
}
.edu-close:hover,
.edu-close:active {
    background: rgba(140, 80, 18, 0.32);
    border-color: rgba(140, 80, 18, 0.75);
}
.edu-name {
    margin: 0 0 10px;
    font-size: clamp(14px, 4vw, 18px);
    font-weight: 700;
    font-family: Georgia, 'Times New Roman', serif;
    color: #5a2c00;
    text-align: center;
    letter-spacing: 0.5px;
    padding-bottom: 9px;
    border-bottom: 1px solid rgba(160, 100, 28, 0.30);
    text-shadow: none;
}
.edu-text {
    font-size: clamp(13px, 3.6vw, 16px);
    line-height: 1.58;
    color: #3a1e00;
    font-family: Georgia, 'Times New Roman', serif;
    text-align: center;
    margin-bottom: 18px;
    text-shadow: none;
}
.edu-text a {
    color: #8a4e00;
    text-decoration: underline;
    text-underline-offset: 2px;
    text-shadow: none;
}
.edu-text a:hover {
    color: #c07010;
}
.edu-actions {
    display: flex;
    flex-direction: column;
    gap: 9px;
}
.edu-btn {
    display: block;
    width: 100%;
    padding: 13px 20px;
    text-align: center;
    text-decoration: none;
    font-size: clamp(13px, 3.5vw, 15px);
    font-weight: 700;
    font-family: Segoe UI, Roboto, Arial, sans-serif;
    border-radius: 7px;
    box-sizing: border-box;
    letter-spacing: 0.3px;
    transition: filter 0.15s ease;
    -webkit-tap-highlight-color: transparent;
}
.edu-btn--main {
    background: linear-gradient(180deg, #ca9238 0%, #9a6820 100%);
    border: 2px solid #7a5018;
    color: #fff8e8;
    text-shadow: 0 1px 3px rgba(0,0,0,0.5);
    box-shadow: 0 3px 10px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,225,120,0.3);
}
.edu-btn--skip {
    background: rgba(120, 80, 28, 0.12);
    border: 1.5px solid rgba(140, 90, 28, 0.40);
    color: #7a4a10;
    font-weight: 600;
    text-shadow: none;
}
@media (hover: hover) {
    .edu-btn:hover { filter: brightness(1.1); }
}
@media (pointer: coarse) {
    .edu-btn:active { filter: brightness(0.93); }
}
@media (max-width: 399px) {
    .edu-panel { padding: 24px 14px 20px; }
    .edu-text  { font-size: clamp(12px, 3.4vw, 14px); }
}
/* ── Dungeon Help Page ─────────────────────────────────────────────── */
.dnghelp-section{display:flex;flex-direction:column;gap:6px;margin-top:18px;}
.dnghelp-section:first-child{margin-top:0;}
.dnghelp-section-title{display:flex;align-items:center;gap:7px;font-size:11px;font-weight:800;letter-spacing:0.1em;text-transform:uppercase;color:rgba(190,225,255,0.95);padding:0 2px;border-left:3px solid rgba(80,160,255,0.85);padding-left:8px;}
.dnghelp-section-title svg{flex-shrink:0;color:rgba(140,200,255,0.95);}
.dnghelp-card{background:rgba(255,255,255,0.06);border:1px solid rgba(52,152,219,0.32);border-radius:12px;padding:12px;display:flex;flex-direction:column;gap:7px;contain:layout style;}
.dnghelp-card--note{flex-direction:row;align-items:flex-start;gap:8px;background:rgba(245,204,96,0.1);border-color:rgba(245,204,96,0.35);}
.dnghelp-card--blood{border-color:rgba(220,80,80,0.38);background:rgba(220,80,80,0.09);}
.dnghelp-text{margin:0;font-size:12.5px;color:rgba(210,235,255,0.92);line-height:1.6;}
.dnghelp-row{display:flex;align-items:flex-start;gap:8px;font-size:12.5px;color:rgba(210,235,255,0.92);line-height:1.5;}
.dnghelp-highlight{display:flex;align-items:flex-start;gap:8px;padding:8px 10px;border-radius:8px;background:rgba(220,80,80,0.13);border:1px solid rgba(220,80,80,0.35);font-size:12.5px;color:rgba(220,240,255,0.95);line-height:1.5;}
.dnghelp-formula{font-family:monospace;font-size:12px;color:#a8dcff;background:rgba(52,152,219,0.1);border:1px solid rgba(52,152,219,0.25);border-radius:8px;padding:8px 12px;text-align:center;letter-spacing:0.03em;}
.dnghelp-table{border:1px solid rgba(52,152,219,0.18);border-radius:8px;overflow:hidden;font-size:11px;}
.dnghelp-table-head{display:grid;background:rgba(52,152,219,0.12);padding:6px 10px;color:rgba(174,214,241,0.55);font-weight:700;text-transform:uppercase;letter-spacing:0.06em;gap:4px;}
.dnghelp-table-row{display:grid;padding:5px 10px;color:rgba(200,223,240,0.8);border-top:1px solid rgba(52,152,219,0.1);gap:4px;}
.dnghelp-table-row:nth-child(even){background:rgba(52,152,219,0.04);}
.dnghelp-table--mult .dnghelp-table-head--mult{grid-template-columns:1fr 2fr 2fr 2fr;}
.dnghelp-table--mult .dnghelp-table-row--mult{grid-template-columns:1fr 2fr 2fr 2fr;align-items:center;}
.dnghelp-table--mult .dnghelp-table-head--2col{grid-template-columns:1fr 2fr;}
.dnghelp-table--mult .dnghelp-table-row--2col{grid-template-columns:1fr 2fr;align-items:center;}
.dnghelp-mult-badge{display:inline-block;font-weight:800;color:#a8dcff;font-size:12px;}
.dnghelp-levels-table{border:1px solid rgba(52,152,219,0.18);border-radius:8px;overflow:hidden;font-size:11px;}
.dnghelp-levels-head{display:grid;grid-template-columns:1fr 1.5fr 1.5fr 1.5fr 1.5fr 1.5fr 1.5fr;background:rgba(52,152,219,0.12);padding:6px 10px;color:rgba(174,214,241,0.55);font-weight:700;text-transform:uppercase;letter-spacing:0.06em;gap:4px;}
.dnghelp-levels-row{display:grid;grid-template-columns:1fr 1.5fr 1.5fr 1.5fr 1.5fr 1.5fr 1.5fr;padding:5px 10px;color:rgba(200,223,240,0.8);border-top:1px solid rgba(52,152,219,0.1);gap:4px;}
.dnghelp-levels-row:nth-child(even){background:rgba(52,152,219,0.04);}
.dnghelp-loc-card{border:1px solid rgba(52,152,219,0.2);border-radius:12px;padding:10px 12px;display:flex;flex-direction:column;gap:6px;}
.dnghelp-loc-head{display:flex;align-items:center;justify-content:space-between;gap:8px;}
.dnghelp-loc-name{font-size:13px;font-weight:700;}
.dnghelp-loc-cost{display:flex;align-items:center;gap:4px;font-size:11px;color:rgba(174,214,241,0.55);font-weight:600;}
.dnghelp-loc-cost svg{color:#60d0ff;}
.dnghelp-loc-body{display:flex;flex-direction:column;gap:5px;}
.dnghelp-loc-row{display:flex;align-items:center;gap:6px;font-size:11px;color:rgba(200,223,240,0.75);}
.dnghelp-upgrade-row{display:flex;align-items:flex-start;gap:10px;padding:8px 10px;border-radius:8px;font-size:12px;color:rgba(200,223,240,0.85);line-height:1.5;}
.dnghelp-upgrade-row--res{background:rgba(39,174,96,0.08);border:1px solid rgba(39,174,96,0.22);color:rgba(130,224,170,0.85);}
.dnghelp-upgrade-row--res svg{color:#3dc87a;flex-shrink:0;margin-top:1px;}
.dnghelp-upgrade-row--gold{background:rgba(220,160,30,0.08);border:1px solid rgba(220,160,30,0.22);color:rgba(245,204,96,0.85);}