:root {
    --nav-h: 47px;
    --dash-aside-w: 250px;
    --dash-top: 96px;
}

@media (min-width: 768px) {
    .columns-2 {
        column-count: 2;
        column-gap: 30px;
    }

    .audio-block-1 {
        border-right: 1px solid #E1DFC8;
    }

    .audio-block-2 {
        border-left: 1px solid #E1DFC8;
    }
}

@media (min-width: 990px) {
    .levels-row {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .main-slider .slick-dots {
        bottom: 40px;
        text-align: right;
        right: 40px;
    }
}

@media (min-width: 1200px) {
    body:has(#navbarCollapse.show) {
        overflow: visible;
    }

    .menu-stack {
        display: inline-block;
        width: max-content;
    }

    .header-menu {
        width: max-content;
    }

    .global-search-form {
        width: 100%;
        max-width: none;
        align-self: stretch;
    }

    .global-search-form .position-relative.m-auto {
        margin: 0 !important;
    }

    .header-menu .nav-link {
        margin-bottom: 0;
        margin-top: 0;
        padding-top: 0;
        padding-bottom: 0;
    }

    .header-menu .nav-item:first-child {
        margin-left: 0;
        padding-left: 0;
    }

    .header-menu .nav-item:last-child {
        margin-right: 0 !important;
        padding-right: 0 !important;
    }

    .period-catalog {
        position: absolute;
        top: 100%;
        left: 0;
        width: 100vw;
        max-height: calc(100vh - 55px);
        background: #184037;
        box-shadow: 0 5px 8px rgba(0, 0, 0, 0.1);
    }

    .game-area {
        border-top-left-radius: 20px;
    }

    #dashboardPanel.offcanvas-aside {
        position: fixed !important;
        top: var(--dash-top) !important;
        left: 0 !important;
        height: calc(100vh - var(--dash-top)) !important;
        width: var(--dash-aside-w) !important;
        max-width: var(--dash-aside-w) !important;

        transform: none !important;
        visibility: visible !important;
        display: block !important;
        z-index: 100 !important;

        overflow-y: auto !important;
        overflow-x: hidden !important;

        border: 0 !important;
    }

    /* скрываем лишнее от offcanvas */
    #dashboardPanel .offcanvas-backdrop {
        display: none !important;
    }

    #dashboardPanel .offcanvas-header {
        display: none !important;
    }

    #profileOffcanvas .offcanvas-header {
        display: flex !important;
        align-items: center;
    }

    #profileOffcanvas {
        max-width: 300px;
    }

    /* сдвиг контента как у твоей фикс-панели */
    .container-content {
        margin-left: var(--dash-aside-w);
    }
}

@media (max-width: 1400px) {
    .hb-18 {
        font-size: 16px;
    }

    .hm-12 {
        font-size: 10px;
    }
}

