/* HSKNova — обновлённая верхняя панель */
html[data-mobile] #mRoot .m-header {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    z-index: 40;
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 8px 10px 0;
    padding: 12px;
    border: 1px solid rgba(102, 130, 255, .32);
    border-radius: 22px;
    background: linear-gradient(115deg, #101b40 0%, #182453 55%, #251a58 100%);
    box-shadow: 0 8px 28px rgba(6, 13, 42, .28);
    pointer-events: auto;
}

html[data-mobile] #mRoot[data-mpage="home"] .m-title {
    visibility: visible;
}

html[data-mobile] #mRoot .m-title-wrap {
    flex: 1 1 auto;
    min-width: 0;
    align-items: flex-start;
}

html[data-mobile] #mRoot .m-title-wrap .m-title {
    color: #fff;
    font-size: 20px;
    font-weight: 900;
    letter-spacing: -.5px;
    text-align: left;
}

html[data-mobile] #mRoot .m-theme-quick {
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
}

html[data-mobile] #mRoot .m-diamonds {
    flex-shrink: 0;
}

html[data-mobile] #mRoot #mLivesChip {
    flex-shrink: 0;
}

@media (max-width: 600px) {
    html[data-mobile] #mRoot .m-header {
        flex-wrap: wrap;
        gap: 9px;
    }

    html[data-mobile] #mRoot .m-title-wrap {
        flex: 1 1 calc(100% - 54px);
    }

    html[data-mobile] #mRoot .m-title-wrap .m-title {
        font-size: 22px;
    }

    html[data-mobile] #mRoot #mLivesChip {
        margin-left: auto;
    }
}

@media (max-width: 360px) {
    html[data-mobile] #mRoot .m-header {
        margin-inline: 6px;
        padding: 9px;
        gap: 6px;
    }

    html[data-mobile] #mRoot .m-title-wrap .m-title {
        font-size: 19px;
    }
}
/* Компактная шапка HSKNova */
@media (max-width: 600px) {
    html[data-mobile] #mRoot .m-header {
        flex-wrap: nowrap;
        gap: 5px;
        padding: 9px 7px;
        margin: 6px 6px 0;
        border-radius: 18px;
    }

    html[data-mobile] #mRoot .m-title-wrap {
        flex: 1 1 auto;
        min-width: 0;
    }

    html[data-mobile] #mRoot .m-title-wrap .m-title {
        font-size: 15px;
        white-space: nowrap;
    }

    html[data-mobile] #mRoot .m-theme-quick {
        width: 27px;
        height: 27px;
        flex: 0 0 27px;
    }

    html[data-mobile] #mRoot .m-diamonds {
        padding: 0 5px;
        height: 27px;
    }

    html[data-mobile] #mRoot #mLivesChip.m-lives {
        width: 132px;
        height: 34px;
        margin-left: 0;
    }
}

/* HSKNova: прозрачная компактная шапка */
html[data-mobile] #mRoot .m-header {
    background: linear-gradient(
        115deg,
        rgba(12, 24, 65, .48),
        rgba(34, 24, 83, .40)
    ) !important;
    border-color: rgba(115, 158, 255, .30) !important;
    backdrop-filter: blur(9px) !important;
    -webkit-backdrop-filter: blur(9px) !important;
    box-shadow: 0 4px 16px rgba(4, 12, 35, .16) !important;
}

/* Сердечко непосредственно рядом с названием */
html[data-mobile] #mRoot[data-mpage="home"] .m-title-wrap {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 5px !important;
}

html[data-mobile] #mRoot[data-mpage="home"] .m-title-wrap::before {
    content: "💙" !important;
    display: inline-grid !important;
    place-items: center !important;
    width: 24px !important;
    height: 26px !important;
    flex: 0 0 24px !important;
    font-size: 21px !important;
    filter: drop-shadow(0 0 6px #30d8ff) !important;
}

/* Фирменная надпись HSK Nova */
html[data-mobile] #mRoot[data-mpage="home"] .m-title-wrap .m-title {
    flex: 0 1 auto !important;
    font-size: 16px !important;
    font-weight: 900 !important;
    line-height: 1.1 !important;
    letter-spacing: -.5px !important;
    white-space: nowrap !important;
    background: linear-gradient(110deg, #ffffff 5%, #8ee7ff 45%, #a68cff 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
    text-shadow: none !important;
}

