@media screen and (max-width: 1600px) {

    body {
        overflow-x: hidden;
    }

    .sidebar {
        top: 14px;
        right: 14px;
        width: 210px;
        min-width: 210px;
        max-width: 210px;
        height: calc(100vh - 28px);
        padding: 18px;
        border-radius: 22px;
    }

    .logo {
        font-size: 21px;
        margin-bottom: 18px;
        padding-bottom: 14px;
    }

    .sidebar-nav {
        gap: 10px;
    }

    .nav-button {
        font-size: 14px;
        padding: 12px 10px;
        border-radius: 15px;
    }

    .main-content {
        padding: 14px;
        padding-right: 238px;
        gap: 14px;
    }

    .resource-navbar {
        min-height: 62px;
        padding: 12px 130px 12px 16px;
        gap: 9px;
        border-radius: 22px;
    }

    .resource-navbar-logos {
        gap: 6px;
        margin-right: 4px;
    }

    .resource-navbar-logo {
        height: 28px;
        max-width: 82px;
    }

    .resource-navbar-logo.beta-logo {
        height: 26px;
        max-width: 78px;
    }

    .resource-item {
        padding: 8px 10px;
        gap: 7px;
        border-radius: 13px;
    }

    .resource-item img {
        width: 22px;
        height: 22px;
    }

    .resource-item span {
        font-size: 12px;
        line-height: 1.15;
    }

    .energy-item {
        margin-right: 0;
    }

    .special-item {
        margin-left: 0;
    }

    .logout-navbar-button {
        right: 12px;
        padding: 7px 12px;
        font-size: 12px;
    }

    .game-container {
        min-height: calc(100vh - 145px);
        padding: 24px;
        gap: 30px;
        border-radius: 22px;
    }

    .upgrade-section {
        gap: 18px;
    }

    .upgrade-section-title {
        padding: 11px 30px;
        font-size: 20px;
        letter-spacing: 1px;
        border-radius: 15px;
    }

    .game-content h1 {
        font-size: 34px;
    }

    .game-content p {
        font-size: 15px;
        line-height: 1.6;
    }

    .main-game-image {
        width: 145px;
        margin-bottom: 20px;
    }

    .game-content-les {
        padding-top: 20px;
    }

    .game-content-doly {
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
        gap: 12px;
    }

    .mine-card {
        min-height: 230px;
        padding: 15px;
        border-radius: 18px;
    }

    .upgrades-container,
    .machines-container,
    .shop-container,
    .achievements-container,
    .quest-container {
        gap: 14px;
    }

    .upgrade-card,
    .machine-card,
    .shop-card,
    .achievement-card,
    .quest-card {
        width: 225px;
        padding: 16px;
    }

    .upgrade-card {
        min-height: 245px;
    }

    .machine-card {
        min-height: 365px;
    }

    .shop-card {
        min-height: 300px;
    }

    .achievement-card {
        min-height: 285px;
    }

    .quest-card {
        min-height: 355px;
    }

    .machine-image {
        width: 120px;
        height: 120px;
    }

    .upgrade-image,
    .achievement-image,
    .shop-image,
    .quest-image {
        width: 76px;
        height: 76px;
    }

    .action-button {
        padding: 10px 14px;
        font-size: 13px;
        border-radius: 15px;
    }

    .footer {
        padding: 12px 18px;
        font-size: 12px;
        border-radius: 18px;
    }

    .admin-layout {
        grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
        gap: 16px;
    }

    .admin-card {
        padding: 18px;
        gap: 11px;
        border-radius: 18px;
    }

    .admin-card h2 {
        font-size: 19px;
    }

    .settings-panel,
    .admin-panel {
        width: min(390px, 100%);
        padding: 20px;
    }

    .settings-row {
        padding: 11px 13px;
        gap: 12px;
        font-size: 13px;
    }

    .farm-layout {
        gap: 18px;
    }

    .farm-resource-sidebar {
        width: 220px;
        padding: 14px;
    }

    .farm-shop {
        width: 300px;
        padding: 16px;
    }

    .farm-shop-grid {
        gap: 10px;
    }

    .animal-shop-card {
        min-height: 215px;
        padding: 12px;
    }

    .animal-shop-image {
        width: 74px;
        height: 74px;
    }

    .rebirth-card {
        width: min(620px, 100%);
        padding: 28px;
    }

    .leaderboard-table th,
    .leaderboard-table td {
        padding: 11px 9px;
        font-size: 13px;
    }

    .leaderboard-prefix {
        font-size: 10px;
        padding: 2px 6px;
        margin-right: 5px;
    }

    .global-chat-widget {
        left: 8px;
    }

    .global-chat-window {
        width: 340px;
    }

    .global-chat-messages {
        max-height: 330px;
        min-height: 220px;
    }

    #timed-permanent-popups .timed-permanent-popup {
        width: 255px !important;
        min-width: 255px !important;
        max-width: 255px !important;
        min-height: 70px !important;
    }

    #timed-permanent-popups .timed-popup-icon {
        width: 46px !important;
        height: 46px !important;
        min-width: 46px !important;
        max-width: 46px !important;
        min-height: 46px !important;
        max-height: 46px !important;
        flex: 0 0 46px !important;
    }

    #timed-permanent-popups .timed-popup-icon img {
        width: 28px !important;
        height: 28px !important;
    }
}