@media (max-width: 1199px) {
    .navbar-brand img {
        width: 37px !important;
        border-radius: 5px;
    }

    .header-menu .nav-link {
        margin-bottom: 1rem;
        padding-left: 0;
        margin-left: 0;
    }

    .header-menu .nav-link:last-child {
        margin-bottom: 0;
    }

    button[data-bs-target="#navbarSearch"] img {
        transition: transform 0.3s ease;
    }

    button[data-bs-target="#navbarSearch"][aria-expanded="true"] img {
        transform: rotate(90deg) scale(1.1);
    }

    #navbarCollapse.collapsing {
        opacity: 0;
        transition: height .12s ease, opacity .12s ease;
    }

    #navbarCollapse.collapse {
        opacity: 0;
        transform: translateY(-10px);
        transition: opacity .35s ease, transform .35s ease;
        will-change: opacity, transform;
    }

    #navbarCollapse.collapse.show {
        opacity: 1;
        transform: none;
    }

    .notification-badge {
        top: -3px;
        right: -6px;
    }

    body:has(#navbarCollapse.show) {
        overflow: hidden;
    }

    .comment-item, [id] {
        scroll-margin-top: 70px;
    }

    .period-main-image {
        height: 300px;
    }

    .padding-content {
        padding-top: 50px;
    }

    .hb-100 {
        font-size: 50px;
    }

    .logo-text {
        font-size: 15px;
    }

    .game-tab, .era-tab .era-tab-inner {
        border-radius: 10px;
    }

    body.lock {
        overflow: hidden !important;
    }

    .vh-mobile-100 {
        height: 100vh;
    }

    .navbar-collapse {
        overflow-y: auto;
        scrollbar-color: transparent transparent;
        scrollbar-width: none;
        height: calc(100vh - 55px);
    }

    @supports (height: 100dvh) {
        .navbar-collapse {
            height: calc(100dvh - var(--nav-h));
        }
    }

    @supports not (height: 100dvh) {
        .navbar-collapse {
            height: calc((var(--vh, 1vh) * 100) - var(--nav-h));
        }
    }

    .navbar-collapse {
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
    }

    @supports (padding-top: env(safe-area-inset-top)) {
        .navbar.fixed-top {
            padding-top: max(env(safe-area-inset-top), 0px);
        }
    }

    @supports (padding-top: env(safe-area-inset-bottom)) {
        .navbar.fixed-top {
            padding-bottom: max(env(safe-area-inset-bottom), 0px);
        }
    }

    .logo-img {
        height: 80px;
        width: 80px !important;
        object-fit: contain;
        object-position: left;
    }

    .game-page-row {
        display: grid;
        grid-template-rows: auto 1fr;
        grid-template-columns: 100%
    }

    .game-area-wrapper {
        grid-template-rows: 1fr;
    }

    .hr-16, .hm-16, .hb-16 {
        font-size: 1em;
    }

    .hr-18, .hm-18, .hb-18 {
        font-size: 1.2em;
    }

    .hr-24, .hm-24, .hb-24 {
        font-size: 1.5em;
    }

    .hr-36, .hm-36, .hb-36 {
        font-size: 2.25em;
    }

    .hr-48, .hm-48, .hb-48 {
        font-size: 2.75em;
    }

    .mez-36 {
        font-size: 2.25em;
    }

    .sticky-top-z-1 {
        position: -webkit-sticky;
        position: sticky;
        top: 47px;
        z-index: 1;
    }

    .alert-custom-success, .alert-custom-warning {
        top: 63px;
    }

}

@media (max-width: 990px) {
    .levels-row, .progress-row {
        width: 150% !important;
    }

    .section-lg-absolute {
        position: relative !important;
        margin-bottom: -150px;
    }

    .hr-18, .hm-18, .hb-18 {
        font-size: 1.1em;
    }

    .hr-24, .hm-24, .hb-24 {
        font-size: 1.35em;
    }

    .hr-36, .hm-36, .hb-36 {
        font-size: 1em;
    }

    .hr-48, .hm-48, .hb-48 {
        font-size: 2.5em;
    }

    .mez-36 {
        font-size: 2em;
    }

    .alert-custom-success {
        top: 60px;
    }
}

@media (max-width: 768px) {
    .levels-row, .progress-row {
        width: 200% !important;
    }
    .period-main-image {
        height: 350px;
    }
    .dino-infobox {
        float: none !important;
        max-width: 100%;
        margin: 0 0 1rem 0;
    }
    .img-news-col {
        display: none;
    }
    .diet-img img{
        width: 20px;
        height: 20px;
    }
    /*.arrow-dino-back img{*/
    /*    width: 20px;*/
    /*}*/
    .section-md-absolute {
        position: relative !important;
        margin-bottom: -50px;
    }
    .hr-16, .hm-16, .hb-16, .hr-14, .hm-14, .hb-14 {
        font-size: .8em;
    }
    .hr-18, .hm-18, .hb-18 {
        font-size: 1.05em;
    }
    .hr-24, .hm-24, .hb-24 {
        font-size: 1.25em;
    }
    .hr-36, .hm-36, .hb-36 {
        font-size: 1.25em;
    }
    .hr-48, .hm-48, .hb-48 {
        font-size: 1.75em;
    }
    .hb-100 {
        font-size: 40px;
    }
    .mez-36 {
        font-size: 1.75em;
    }
    .login-image {
        display: none;
    }
}

@media (max-width: 576px) {
    .levels-row, .progress-row {
        width: 250%
    }
    .survey-popup {
        padding: 14px 14px 16px;
    }

    .survey-popup__body {
        align-items: flex-start;
    }

    .survey-popup__image {
        flex: 0 0 52px;
    }

    .survey-popup__image img {
        width: 52px;
        height: 52px;
    }
}