/* Прозрачная шапка HSKNova */
html[data-mobile] #mRoot .m-header {
    background: transparent !important;
    background-image: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: none !important;
    border-color: transparent !important;
}

/* Поднимаем элементы верхней панели */
html[data-mobile] #mRoot .m-header {
    margin-top: -2px !important;
}

/* HSKNova — кнопки по новому образцу */

/* Солнце: золотое свечение, без счётчика */
html[data-mobile] #mRoot .m-theme-quick {
    width: 32px !important;
    height: 32px !important;
    flex: 0 0 32px !important;
    padding: 0 !important;
    border: 1.5px solid #ffac35 !important;
    border-radius: 999px !important;
    background: linear-gradient(135deg,rgba(62,31,16,.9),rgba(19,19,35,.75)) !important;
    box-shadow: 0 0 9px #ff9d3555,inset 0 0 7px #ff9d3522 !important;
    color: #ffd24a !important;
    font-size: 19px !important;
    text-shadow: 0 0 7px #ff9a00 !important;
}

/* Алмазы */
html[data-mobile] #mRoot .m-diamonds {
    height: 32px !important;
    padding: 0 9px !important;
    gap: 5px !important;
    border: 1.5px solid #35c9ff !important;
    border-radius: 999px !important;
    background: rgba(5,24,47,.75) !important;
    box-shadow: 0 0 10px #27bfff44,inset 0 0 7px #27bfff22 !important;
    color: #8deaff !important;
    font-size: 12px !important;
}

html[data-mobile] #mRoot .m-diamonds span {
    font-size: 17px !important;
    filter: drop-shadow(0 0 5px #27cfff);
}

/* Жёлтая энергия */
html[data-mobile] #mRoot #mLivesChip.m-lives {
    width: 137px !important;
    height: 36px !important;
    padding: 3px 31px 3px 22px !important;
    border: 2px solid #ffcb45 !important;
    border-radius: 999px !important;
    background: rgba(12,21,43,.82) !important;
    box-shadow: 0 0 11px #ffc53377 !important;
}

html[data-mobile] #mRoot #mLivesChip .m-energy-track {
    inset: 3px 28px 3px 3px !important;
    border: 0 !important;
    background: #332912 !important;
}

html[data-mobile] #mRoot #mLivesChip .m-energy-fill {
    background: linear-gradient(90deg,#ffae22,#ffe977) !important;
}

html[data-mobile] #mRoot #mLivesChip .m-lives-icon {
    left: 8px !important;
    font-size: 17px !important;
    filter: drop-shadow(0 0 5px #ffbd00) !important;
}

html[data-mobile] #mRoot #mLivesChip .m-energy-copy {
    justify-content: center !important;
    gap: 4px !important;
    color: #17213b !important;
    text-shadow: none !important;
}

html[data-mobile] #mRoot #mLivesChip .m-energy-copy b,
html[data-mobile] #mRoot #mLivesChip .m-energy-copy small {
    color: #17213b !important;
    font-weight: 900 !important;
    text-shadow: none !important;
}

/* Фиолетовая кнопка + */
html[data-mobile] #mRoot #mLivesPlus {
    right: -1px !important;
    width: 31px !important;
    height: 31px !important;
    border: 2px solid #c88aff !important;
    border-radius: 50% !important;
    background: linear-gradient(135deg,#c457ff,#7739ee) !important;
    box-shadow: 0 0 10px #a74aff99 !important;
    color: #fff !important;
    font-size: 22px !important;
    font-weight: 900 !important;
}

/* Узкие телефоны */
@media(max-width:380px) {
    html[data-mobile] #mRoot .m-header {
        gap: 4px !important;
        padding-inline: 4px !important;
    }

    html[data-mobile] #mRoot .m-theme-quick {
        width: 28px !important;
        height: 28px !important;
        flex-basis: 28px !important;
    }

    html[data-mobile] #mRoot .m-diamonds {
        padding-inline: 6px !important;
    }

    html[data-mobile] #mRoot #mLivesChip.m-lives {
        width: 126px !important;
    }
}