@media screen and (max-width: 1366px) {

    .sidebar {
        width: 185px;
        min-width: 185px;
        max-width: 185px;
        padding: 14px;
        border-radius: 20px;
    }

    .logo {
        font-size: 19px;
        margin-bottom: 14px;
        padding-bottom: 12px;
    }

    .sidebar-nav {
        gap: 8px;
    }

    .nav-button {
        font-size: 13px;
        padding: 10px 8px;
        border-radius: 13px;
    }

    .main-content {
        padding: 12px;
        padding-right: 210px;
        gap: 12px;
    }

    .resource-navbar {
        padding: 10px 115px 10px 12px;
        gap: 7px;
        border-radius: 20px;
    }

    .resource-item {
        padding: 7px 8px;
        gap: 5px;
    }

    .resource-item img {
        width: 20px;
        height: 20px;
    }

    .resource-item span {
        font-size: 11px;
    }

    .logout-navbar-button {
        right: 10px;
        padding: 7px 10px;
        font-size: 11px;
    }

    .game-container {
        padding: 18px;
        gap: 24px;
    }

    .upgrade-section-title {
        font-size: 18px;
        padding: 10px 24px;
    }

    .upgrade-card,
    .machine-card,
    .shop-card,
    .achievement-card,
    .quest-card {
        width: 205px;
        padding: 14px;
    }

    .machine-image {
        width: 105px;
        height: 105px;
    }

    .farm-layout {
        flex-wrap: wrap;
    }

    .farm-resource-sidebar,
    .farm-shop {
        width: min(100%, 520px);
    }

    .farm-scene {
        width: min(850px, 100%);
    }

    .buy-aqualit-box {
        position: static;
        align-self: flex-end;
        margin-bottom: 10px;
    }

    .leaderboard-table {
        min-width: 880px;
    }

    .daily-reward-window {
        width: min(900px, 94vw);
        padding: 24px;
    }

    .daily-reward-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media screen and (max-height: 820px) and (min-width: 901px) {

    .sidebar {
        overflow-y: auto;
        padding: 12px;
    }

    .logo {
        margin-bottom: 10px;
        padding-bottom: 10px;
    }

    .sidebar-nav {
        gap: 7px;
    }

    .nav-button {
        padding: 8px 7px;
        font-size: 12px;
    }

    .game-container {
        min-height: calc(100vh - 125px);
        padding-top: 16px;
        padding-bottom: 16px;
    }

    .main-game-image {
        width: 120px;
        margin-bottom: 14px;
    }

    .global-chat-messages {
        max-height: 260px;
        min-height: 190px;
    }
}




@media screen and (max-width: 1600px) {

    .admin-resource-navbar .resource-plate-item {
        width: 158px;
        height: 60px;
    }

    .admin-resource-navbar .resource-plate-item .resource-plate-count {
        min-width: 70px;
        max-width: 92px;

        font-size: 11px;
    }

}

@media screen and (max-width: 1366px) {

    .admin-resource-navbar .resource-plate-item {
        width: 138px;
        height: 52px;
    }

    .admin-resource-navbar .resource-plate-item .resource-plate-count {
        min-width: 60px;
        max-width: 82px;

        font-size: 10px;
    }

}




@media screen and (max-width: 1600px) {
    .admin-resource-navbar .resource-plate-item {
        background-size: 100% auto !important;
        background-repeat: no-repeat !important;
        background-position: center center !important;
    }
}

@media screen and (max-width: 1366px) {
    .admin-resource-navbar .resource-plate-item {
        background-size: 100% auto !important;
        background-repeat: no-repeat !important;
        background-position: center center !important;
    }
}





@media screen and (max-width: 1600px) {

    .admin-resource-navbar .resource-plate-item,
    .admin-resource-navbar .resource-plate-item:hover {
        width: 160px !important;
        height: 64px !important;

        background-size: 100% auto !important;
        background-position: center center !important;
        background-repeat: no-repeat !important;

        padding: 0 !important;
        border: none !important;
        box-shadow: none !important;
        overflow: visible !important;
    }

    .admin-resource-navbar .resource-plate-item .resource-plate-count {
        left: 50% !important;
        top: 50% !important;

        transform: translate(-50%, -50%) !important;

        min-width: 76px !important;
        max-width: 104px !important;

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

}

@media screen and (max-width: 1366px) {

    .admin-resource-navbar .resource-plate-item,
    .admin-resource-navbar .resource-plate-item:hover {
        width: 142px !important;
        height: 56px !important;

        background-size: 100% auto !important;
        background-position: center center !important;
        background-repeat: no-repeat !important;
    }

    .admin-resource-navbar .resource-plate-item .resource-plate-count {
        min-width: 68px !important;
        max-width: 92px !important;

        font-size: 10px !important;
    }

}




@media screen and (max-width: 1600px) {

    .admin-resource-navbar .resource-plate-item,
    .admin-resource-navbar .resource-plate-item:hover {
        width: 160px !important;
        height: 64px !important;

        padding: 0 !important;
        border: none !important;
        box-shadow: none !important;

        background-size: 100% auto !important;
        background-position: center center !important;
        background-repeat: no-repeat !important;

        overflow: visible !important;
    }

    .admin-resource-navbar .resource-plate-item .resource-plate-count {
        left: 50% !important;
        top: calc(50% - 2px) !important;

        transform: translate(-50%, -50%) !important;

        min-width: 76px !important;
        max-width: 104px !important;

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

}

@media screen and (max-width: 1366px) {

    .admin-resource-navbar .resource-plate-item,
    .admin-resource-navbar .resource-plate-item:hover {
        width: 142px !important;
        height: 56px !important;

        background-size: 100% auto !important;
        background-position: center center !important;
        background-repeat: no-repeat !important;
    }

    .admin-resource-navbar .resource-plate-item .resource-plate-count {
        top: calc(50% - 2px) !important;

        min-width: 68px !important;
        max-width: 92px !important;

        font-size: 10px !important;
    }

}




@media screen and (max-width: 1600px) {

    .auth-login-layout {
        gap:18px;
    }

    .saved-accounts-card {
        width:330px;
    }

    .saved-account-row {
        padding:12px;
        border-radius:16px;
    }

    .saved-account-info strong {
        font-size:14px;
        max-width:130px;
    }

    .saved-account-login-button {
        padding:9px 10px;
        font-size:11px;
    }

}

@media screen and (max-width: 900px) {

    .auth-login-layout {
        flex-direction:column;
        align-items:center;
    }

    .saved-accounts-card,
    .auth-login-layout .auth-card {
        width:430px;
        max-width:100%;
    }

}



@media screen and (max-width: 1600px) {

    .sidebar .ui-sidebar-nav {
        gap: 10px !important;
    }

    .sidebar .ui-sidebar-button {
        width: 80px !important;
        height: 80px !important;
    }

}

@media screen and (max-width: 1366px) {

    .sidebar .ui-sidebar-nav {
        gap: 8px !important;
    }

    .sidebar .ui-sidebar-button {
        width: 70px !important;
        height: 70px !important;
    }

}

@media screen and (max-height: 820px) and (min-width: 901px) {

    .sidebar .ui-sidebar-nav {
        gap: 6px !important;
    }

    .sidebar .ui-sidebar-button {
        width: 62px !important;
        height: 62px !important;
    }

}





@media screen and (max-width: 1600px) {

    .ui-image-sidebar {
        width: 315px !important;
        min-width: 315px !important;
        max-width: 315px !important;
        padding: 18px 20px !important;
    }

    .admin-ui-main-content {
        padding-right: 345px !important;
    }

    .ui-image-sidebar .logo {
        margin-bottom: 18px !important;
    }

    .ui-image-sidebar .ui-sidebar-nav {
        column-gap: 18px !important;
        row-gap: 14px !important;
    }

    .ui-image-sidebar .ui-sidebar-button,
    .ui-image-sidebar .ui-sidebar-button img {
        width: 120px !important;
        height: 120px !important;
    }

}

@media screen and (max-width: 1366px) {

    .ui-image-sidebar {
        width: 285px !important;
        min-width: 285px !important;
        max-width: 285px !important;
        padding: 16px !important;
    }

    .admin-ui-main-content {
        padding-right: 315px !important;
    }

    .ui-image-sidebar .ui-sidebar-nav {
        column-gap: 14px !important;
        row-gap: 12px !important;
    }

    .ui-image-sidebar .ui-sidebar-button,
    .ui-image-sidebar .ui-sidebar-button img {
        width: 108px !important;
        height: 108px !important;
    }

}

@media screen and (max-height: 820px) and (min-width: 901px) {

    .ui-image-sidebar {
        padding: 12px !important;
    }

    .ui-image-sidebar .logo {
        margin-bottom: 10px !important;
        padding-bottom: 10px !important;
    }

    .ui-image-sidebar .ui-sidebar-nav {
        column-gap: 12px !important;
        row-gap: 8px !important;
    }

    .ui-image-sidebar .ui-sidebar-button,
    .ui-image-sidebar .ui-sidebar-button img {
        width: 96px !important;
        height: 96px !important;
    }

}




@media screen and (max-width: 1600px) {

    .farm-animal-upgrades-grid {
        max-height: 310px;
    }

    .animal-upgrade-card .animal-upgrade-cost {
        font-size: 11px !important;
    }

}

@media screen and (max-width: 1366px) {

    .farm-animal-upgrades-grid {
        max-height: 280px;
    }

}




@media screen and (max-width: 1600px) {

    .farm-machine-card {
        min-height: 245px;
    }

    .farm-machine-image {
        width: 72px !important;
        height: 72px !important;
    }

    .farm-machine-card p {
        font-size: 11px;
    }

}

@media screen and (max-width: 1366px) {

    .farm-machine-image {
        width: 64px !important;
        height: 64px !important;
    }

}



@media screen and (max-width: 1600px) {

    .farm-shop-area{
        width:100%;
        display:flex;
        flex-wrap:wrap;
        justify-content:center;
        gap:16px;
    }

    .farm-shop-area .farm-shop{
        width:min(100%, 360px);
        flex:0 1 360px;
        max-height:none;
        padding:16px;
    }

    .farm-shop-area .farm-shop-grid{
        gap:10px;
    }

}

@media screen and (max-width: 1366px) {

    .farm-shop-area .farm-shop{
        width:min(100%, 330px);
        flex:0 1 330px;
    }

}

@media screen and (max-width: 900px) {

    .farm-shop-area{
        flex-direction:column;
        align-items:center;
    }

    .farm-shop-area .farm-shop{
        width:min(100%, 520px);
        flex:0 1 auto;
    }

}





@media screen and (max-width: 1600px){

    .farm-layout{
        display:grid !important;
        grid-template-columns:200px minmax(500px, 1fr) 360px !important;
        gap:16px !important;
        align-items:start !important;
        justify-content:center !important;
        flex-wrap:nowrap !important;
    }

    .farm-resource-sidebar{
        width:100% !important;
        max-height:calc(100vh - 190px) !important;
        overflow-y:auto !important;
    }

    .farm-scene{
        width:100% !important;
        max-width:none !important;
        min-width:0 !important;
    }

    .farm-shop-area{
        width:100% !important;
        display:flex !important;
        flex-direction:column !important;
        flex-wrap:nowrap !important;
        align-items:stretch !important;
        justify-content:flex-start !important;
        gap:14px !important;
    }

    .farm-shop-area .farm-shop,
    .farm-shop-card{
        width:100% !important;
        flex:0 0 auto !important;
        max-height:calc((100vh - 225px) / 2) !important;
        overflow-y:auto !important;
        padding:14px !important;
    }

    .farm-shop-area .farm-shop-grid{
        grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
        gap:9px !important;
    }

}

@media screen and (max-width: 1366px){

    .farm-layout{
        grid-template-columns:175px minmax(430px, 1fr) 320px !important;
        gap:12px !important;
        flex-wrap:nowrap !important;
    }

    .farm-resource-sidebar{
        max-height:calc(100vh - 175px) !important;
        padding:12px !important;
    }

    .farm-resource-item{
        padding:8px 9px !important;
        gap:7px !important;
    }

    .farm-resource-item img{
        width:24px !important;
        height:24px !important;
    }

    .farm-resource-item span{
        font-size:12px !important;
    }

    .farm-shop-area .farm-shop,
    .farm-shop-card{
        max-height:calc((100vh - 205px) / 2) !important;
        padding:12px !important;
    }

    .farm-shop-title{
        font-size:18px !important;
        margin-bottom:12px !important;
    }

    .farm-shop-title-spaced{
        margin-top:16px !important;
    }

    .animal-shop-card,
    .animal-upgrade-card,
    .farm-machine-card{
        min-height:190px !important;
        padding:10px !important;
    }

    .animal-shop-image,
    .animal-upgrade-image,
    .farm-machine-image{
        width:62px !important;
        height:62px !important;
    }

}

@media screen and (max-width: 1120px){

    .farm-layout{
        display:flex !important;
        flex-wrap:wrap !important;
    }

    .farm-resource-sidebar,
    .farm-shop-area{
        width:min(100%, 520px) !important;
    }

    .farm-scene{
        width:min(850px, 100%) !important;
    }

    .farm-shop-area .farm-shop,
    .farm-shop-card{
        max-height:none !important;
    }

}




@media screen and (max-width: 1600px){

    .farm-page-container{
        align-items:center !important;
        overflow-x:hidden !important;
    }

    .farm-layout{
        width:100% !important;
        display:grid !important;
        grid-template-columns:240px minmax(500px, 1fr) 360px !important;
        gap:16px !important;
        align-items:start !important;
        justify-content:center !important;
        flex-wrap:nowrap !important;
    }

    .farm-resource-sidebar{
        width:240px !important;
        min-width:240px !important;
        max-width:240px !important;
        padding:14px !important;
        gap:10px !important;
        max-height:calc(100vh - 190px) !important;
        overflow-y:auto !important;
    }

    .farm-resource-item{
        min-height:52px !important;
        padding:9px 12px !important;
        gap:9px !important;
        border-radius:15px !important;
        overflow:hidden !important;
    }

    .farm-resource-item img{
        width:28px !important;
        height:28px !important;
        min-width:28px !important;
        flex:0 0 28px !important;
    }

    .farm-resource-item span{
        width:100% !important;
        min-width:0 !important;
        display:flex !important;
        justify-content:space-between !important;
        align-items:center !important;
        gap:7px !important;
        white-space:nowrap !important;
        overflow:hidden !important;
        text-overflow:ellipsis !important;
        font-size:13px !important;
        line-height:1.1 !important;
    }

    .farm-resource-item strong{
        flex:0 0 auto !important;
        white-space:nowrap !important;
        font-size:13px !important;
    }

    .farm-scene{
        width:100% !important;
        max-width:760px !important;
        min-width:0 !important;
        justify-self:center !important;
    }

    .farm-shop-area{
        width:360px !important;
        max-width:360px !important;
        display:flex !important;
        flex-direction:column !important;
        flex-wrap:nowrap !important;
        align-items:stretch !important;
        justify-content:flex-start !important;
        gap:14px !important;
    }

    .farm-shop-area .farm-shop,
    .farm-shop-card{
        width:100% !important;
        max-width:100% !important;
        flex:0 0 auto !important;
        max-height:calc((100vh - 225px) / 2) !important;
        overflow-y:auto !important;
        padding:14px !important;
    }

    .farm-shop-area .farm-shop-grid{
        grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
        gap:9px !important;
    }
}

@media screen and (max-width: 1366px){

    .farm-layout{
        grid-template-columns:230px minmax(420px, 1fr) 315px !important;
        gap:12px !important;
        flex-wrap:nowrap !important;
    }

    .farm-resource-sidebar{
        width:230px !important;
        min-width:230px !important;
        max-width:230px !important;
        padding:12px !important;
        max-height:calc(100vh - 175px) !important;
    }

    .farm-resource-title{
        font-size:16px !important;
        padding-bottom:10px !important;
        margin-bottom:4px !important;
    }

    .farm-resource-item{
        min-height:50px !important;
        padding:8px 11px !important;
        gap:8px !important;
    }

    .farm-resource-item img{
        width:26px !important;
        height:26px !important;
        min-width:26px !important;
        flex:0 0 26px !important;
    }

    .farm-resource-item span{
        font-size:12px !important;
        gap:6px !important;
    }

    .farm-resource-item strong{
        font-size:12px !important;
    }

    .farm-scene{
        max-width:620px !important;
    }

    .farm-shop-area{
        width:315px !important;
        max-width:315px !important;
        gap:12px !important;
    }

    .farm-shop-area .farm-shop,
    .farm-shop-card{
        max-height:calc((100vh - 205px) / 2) !important;
        padding:12px !important;
    }

    .farm-shop-title{
        font-size:17px !important;
        margin-bottom:11px !important;
    }

    .farm-shop-title-spaced{
        margin-top:15px !important;
    }

    .animal-shop-card,
    .animal-upgrade-card,
    .farm-machine-card{
        min-height:182px !important;
        padding:9px !important;
    }

    .animal-shop-image,
    .animal-upgrade-image,
    .farm-machine-image{
        width:58px !important;
        height:58px !important;
    }
}

@media screen and (max-width: 1120px){

    .farm-layout{
        display:flex !important;
        flex-wrap:wrap !important;
        justify-content:center !important;
    }

    .farm-resource-sidebar{
        width:min(100%, 520px) !important;
        min-width:0 !important;
        max-width:520px !important;
    }

    .farm-shop-area{
        width:min(100%, 520px) !important;
        max-width:520px !important;
    }

    .farm-scene{
        width:min(850px, 100%) !important;
        max-width:850px !important;
    }

    .farm-shop-area .farm-shop,
    .farm-shop-card{
        max-height:none !important;
    }
}

@media screen and (max-width: 1600px){
    .farm-resource-sidebar{
        transform:translateX(22px) !important;
    }
}

@media screen and (max-width: 1120px){
    .farm-resource-sidebar{
        transform:none !important;
    }
}
@media screen and (max-width: 1600px) {
    .mines-map-container {
        min-height: calc(100vh - 150px) !important;
        padding: 0 !important;
    }

    .mines-map-stage {
        width: min(100%, calc((100vh - 175px) * 16 / 9)) !important;
        border-radius: 20px !important;
    }
}

@media screen and (max-width: 1366px) {
    .mines-map-container {
        min-height: calc(100vh - 138px) !important;
    }

    .mines-map-stage {
        width: min(100%, calc((100vh - 160px) * 16 / 9)) !important;
        border-radius: 18px !important;
    }
}

@media screen and (max-height: 820px) and (min-width: 901px) {
    .mines-map-container {
        min-height: calc(100vh - 125px) !important;
    }

    .mines-map-stage {
        width: min(100%, calc((100vh - 145px) * 16 / 9)) !important;
    }
}

@media screen and (max-width: 1600px) {
    .mine-map-hotspot-stone {
        left: 2.8% !important;
        top: 30.5% !important;
        width: 18.5% !important;
        height: 31% !important;
    }
}

@media screen and (max-width: 1366px) {
    .mine-map-hotspot {
        border-width: 2px !important;
        border-radius: 14px !important;
    }
}


@media screen and (max-width: 1600px) {
    .rebirth-actions {
        gap: 10px;
    }

    .perks-page-container {
        gap: 18px;
    }

    .perks-header-card {
        width: 100%;
        padding: 20px;
        border-radius: 22px;
        gap: 16px;
    }

    .perks-header-icon {
        width: 72px;
        height: 72px;
    }

    .perks-header-content h1 {
        font-size: 27px;
    }

    .perks-header-content p {
        font-size: 13px;
        line-height: 1.45;
    }

    .perks-points-box {
        min-width: 145px;
        padding: 13px 14px;
        border-radius: 17px;
    }

    .perks-points-box strong {
        font-size: 25px;
    }

    .perks-grid {
        width: 100%;
        grid-template-columns: repeat(3, minmax(190px, 1fr));
        gap: 14px;
    }

    .perk-card {
        min-height: 245px;
        padding: 16px;
        border-radius: 18px;
        gap: 10px;
    }

    .perk-card h2 {
        font-size: 17px;
    }

    .perk-description {
        font-size: 12px;
        line-height: 1.4;
    }

    .perk-level-badge {
        font-size: 10px;
        padding: 5px 8px;
    }

    .perk-cost {
        font-size: 12px;
    }
}

@media screen and (max-width: 1366px) {
    .perks-header-card {
        padding: 16px;
    }

    .perks-header-icon {
        width: 62px;
        height: 62px;
    }

    .perks-header-content h1 {
        font-size: 23px;
    }

    .perks-header-content p {
        font-size: 12px;
    }

    .perks-points-box {
        min-width: 125px;
        padding: 11px 12px;
    }

    .perks-grid {
        grid-template-columns: repeat(2, minmax(210px, 1fr));
        gap: 12px;
    }

    .perk-card {
        min-height: 230px;
        padding: 14px;
    }
}

@media screen and (max-width: 900px) {
    .perks-header-card {
        flex-direction: column;
        text-align: center;
    }

    .perks-points-box {
        width: 100%;
    }

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


@media screen and (max-width: 1600px) {
    .rebirth-shop-category{
        gap:16px;
    }

    .rebirth-shop-category-header{
        padding:18px 20px;
        border-radius:18px;
    }

    .rebirth-shop-category-header h2{
        font-size:24px;
    }

    .rebirth-shop-category-header p{
        font-size:13px;
    }

    .rebirth-shop-grid{
        gap:14px;
    }

    .rebirth-shop-card{
        width:250px;
        min-height:310px;
        padding:16px;
        border-radius:17px;
        gap:11px;
    }

    .rebirth-shop-card-top h2{
        font-size:17px;
    }

    .rebirth-shop-description{
        font-size:12px;
        min-height:62px;
    }

    .rebirth-shop-status{
        font-size:10px;
        padding:4px 7px;
    }

    .rebirth-shop-costs,
    .rebirth-shop-level{
        font-size:12px;
    }
}

@media screen and (max-width: 1366px) {
    .rebirth-shop-card{
        width:225px;
        min-height:300px;
        padding:14px;
    }

    .rebirth-shop-card-top{
        flex-direction:column;
        align-items:center;
        text-align:center;
    }

    .rebirth-shop-description{
        text-align:center;
    }
}

@media screen and (max-width: 1600px) {
    .village-map-container {
        min-height: calc(100vh - 145px) !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        overflow: hidden !important;
    }

    .village-map-stage {
        width: min(100%, calc((100vh - 145px) * 1.7777777778)) !important;
        max-width: 100% !important;
        aspect-ratio: 16 / 9 !important;
    }
}

@media screen and (max-width: 1366px) {
    .village-map-container {
        min-height: calc(100vh - 125px) !important;
    }

    .village-map-stage {
        width: min(100%, calc((100vh - 125px) * 1.7777777778)) !important;
    }
}

@media screen and (max-width: 900px) {
    .village-map-container {
        min-height: 56.25vw !important;
    }

    .village-map-stage {
        width: 100% !important;
    }
}


@media screen and (max-width: 1600px) {
    .forest-page-container {
        padding: 18px !important;
    }

    .forest-resource-navbar {
        width: min(100%, 1120px) !important;
        margin-bottom: 12px !important;
        padding: 10px 14px !important;
        border-radius: 17px !important;
    }

    .forest-resource-item {
        min-width: 205px !important;
        padding: 8px 13px !important;
        font-size: 13px !important;
    }

    .forest-resource-item img {
        width: 28px !important;
        height: 28px !important;
    }

    .forest-map-stage {
        width: min(100%, 1120px) !important;
        border-radius: 20px !important;
    }
}

@media screen and (max-width: 1366px) {
    .forest-page-container {
        padding: 14px !important;
    }

    .forest-resource-navbar {
        width: min(100%, 980px) !important;
        margin-bottom: 10px !important;
        padding: 9px 12px !important;
        border-radius: 15px !important;
    }

    .forest-resource-item {
        min-width: 185px !important;
        padding: 7px 11px !important;
        font-size: 12px !important;
    }

    .forest-resource-item img {
        width: 24px !important;
        height: 24px !important;
    }

    .forest-map-stage {
        width: min(100%, 980px) !important;
        border-radius: 18px !important;
    }
}

@media screen and (max-height: 820px) and (min-width: 901px) {
    .forest-map-stage {
        width: min(100%, 1040px) !important;
    }
}


@media screen and (max-width: 1600px) {
    .forest-tree-ui {
        width: min(330px, 46%) !important;
        padding: 10px 14px !important;
        border-radius: 16px !important;
    }

    .forest-tree-title {
        font-size: 16px !important;
    }

    .forest-tree-hp-text {
        font-size: 12px !important;
    }
}

@media screen and (max-width: 1366px) {
    .forest-tree-ui {
        top: 4% !important;
        width: min(300px, 50%) !important;
        padding: 9px 12px !important;
    }

    .forest-tree-title {
        font-size: 15px !important;
    }

    .forest-tree-rarity {
        font-size: 11px !important;
    }

    .forest-tree-hp-bar {
        height: 9px !important;
    }
}


@media screen and (max-width: 900px) {
    .forest-resource-navbar {
        width: 100% !important;
        padding: 8px 10px !important;
        margin-bottom: 10px !important;
    }

    .forest-resource-item {
        width: 100% !important;
        min-width: 0 !important;
        font-size: 11px !important;
    }

    .forest-resource-item img {
        width: 22px !important;
        height: 22px !important;
    }
}


@media screen and (max-width: 1600px) {
    .ui-image-sidebar {
        width: clamp(255px, 19.5vw, 315px) !important;
        min-width: clamp(255px, 19.5vw, 315px) !important;
        max-width: clamp(255px, 19.5vw, 315px) !important;
        padding: clamp(12px, 1.1vw, 18px) clamp(12px, 1.25vw, 20px) !important;
        overflow: hidden !important;
        display: flex !important;
        flex-direction: column !important;
    }

    .admin-ui-main-content {
        padding-right: calc(clamp(255px, 19.5vw, 315px) + 30px) !important;
    }

    .ui-image-sidebar .logo {
        flex: 0 0 auto !important;
        margin-bottom: clamp(10px, 1.1vw, 18px) !important;
        padding-bottom: clamp(9px, 0.9vw, 14px) !important;
    }

    .ui-image-sidebar .ui-sidebar-nav {
        --ui-sidebar-gap-x: clamp(10px, 1.15vw, 18px);
        --ui-sidebar-gap-y: clamp(7px, 0.9vw, 14px);
        --ui-sidebar-button-size: min(120px, calc((100% - var(--ui-sidebar-gap-x)) / 2), calc((100vh - 190px) / 7));

        display: grid !important;
        grid-template-columns: repeat(2, var(--ui-sidebar-button-size)) !important;
        grid-auto-rows: var(--ui-sidebar-button-size) !important;
        column-gap: var(--ui-sidebar-gap-x) !important;
        row-gap: var(--ui-sidebar-gap-y) !important;

        width: 100% !important;
        max-height: 100% !important;
        flex: 1 1 auto !important;

        justify-content: center !important;
        justify-items: center !important;
        align-content: start !important;
        align-items: center !important;

        overflow: hidden !important;
    }

    .ui-image-sidebar .ui-sidebar-button,
    .ui-image-sidebar .ui-sidebar-button img {
        width: var(--ui-sidebar-button-size) !important;
        height: var(--ui-sidebar-button-size) !important;
        max-width: var(--ui-sidebar-button-size) !important;
        max-height: var(--ui-sidebar-button-size) !important;
    }

    .ui-image-sidebar .ui-sidebar-button {
        min-width: 0 !important;
        min-height: 0 !important;
        flex: 0 0 var(--ui-sidebar-button-size) !important;
        overflow: visible !important;
    }

    .ui-image-sidebar .ui-sidebar-button img {
        object-fit: contain !important;
    }
}

@media screen and (max-width: 1366px) {
    .ui-image-sidebar {
        width: clamp(235px, 20.8vw, 285px) !important;
        min-width: clamp(235px, 20.8vw, 285px) !important;
        max-width: clamp(235px, 20.8vw, 285px) !important;
    }

    .admin-ui-main-content {
        padding-right: calc(clamp(235px, 20.8vw, 285px) + 26px) !important;
    }

    .ui-image-sidebar .ui-sidebar-nav {
        --ui-sidebar-button-size: min(108px, calc((100% - var(--ui-sidebar-gap-x)) / 2), calc((100vh - 175px) / 7));
    }
}

@media screen and (max-height: 820px) and (min-width: 901px) {
    .ui-image-sidebar {
        padding: 10px !important;
    }

    .ui-image-sidebar .logo {
        margin-bottom: 8px !important;
        padding-bottom: 8px !important;
    }

    .ui-image-sidebar .ui-sidebar-nav {
        --ui-sidebar-gap-y: 6px;
        --ui-sidebar-button-size: min(96px, calc((100% - var(--ui-sidebar-gap-x)) / 2), calc((100vh - 145px) / 7));
    }
}

@media screen and (max-height: 700px) and (min-width: 901px) {
    .ui-image-sidebar .ui-sidebar-nav {
        --ui-sidebar-gap-y: 4px;
        --ui-sidebar-button-size: min(82px, calc((100% - var(--ui-sidebar-gap-x)) / 2), calc((100vh - 125px) / 7));
    }
}

@media screen and (max-width: 900px) {
    html,
    body {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        overflow-x: hidden !important;
    }

    body {
        display: block !important;
        padding: 0 !important;
        margin: 0 !important;
        min-height: 100dvh !important;
    }

    .main-content,
    .admin-ui-main-content,
    .maintenance-main {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        min-height: 100dvh !important;
        margin: 0 !important;
        padding: 10px 10px 118px 10px !important;
        padding-right: 10px !important;
        box-sizing: border-box !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
    }

    .sidebar,
    .ui-image-sidebar {
        position: fixed !important;
        top: auto !important;
        left: 8px !important;
        right: 8px !important;
        bottom: 8px !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        height: 92px !important;
        min-height: 92px !important;
        max-height: 92px !important;
        padding: 8px 10px !important;
        border-radius: 22px !important;
        z-index: 100000 !important;
        overflow: hidden !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: flex-start !important;
    }

    .sidebar .logo,
    .ui-image-sidebar .logo {
        display: none !important;
    }

    .sidebar-nav,
    .ui-sidebar-nav,
    .ui-image-sidebar .ui-sidebar-nav {
        width: 100% !important;
        max-width: 100% !important;
        height: 100% !important;
        min-height: 0 !important;
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 8px !important;
        column-gap: 8px !important;
        row-gap: 0 !important;
        padding: 0 4px 4px 4px !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .ui-sidebar-button,
    .ui-image-sidebar .ui-sidebar-button,
    .sidebar .ui-sidebar-button {
        width: 68px !important;
        min-width: 68px !important;
        max-width: 68px !important;
        height: 68px !important;
        min-height: 68px !important;
        max-height: 68px !important;
        flex: 0 0 68px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .ui-sidebar-button img,
    .ui-image-sidebar .ui-sidebar-button img,
    .sidebar .ui-sidebar-button img {
        width: 68px !important;
        min-width: 68px !important;
        max-width: 68px !important;
        height: 68px !important;
        min-height: 68px !important;
        max-height: 68px !important;
        object-fit: contain !important;
        display: block !important;
    }

    .resource-navbar {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        min-height: 0 !important;
        padding: 10px !important;
        border-radius: 20px !important;
        display: flex !important;
        justify-content: flex-start !important;
        align-items: center !important;
        flex-wrap: nowrap !important;
        gap: 8px !important;
        overflow-x: auto !important;
        overflow-y: visible !important;
        box-sizing: border-box !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .resource-navbar-logos,
    .resource-item,
    .energy-item,
    .special-item,
    .logout-navbar-button {
        flex: 0 0 auto !important;
        margin: 0 !important;
    }

    .resource-item,
    .energy-item,
    .special-item {
        min-width: max-content !important;
        padding: 8px 11px !important;
        gap: 7px !important;
        border-radius: 14px !important;
    }

    .resource-item img {
        width: 22px !important;
        height: 22px !important;
    }

    .resource-item span {
        font-size: 12px !important;
        line-height: 1.15 !important;
        white-space: nowrap !important;
    }

    .logout-navbar-button {
        position: static !important;
        transform: none !important;
        width: auto !important;
        min-width: max-content !important;
        padding: 8px 12px !important;
        font-size: 12px !important;
    }

    .game-container,
    .forest-page-container,
    .farm-page-container,
    .shop-page-container,
    .maintenance-container {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        min-height: auto !important;
        padding: 12px !important;
        gap: 18px !important;
        border-radius: 20px !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }

    .footer {
        width: 100% !important;
        max-width: 100% !important;
        padding: 12px 14px !important;
        border-radius: 18px !important;
        font-size: 11px !important;
        line-height: 1.4 !important;
        text-align: center !important;
        box-sizing: border-box !important;
    }

    .game-content h1 {
        font-size: 26px !important;
    }

    .game-content p {
        font-size: 14px !important;
        line-height: 1.55 !important;
    }

    .upgrades-container,
    .machines-container,
    .shop-container,
    .achievements-container,
    .quest-container,
    .admin-layout,
    .settings-layout,
    .rebirth-container,
    .rebirth-shop-grid,
    .perk-grid,
    .rebirth-shop-items-grid {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 12px !important;
        justify-items: stretch !important;
        align-items: stretch !important;
        box-sizing: border-box !important;
    }

    .upgrade-card,
    .machine-card,
    .shop-card,
    .achievement-card,
    .quest-card,
    .admin-card,
    .settings-panel,
    .admin-panel,
    .rebirth-card,
    .perk-card,
    .rebirth-shop-card,
    .maintenance-card {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        min-height: auto !important;
        padding: 16px !important;
        border-radius: 18px !important;
        box-sizing: border-box !important;
    }

    .upgrade-section {
        width: 100% !important;
        gap: 14px !important;
    }

    .upgrade-section-title,
    .farm-shop-title {
        width: 100% !important;
        padding: 10px 14px !important;
        font-size: 18px !important;
        letter-spacing: 1px !important;
        text-align: center !important;
        box-sizing: border-box !important;
    }

    .game-content-doly {
        width: 100% !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    .mine-card {
        width: 100% !important;
        min-height: 190px !important;
        padding: 14px !important;
    }

    .farm-layout {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        flex-wrap: nowrap !important;
        align-items: stretch !important;
        justify-content: flex-start !important;
        gap: 12px !important;
        box-sizing: border-box !important;
    }

    .farm-resource-sidebar,
    .farm-shop-area,
    .farm-shop,
    .farm-shop-card,
    .farm-shop-area .farm-shop {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        max-height: none !important;
        overflow: visible !important;
        box-sizing: border-box !important;
    }

    .farm-resource-sidebar {
        padding: 14px !important;
        gap: 9px !important;
        order: 1 !important;
    }

    .farm-scene {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        aspect-ratio: 4 / 3 !important;
        order: 2 !important;
    }

    .farm-shop-area {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
        order: 3 !important;
    }

    .farm-shop-grid,
    .farm-machines-grid,
    .farm-animal-upgrades-grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
        max-height: none !important;
        overflow: visible !important;
    }

    .animal-shop-card,
    .animal-upgrade-card,
    .farm-machine-card {
        width: 100% !important;
        min-width: 0 !important;
        min-height: 178px !important;
        padding: 10px !important;
        box-sizing: border-box !important;
    }

    .village-map-container,
    .village-map-stage,
    .forest-map-stage,
    .mine-map-container,
    .mine-map-stage {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    .village-map-stage,
    .forest-map-stage,
    .mine-map-stage {
        aspect-ratio: 16 / 9 !important;
        overflow: hidden !important;
        border-radius: 18px !important;
    }

    .village-map-image,
    .forest-map-background,
    .mine-map-background {
        width: 100% !important;
        height: 100% !important;
        object-fit: contain !important;
    }

    .leaderboard-table-wrapper {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .leaderboard-table {
        min-width: 780px !important;
    }

    .settings-row,
    .statistics-item {
        flex-direction: column !important;
        align-items: stretch !important;
        text-align: center !important;
        gap: 9px !important;
        padding: 12px !important;
    }

    .settings-row input[type="range"],
    .settings-row select {
        width: 100% !important;
        min-width: 0 !important;
    }

    .global-chat-widget {
        left: 10px !important;
        top: auto !important;
        bottom: 108px !important;
        transform: none !important;
        z-index: 100002 !important;
    }

    .global-chat-window {
        position: fixed !important;
        left: 10px !important;
        right: 10px !important;
        bottom: 170px !important;
        top: auto !important;
        width: auto !important;
        max-width: none !important;
    }
}

@media screen and (max-width: 520px) {
    .main-content,
    .admin-ui-main-content,
    .maintenance-main {
        padding: 8px 8px 110px 8px !important;
        padding-right: 8px !important;
    }

    .sidebar,
    .ui-image-sidebar {
        left: 6px !important;
        right: 6px !important;
        bottom: 6px !important;
        height: 84px !important;
        min-height: 84px !important;
        max-height: 84px !important;
        padding: 7px 8px !important;
        border-radius: 20px !important;
    }

    .ui-sidebar-button,
    .ui-image-sidebar .ui-sidebar-button,
    .sidebar .ui-sidebar-button,
    .ui-sidebar-button img,
    .ui-image-sidebar .ui-sidebar-button img,
    .sidebar .ui-sidebar-button img {
        width: 60px !important;
        min-width: 60px !important;
        max-width: 60px !important;
        height: 60px !important;
        min-height: 60px !important;
        max-height: 60px !important;
        flex: 0 0 60px !important;
    }

    .game-container,
    .forest-page-container,
    .farm-page-container,
    .shop-page-container,
    .maintenance-container {
        padding: 10px !important;
        border-radius: 18px !important;
        gap: 14px !important;
    }

    .farm-shop-grid,
    .farm-machines-grid,
    .farm-animal-upgrades-grid,
    .daily-reward-grid {
        grid-template-columns: 1fr !important;
    }
}


@media screen and (max-width: 1600px) {
    .admin-mail-card .admin-email-textarea {
        min-height: 160px !important;
    }

    .admin-mail-card .settings-row {
        gap: 10px !important;
    }
}

@media screen and (max-width: 1366px) {
    .admin-mail-card .admin-email-textarea {
        min-height: 145px !important;
    }

    .admin-mail-result {
        font-size: 12px !important;
        padding: 10px 12px !important;
    }
}

@media screen and (max-width: 900px) {
    .admin-mail-card {
        width: 100% !important;
        max-width: 100% !important;
    }

    .admin-mail-card .settings-row {
        flex-direction: column !important;
        align-items: stretch !important;
        text-align: center !important;
    }

    .admin-mail-card input,
    .admin-mail-card select,
    .admin-mail-card textarea {
        width: 100% !important;
        min-width: 0 !important;
    }
}


@media screen and (max-width: 1600px){
    .selector-card-grid{
        width:min(860px, 100%);
        gap:24px;
    }

    .selector-card{
        min-height:360px;
        padding:20px;
        border-radius:24px;
    }

    .selector-card-image-box{
        min-height:220px;
        border-radius:20px;
    }

    .selector-card-image{
        height:220px;
    }

    .selector-card-content h2{
        font-size:26px;
    }

    .selector-card-content p{
        font-size:14px;
    }
}

@media screen and (max-width: 1366px){
    .selector-page-container{
        min-height:calc(100vh - 145px);
    }

    .selector-card-grid{
        width:min(760px, 100%);
        gap:20px;
    }

    .selector-card{
        min-height:320px;
        padding:17px;
    }

    .selector-card-image-box{
        min-height:190px;
    }

    .selector-card-image{
        height:190px;
    }
}

@media screen and (max-width: 900px){
    .selector-page-container{
        width:100% !important;
        min-height:calc(100vh - 230px) !important;
        padding:22px 14px 110px 14px !important;
    }

    .selector-section{
        width:100% !important;
        justify-content:flex-start !important;
        gap:24px !important;
    }

    .selector-card-grid{
        width:100% !important;
        grid-template-columns:1fr !important;
        gap:20px !important;
    }

    .selector-card{
        width:100% !important;
        min-height:auto !important;
        padding:18px !important;
        border-radius:24px !important;
    }

    .selector-card-image-box{
        min-height:210px !important;
    }

    .selector-card-image{
        height:210px !important;
    }
}

@media screen and (max-width: 430px){
    .selector-page-container{
        padding:16px 10px 105px 10px !important;
    }

    .selector-card{
        padding:14px !important;
        border-radius:20px !important;
    }

    .selector-card-image-box{
        min-height:170px !important;
        border-radius:18px !important;
    }

    .selector-card-image{
        height:170px !important;
    }

    .selector-card-content h2{
        font-size:22px !important;
    }

    .selector-card-content p{
        font-size:13px !important;
    }
}


.village-map-hotspot,
.village-map-hotspot:hover,
.village-map-hotspot:focus,
.village-map-hotspot:active {
    background: transparent !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    text-decoration: none !important;
    -webkit-tap-highlight-color: transparent !important;
}

@media screen and (min-width: 901px) and (max-width: 1600px) {

    .resource-navbar {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        align-items: center !important;
        align-content: center !important;
        gap: 10px 14px !important;
        padding: 14px 18px !important;
        min-height: auto !important;
    }

    .resource-navbar-logos {
        flex: 0 0 auto !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        margin: 0 6px 0 0 !important;
        order: 0 !important;
    }

    .resource-navbar-logo {
        height: 34px !important;
        max-width: 110px !important;
    }

    .resource-navbar-logo.beta-logo {
        height: 34px !important;
        max-width: 110px !important;
    }

    .resource-navbar .resource-item {
        flex: 1 1 145px !important;
        min-width: 135px !important;
        max-width: 205px !important;
        min-height: 46px !important;
        padding: 9px 12px !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 8px !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        white-space: nowrap !important;
    }

    .resource-navbar .resource-item img {
        width: 24px !important;
        height: 24px !important;
        min-width: 24px !important;
        flex: 0 0 24px !important;
    }

    .resource-navbar .resource-item span {
        font-size: clamp(11px, 0.78vw, 13px) !important;
        line-height: 1.1 !important;
        min-width: 0 !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    .resource-navbar .energy-item,
    .resource-navbar .special-item {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .logout-navbar-button {
        position: static !important;
        right: auto !important;
        top: auto !important;
        transform: none !important;
        flex: 0 0 auto !important;
        order: 999 !important;
        margin-left: auto !important;
        align-self: center !important;
        padding: 9px 15px !important;
        font-size: 12px !important;
        line-height: 1 !important;
        white-space: nowrap !important;
    }

    .logout-navbar-button:hover {
        transform: translateY(-2px) !important;
    }

    .logout-navbar-button:active {
        transform: none !important;
    }

}

@media screen and (min-width: 901px) and (max-width: 1366px) {

    .resource-navbar {
        gap: 8px 10px !important;
        padding: 12px 14px !important;
    }

    .resource-navbar-logo {
        height: 30px !important;
        max-width: 96px !important;
    }

    .resource-navbar-logo.beta-logo {
        height: 30px !important;
        max-width: 96px !important;
    }

    .resource-navbar .resource-item {
        flex-basis: 128px !important;
        min-width: 122px !important;
        max-width: 185px !important;
        min-height: 42px !important;
        padding: 8px 10px !important;
        gap: 6px !important;
    }

    .resource-navbar .resource-item img {
        width: 21px !important;
        height: 21px !important;
        min-width: 21px !important;
        flex-basis: 21px !important;
    }

    .resource-navbar .resource-item span {
        font-size: clamp(10px, 0.82vw, 12px) !important;
    }

    .logout-navbar-button {
        padding: 8px 12px !important;
        font-size: 11px !important;
    }

}

@media screen and (min-width: 901px) and (max-width: 1180px) {

    .resource-navbar .resource-item {
        flex-basis: 116px !important;
        min-width: 112px !important;
        max-width: 170px !important;
    }

    .resource-navbar .resource-item span {
        font-size: 10px !important;
    }

    .logout-navbar-button {
        margin-left: 0 !important;
    }

}



@media screen and (max-width: 1600px){
    .support-layout{
        grid-template-columns:minmax(300px, 440px) minmax(360px, 1fr) !important;
        gap:18px !important;
    }

    .support-card,
    .admin-ticket-item{
        padding:18px !important;
        border-radius:20px !important;
    }

    .support-ticket-item summary,
    .admin-ticket-item summary{
        gap:10px !important;
        font-size:13px !important;
    }
}

@media screen and (max-width: 1180px){
    .support-layout{
        grid-template-columns:1fr !important;
    }

    .support-create-card,
    .support-list-card{
        width:min(100%, 760px) !important;
        justify-self:center !important;
    }
}

@media screen and (max-width: 900px){
    .support-page-container,
    .admin-ticket-page-container{
        padding:16px !important;
    }

    .support-card,
    .admin-ticket-item{
        padding:16px !important;
        width:100% !important;
    }

    .support-ticket-item summary,
    .admin-ticket-item summary{
        grid-template-columns:auto 1fr !important;
        align-items:start !important;
    }

    .support-ticket-item summary small,
    .admin-ticket-item summary small{
        grid-column:2 / 3 !important;
    }

    .admin-ticket-topbar{
        flex-direction:column !important;
        align-items:stretch !important;
    }

    .admin-ticket-filters{
        justify-content:flex-start !important;
    }

    .admin-ticket-meta-grid{
        grid-template-columns:1fr !important;
    }

    .support-upload-grid{
        grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
    }
}

@media screen and (max-width: 520px){
    .support-upload-grid{
        grid-template-columns:1fr !important;
    }

    .support-card h2{
        font-size:20px !important;
    }

    .support-field textarea{
        min-height:130px !important;
    }
}


@media screen and (max-width:1600px){
    .support-page-container,
    .admin-ticket-page-container{
        min-height:calc(100vh - 28px) !important;
    }

    .support-layout{
        grid-template-columns:minmax(280px, 390px) minmax(470px, 680px) !important;
        gap:18px !important;
    }

    .support-list-card{
        max-width:390px !important;
        max-height:560px !important;
    }

    .support-create-card{
        max-width:680px !important;
    }
}

@media screen and (max-width:1366px){
    .support-layout{
        grid-template-columns:minmax(260px, 360px) minmax(420px, 620px) !important;
        gap:14px !important;
    }

    .support-list-card{
        max-width:360px !important;
        max-height:500px !important;
    }

    .support-create-card{
        max-width:620px !important;
    }
}

@media screen and (max-width:1120px){
    .support-layout{
        grid-template-columns:1fr !important;
        max-width:820px !important;
        margin:0 auto !important;
    }

    .support-list-card,
    .support-create-card{
        max-width:100% !important;
    }

    .support-list-card{
        max-height:420px !important;
    }
}

@media screen and (max-width:900px){
    .support-page-container,
    .admin-ticket-page-container{
        min-height:calc(100vh - 120px) !important;
        padding:18px !important;
    }

    .support-list-card{
        max-height:360px !important;
    }

    .admin-ticket-topbar{
        flex-direction:column !important;
        align-items:stretch !important;
    }

    .admin-ticket-filters{
        display:grid !important;
        grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
        gap:8px !important;
    }
}

@media screen and (max-width:520px){
    .support-page-container,
    .admin-ticket-page-container{
        padding:12px !important;
        border-radius:20px !important;
    }

    .support-list-card{
        max-height:320px !important;
    }

    .admin-ticket-filters{
        grid-template-columns:1fr !important;
    }
}


@media screen and (max-width:1600px){
    .support-chat-list-card{
        flex:0 1 520px;
    }

    .support-chat-thread{
        max-height:360px;
        padding:12px;
        gap:10px;
    }

    .support-chat-message{
        width:min(90%, 620px);
        padding:11px 12px;
    }

    .admin-support-chat-thread{
        max-height:430px;
    }
}

@media screen and (max-width:900px){
    .support-chat-list-card{
        flex:0 1 auto;
    }

    .support-chat-thread,
    .admin-support-chat-thread{
        max-height:55vh;
    }

    .support-chat-message{
        width:100%;
    }

    .support-chat-message-head{
        flex-direction:column;
        align-items:flex-start;
        gap:3px;
    }
}

@media screen and (max-width:520px){
    .support-chat-thread{
        padding:10px;
        border-radius:14px;
    }

    .support-chat-message{
        padding:10px;
        border-radius:13px;
    }
}



@media screen and (min-width: 1200px) and (max-width: 1370px) {


    .resource-navbar {
        width: 100% !important;

        display: grid !important;
        grid-template-columns: 92px repeat(5, minmax(145px, 1fr)) 98px !important;

        justify-content: stretch !important;
        align-items: center !important;

        gap: 10px !important;

        padding: 10px 12px !important;
        padding-right: 12px !important;

        min-height: auto !important;
        border-radius: 20px !important;
    }

    .resource-navbar-logos {
        grid-column: 1 !important;
        grid-row: 1 / span 2 !important;

        width: 86px !important;
        margin: 0 !important;

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

    .resource-navbar-logo {
        height: 48px !important;
        max-width: 86px !important;
    }

    .resource-navbar-logo.beta-logo {
        height: 46px !important;
        max-width: 84px !important;
    }

    .resource-item {
        width: 100% !important;
        min-width: 0 !important;

        justify-content: center !important;

        padding: 9px 10px !important;
        gap: 7px !important;

        border-radius: 14px !important;
    }

    .resource-item img {
        width: 23px !important;
        height: 23px !important;
        min-width: 23px !important;
    }

    .resource-item span {
        font-size: 12px !important;
        line-height: 1.1 !important;

        white-space: nowrap !important;
    }

    .energy-item,
    .special-item {
        margin: 0 !important;
    }

    .logout-navbar-button {
        position: static !important;

        grid-column: 7 !important;
        grid-row: 1 / span 2 !important;

        width: 98px !important;
        height: 42px !important;

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

        padding: 0 10px !important;

        font-size: 12px !important;
        white-space: nowrap !important;

        align-self: center !important;
        justify-self: end !important;
    }



    .farm-page-container {
        align-items: stretch !important;
    }

    .farm-layout {
        width: 100% !important;

        display: grid !important;
        grid-template-columns: 270px minmax(560px, 1fr) 335px !important;

        gap: 18px !important;

        align-items: start !important;
        justify-content: center !important;

        flex-wrap: nowrap !important;
    }

    .farm-resource-sidebar {
        width: 270px !important;
        min-width: 270px !important;
        max-width: 270px !important;

        transform: none !important;

        max-height: calc(100vh - 175px) !important;
    }

    .farm-scene {
        width: 100% !important;

        max-width: 780px !important;
        min-width: 0 !important;

        justify-self: center !important;

        background-size: contain !important;
        background-position: center top !important;
    }

    .farm-shop-area {
        width: 335px !important;
        max-width: 335px !important;

        gap: 12px !important;
    }

    .farm-shop-area .farm-shop,
    .farm-shop-card {
        width: 100% !important;
        max-width: 100% !important;

        padding: 12px !important;

        max-height: calc((100vh - 205px) / 2) !important;
        overflow-y: auto !important;
    }
}


@media screen and (max-width: 700px) {

    body {
        overflow-x: hidden !important;
        overflow-y: auto !important;
    }

    .sidebar,
    .ui-image-sidebar {
        position: fixed !important;

        top: 10px !important;
        right: 10px !important;
        bottom: 10px !important;

        height: auto !important;
        max-height: calc(100dvh - 20px) !important;

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

        -webkit-overflow-scrolling: touch !important;

        padding: 14px !important;
        border-radius: 22px !important;
    }

    .sidebar {
        width: min(390px, calc(100vw - 20px)) !important;
        min-width: 0 !important;
        max-width: calc(100vw - 20px) !important;
    }

    .ui-image-sidebar {
        width: min(390px, calc(100vw - 20px)) !important;
        min-width: 0 !important;
        max-width: calc(100vw - 20px) !important;
    }

    .sidebar-nav,
    .ui-sidebar-nav {
        padding-bottom: 24px !important;
    }

    .logo {
        position: sticky !important;
        top: 0 !important;

        z-index: 5 !important;

        background: rgba(42, 32, 24, 0.98) !important;

        margin-bottom: 14px !important;
        padding-bottom: 12px !important;
    }
}

.sidebar::-webkit-scrollbar,
.ui-image-sidebar::-webkit-scrollbar {
    width: 8px;
}

.sidebar::-webkit-scrollbar-track,
.ui-image-sidebar::-webkit-scrollbar-track {
    background: rgba(42, 32, 24, 0.95);
    border-radius: 20px;
}

.sidebar::-webkit-scrollbar-thumb,
.ui-image-sidebar::-webkit-scrollbar-thumb {
    background: #8a6544;
    border-radius: 20px;
}

.sidebar::-webkit-scrollbar-thumb:hover,
.ui-image-sidebar::-webkit-scrollbar-thumb:hover {
    background: #d4a66b;
}

/* ===== FIX SIDEBAR SCROLL PRO TABLETY / NOTEBOOKY ===== */
@media screen and (min-width: 901px) and (max-width: 1600px) {

    .sidebar,
    .ui-image-sidebar {
        overflow-y: auto !important;
        overflow-x: hidden !important;

        max-height: calc(100vh - 28px) !important;

        -webkit-overflow-scrolling: touch !important;
    }

    .sidebar-nav,
    .ui-sidebar-nav,
    .ui-image-sidebar .ui-sidebar-nav {
        padding-bottom: 28px !important;
    }
}

/* ===== VIDITELNÝ SCROLLBAR V SIDEBARU ===== */
.sidebar::-webkit-scrollbar,
.ui-image-sidebar::-webkit-scrollbar {
    width: 8px;
}

.sidebar::-webkit-scrollbar-track,
.ui-image-sidebar::-webkit-scrollbar-track {
    background: rgba(42, 32, 24, 0.95);
    border-radius: 20px;
}

.sidebar::-webkit-scrollbar-thumb,
.ui-image-sidebar::-webkit-scrollbar-thumb {
    background: #8a6544;
    border-radius: 20px;
}

.sidebar::-webkit-scrollbar-thumb:hover,
.ui-image-sidebar::-webkit-scrollbar-thumb:hover {
    background: #d4a66b;
}