/* HSKNova — финальная настройка кнопок */

/* Солнце: возвращаем прежний вид */
html[data-mobile] #mRoot .m-theme-quick {
    width: 30px !important;
    height: 30px !important;
    flex: 0 0 30px !important;
    display: grid !important;
    place-items: center !important;
    padding: 0 !important;
    border: 1px solid rgba(57,137,223,.52) !important;
    border-radius: 50% !important;
    background: #071a37 !important;
    box-shadow: none !important;
    color: var(--m-text) !important;
    font-size: 18px !important;
    text-shadow: none !important;
}

/* Алмазы: голубая капсула как на образце */
html[data-mobile] #mRoot .m-diamonds {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    height: 34px !important;
    min-width: 59px !important;
    padding: 0 9px !important;
    border: 2px solid #35caff !important;
    border-radius: 999px !important;
    background: rgba(3,23,48,.80) !important;
    box-shadow: 0 0 10px #27cfff55, inset 0 0 8px #27cfff22 !important;
    color: #9deaff !important;
}

html[data-mobile] #mRoot .m-diamonds span {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 22px !important;
    line-height: 1 !important;
    filter: drop-shadow(0 0 5px #26cfff) !important;
}

html[data-mobile] #mRoot .m-diamonds b {
    font-size: 15px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    color: #9deaff !important;
}

/* Энергия: центрируем содержимое */
html[data-mobile] #mRoot #mLivesChip.m-lives {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

html[data-mobile] #mRoot #mLivesChip .m-energy-copy {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    line-height: 1 !important;
}

html[data-mobile] #mRoot #mLivesChip .m-energy-copy b {
    font-size: 13px !important;
    font-weight: 1000 !important;
    line-height: 1 !important;
}

html[data-mobile] #mRoot #mLivesChip .m-energy-copy small {
    font-size: 8px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
}

html[data-mobile] #mRoot #mLivesPlus {
    top: 50% !important;
    transform: translateY(-50%) !important;
    display: grid !important;
    place-items: center !important;
    padding: 0 !important;
    line-height: 1 !important;
}


/* Компактные кнопки и точное выравнивание */
html[data-mobile] #mRoot .m-header {
    gap: 5px !important;
}

/* Солнце строго по центру */
html[data-mobile] #mRoot .m-theme-quick {
    width: 28px !important;
    height: 28px !important;
    flex: 0 0 28px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    font-size: 17px !important;
    line-height: 1 !important;
    text-align: center !important;
}

/* Алмазы: прежний компактный размер */
html[data-mobile] #mRoot .m-diamonds {
    min-width: 0 !important;
    height: 29px !important;
    padding: 0 7px !important;
    gap: 4px !important;
    border-width: 1px !important;
}

html[data-mobile] #mRoot .m-diamonds span {
    font-size: 17px !important;
}

html[data-mobile] #mRoot .m-diamonds b {
    font-size: 12px !important;
}

/* Энергия: уменьшаем капсулу */
html[data-mobile] #mRoot #mLivesChip.m-lives {
    width: 128px !important;
    height: 32px !important;
    padding: 3px 27px 3px 21px !important;
    border-width: 1.5px !important;
}

/* Молния левее, отдельно от цифр */
html[data-mobile] #mRoot #mLivesChip .m-lives-icon {
    left: 4px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    font-size: 14px !important;
    line-height: 1 !important;
}

html[data-mobile] #mRoot #mLivesChip .m-energy-track {
    inset: 3px 25px 3px 19px !important;
}

/* Цифры и статус по центру свободной области */
html[data-mobile] #mRoot #mLivesChip .m-energy-copy {
    width: 100% !important;
    gap: 3px !important;
}

html[data-mobile] #mRoot #mLivesChip .m-energy-copy b {
    font-size: 12px !important;
    font-weight: 900 !important;
}

html[data-mobile] #mRoot #mLivesChip .m-energy-copy small {
    font-size: 7px !important;
}

/* Кнопка плюс */
html[data-mobile] #mRoot #mLivesPlus {
    width: 27px !important;
    height: 27px !important;
    right: -1px !important;
    font-size: 19px !important;
}


/* Энергия — компактная копия образца */
html[data-mobile] #mRoot #mLivesChip.m-lives {
    position: relative !important;
    width: 130px !important;
    height: 34px !important;
    padding: 0 28px 0 20px !important;
    overflow: visible !important;
    border: 2px solid #ffc44d !important;
    border-radius: 999px !important;
    background: #ffe36a !important;
    box-shadow: 0 0 9px #ffbf4080, inset 0 2px 3px #ffffff70 !important;
}

/* Жёлтая полоса заполнения */
html[data-mobile] #mRoot #mLivesChip .m-energy-track {
    position: absolute !important;
    inset: 2px 25px 2px 2px !important;
    overflow: hidden !important;
    border: none !important;
    border-radius: 999px !important;
    background: #503c20 !important;
}

html[data-mobile] #mRoot #mLivesChip .m-energy-fill {
    display: block !important;
    height: 100% !important;
    background: linear-gradient(90deg,#ffb82e,#ffe875) !important;
}

/* Чёрная молния слева */
html[data-mobile] #mRoot #mLivesChip .m-lives-icon {
    position: absolute !important;
    left: 6px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 4 !important;
    font-size: 16px !important;
    line-height: 1 !important;
    filter: grayscale(1) brightness(0) !important;
}

/* 20/20 и FULL по центру жёлтой полосы */
html[data-mobile] #mRoot #mLivesChip .m-energy-copy {
    position: relative !important;
    z-index: 3 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    width: 100% !important;
    white-space: nowrap !important;
    color: #171717 !important;
    text-shadow: none !important;
}

html[data-mobile] #mRoot #mLivesChip .m-energy-copy b {
    font-size: 13px !important;
    font-weight: 900 !important;
    color: #111 !important;
}

html[data-mobile] #mRoot #mLivesChip .m-energy-copy small {
    font-size: 8px !important;
    font-weight: 900 !important;
    color: #111 !important;
}

/* Фиолетовый круг поверх правого края */
html[data-mobile] #mRoot #mLivesPlus {
    position: absolute !important;
    top: 50% !important;
    right: -3px !important;
    transform: translateY(-50%) !important;
    z-index: 5 !important;
    display: grid !important;
    place-items: center !important;
    width: 32px !important;
    height: 32px !important;
    padding: 0 !important;
    border: 2px solid #ce8aff !important;
    border-radius: 50% !important;
    background: linear-gradient(145deg,#cf66ff,#7934ed) !important;
    box-shadow: 0 0 9px #a54aff99, inset 0 2px 3px #ffffff66 !important;
    color: #fff !important;
    font-size: 22px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
}


/* Сдвигаем молнию и текст энергии влево */
html[data-mobile] #mRoot #mLivesChip .m-lives-icon {
    left: 2px !important;
}

html[data-mobile] #mRoot #mLivesChip .m-energy-copy {
    transform: translateX(-5px) !important;
}


/* Сдвигаем только молнию влево */
html[data-mobile] #mRoot #mLivesChip .m-lives-icon {
    left: -3px !important;
}


/* Уменьшаем кнопки шапки, сохраняя пропорции */
html[data-mobile] #mRoot .m-theme-quick {
    transform: scale(.9) !important;
}

html[data-mobile] #mRoot .m-diamonds {
    transform: scale(.9) !important;
}

html[data-mobile] #mRoot #mLivesChip.m-lives {
    transform: scale(.9) !important;
    transform-origin: center center !important;
}


/* Энергия: ещё на 10% меньше и немного правее */
html[data-mobile] #mRoot #mLivesChip.m-lives {
    transform: translateX(6px) scale(.81) !important;
    transform-origin: center center !important;
}


/* Солнце и алмазы рядом */
html[data-mobile] #mRoot .m-theme-quick {
    margin-right: -5px !important;
}

html[data-mobile] #mRoot .m-diamonds {
    margin-left: -5px !important;
}


/* Сдвигаем солнце и алмазы вместе вправо */
html[data-mobile] #mRoot .m-theme-quick {
    position: relative !important;
    left: 8px !important;
}

html[data-mobile] #mRoot .m-diamonds {
    position: relative !important;
    left: 8px !important;
}


/* Солнце и алмазы ещё правее */
html[data-mobile] #mRoot .m-theme-quick,
html[data-mobile] #mRoot .m-diamonds {
    left: 16px !important;
}


/* Солнце и алмазы немного правее */
html[data-mobile] #mRoot .m-theme-quick,
html[data-mobile] #mRoot .m-diamonds {
    left: 21px !important;
}

/* Небольшое расстояние между солнцем и алмазами */
html[data-mobile] #mRoot .m-theme-quick {
    margin-right: -1px !important;
}

html[data-mobile] #mRoot .m-diamonds {
    margin-left: -1px !important;
}


/* Выравниваем центры кнопок по одной линии */
html[data-mobile] #mRoot .m-header {
    align-items: center !important;
}

html[data-mobile] #mRoot .m-theme-quick,
html[data-mobile] #mRoot .m-diamonds,
html[data-mobile] #mRoot #mLivesChip.m-lives {
    align-self: center !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    top: 0 !important;
}


/* Энергия: ещё немного компактнее */
html[data-mobile] #mRoot #mLivesChip.m-lives {
    transform: translateX(6px) scale(.77) !important;
    transform-origin: center center !important;
}


/* Алмазы — оформление для светлой мятной темы */
html[data-mobile][data-mtheme="light"] #mRoot .m-diamonds {
    background: linear-gradient(135deg, rgba(217,255,247,.92), rgba(177,239,234,.88)) !important;
    border: 1.5px solid #36b9c5 !important;
    box-shadow: 0 0 9px rgba(54,185,197,.22), inset 0 1px 3px rgba(255,255,255,.9) !important;
    color: #087c91 !important;
}

html[data-mobile][data-mtheme="light"] #mRoot .m-diamonds b {
    color: #087c91 !important;
}

html[data-mobile][data-mtheme="light"] #mRoot .m-diamonds span {
    filter: drop-shadow(0 0 3px rgba(28,178,213,.35)) !important;
}


/* HSKNova — логотип в светлой мятной теме */
html[data-mobile][data-mtheme="light"] #mRoot[data-mpage="home"] .m-title-wrap::before {
    content: "♥" !important;
    color: #16b89c !important;
    font-size: 25px !important;
    text-shadow: 0 0 5px rgba(19, 174, 155, .35) !important;
    filter: none !important;
}

html[data-mobile][data-mtheme="light"] #mRoot[data-mpage="home"] .m-title-wrap .m-title {
    background: linear-gradient(110deg, #087e91 0%, #139db5 48%, #5864d9 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
    text-shadow: none !important;
}


/* Светлая тема: пропорции сердечка и названия */
html[data-mobile][data-mtheme="light"] #mRoot[data-mpage="home"] .m-title-wrap {
    gap: 2px !important;
    align-items: center !important;
}

html[data-mobile][data-mtheme="light"] #mRoot[data-mpage="home"] .m-title-wrap::before {
    width: 19px !important;
    height: 20px !important;
    flex: 0 0 19px !important;
    font-size: 19px !important;
    line-height: 1 !important;
    text-align: center !important;
    align-self: center !important;
}


/* Тёмная тема: пропорциональное сердечко рядом с HSK Nova */
html[data-mobile][data-mtheme="dark"] #mRoot[data-mpage="home"] .m-title-wrap {
    gap: 2px !important;
    align-items: center !important;
}

html[data-mobile][data-mtheme="dark"] #mRoot[data-mpage="home"] .m-title-wrap::before {
    width: 19px !important;
    height: 20px !important;
    flex: 0 0 19px !important;
    font-size: 19px !important;
    line-height: 1 !important;
    align-self: center !important;
}


/* Тёмная тема: сердечко чуть левее */
html[data-mobile][data-mtheme="dark"] #mRoot[data-mpage="home"] .m-title-wrap::before {
    position: relative !important;
    left: -3px !important;
}