body {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    /* Remove overflow: hidden to allow scrolling */
}

.game-area {
    margin: 0;
    padding: 0;
    background-color: #1a6d1a;
    min-height: 100vh;
    overflow-x: hidden;
    /* Remove overflow: hidden to allow scrolling */
}

canvas {
    position: absolute;
    cursor: default !important;
    /* Change from fixed to absolute */
    top: 0;
    left: 0;
    bottom: 0;
}

#adBanner {
    position: absolute;
    right: 0;
    top: 40px;
    bottom: 0;
    width: min(302px);
    /* Match the body background color */
    z-index: 99998;
    /* Very high z-index */
    display: flex;
    justify-content: right;
}

.ad-placeholder {
    /*    width: 400px;
    height: 600px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: rgba(255, 255, 255, 0.5);
    text-align: center;
    border: 2px dashed rgba(255, 255, 255, 0.2);
    font-size: 14px;*/
}

.zoomControlsGroup {
    display: flex;
    align-items: center;
    gap: 2px;
    margin-left: 5px;
}

    .zoomControlsGroup button {
        width: 30px;
        padding: 0;
        display: flex;
        justify-content: center;
        align-items: center;
    }

#zoomControls {
    position: absolute;
    /* Change from fixed to absolute */
    bottom: 5px;
    left: 5px;
    z-index: 1000;
    display: flex;
    align-items: center;
    gap: 2px;
    border-radius: 3px;
}

    #zoomControls button {
        background: rgba(255, 255, 255, 0.2);
        border: 1px solid rgba(255, 255, 255, 0.3);
        color: white;
        padding: 4px 8px;
        border-radius: 3px;
        cursor: pointer;
        font-size: 14px;
        transition: background 0.2s;
        margin: 0;
    }

        #zoomControls button:hover {
            background: rgba(255, 255, 255, 0.3);
        }

#zoomLevel {
    color: white;
    background: rgba(0, 0, 0, 0.2);
    padding: 4px 8px;
    border-radius: 3px;
    min-width: 50px;
    text-align: center;
    font-size: 14px;
}

#gameControls {
    position: absolute;
    top: 40px;
    left: 0px;
    z-index: 1000;
    white-space: nowrap;
    flex-wrap: nowrap;
    display: flex;
    align-items: center; /* Add this to align all items vertically */
}





/* Larger Screens (above 1920px) */
@media (min-width: 2560px) {
    .game-title {
        font-size: 25px;
    }

    canvas{
        margin-top: 10px;
    }

    .button-group .three-d-button,
    .three-d-button,
    .three-d-button-settings,
    .three-d-button-hint {
        height: 40px !important;
        font-size: 17px;
        min-width: 100px;
        /* Reduced from 75px */
    }

    #zoomControls {
        gap: 0px;
        left: 0px;
    }

        #zoomIn,
        #zoomOut,
        #zoomControls button,
        #zoomLevel,
        #gameTimer,
        #moveCounter,
        #statisticsBtn,
        #bookmarkBtn {
            height: 35px;
            font-size: 16px !important;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 0.3rem 0.3rem !important;
            min-width: 90px !important;
        }

        #zoomIn,
        #zoomOut,
        #zoomControls button,
        #zoomLevel,
        .zoomControlsGroup button {
            min-width: 50px !important;
        }

    #zoomLevel {
        width: 20px;
    }

    /* Adjust spacing */
    .button-group {
        margin-right: 4px;
    }

    #gameHeader .variations a {
        font-size: 20px;
        gap: 15px;
    }
}

/* 4K Screens and above (3840px+) */
@media screen and (min-width: 3840px) {
    .game-title {
        font-size: 42px !important;
    }

    canvas {
        margin-top: 50px !important;
    }

    .button-group .three-d-button,
    .three-d-button,
    .three-d-button-settings,
    .three-d-button-hint {
        height: 70px !important;
        font-size: 28px !important;
        min-width: 150px !important;
    }

    #zoomControls {
        gap: 8px !important;
        left: 15px !important;
        bottom: 15px !important;
    }

        #zoomIn,
        #zoomOut,
        #zoomControls button,
        #zoomLevel,
        #gameTimer,
        #moveCounter,
        #statisticsBtn,
        #bookmarkBtn {
            height: 55px !important;
            font-size: 26px !important;
            padding: 0.7rem 1rem !important;
            min-width: 130px !important;
        }

        #zoomIn,
        #zoomOut,
        #zoomControls button,
        #zoomLevel,
        .zoomControlsGroup button {
            min-width: 60px !important;
        }

    #zoomLevel {
        width: 40px !important;
    }

    .button-group {
        margin-right: 8px !important;
    }

    #gameHeader .variations a {
        font-size: 28px !important;
        gap: 20px !important;
    }

    .zoomControlsGroup {
        gap: 4px !important;
        margin-left: 8px !important;
    }

        .zoomControlsGroup button {
            width: 40px !important;
        }
}


/* Medium Screens (1366px to 1919px) */
@media (max-width: 1366px) {
    .game-title {
        font-size: inherit;
    }

    .button-group .three-d-button,
    .three-d-button,
    .three-d-button-settings,
    .three-d-button-hint {
        height: 25px !important;
        font-size: 11px;
        min-width: 40px;
        /* Reduced from 75px */
    }

    #zoomControls {
        gap: 0px;
        left: 0px;
    }

        #zoomIn,
        #zoomOut,
        #zoomControls button,
        #zoomLevel,
        #gameTimer,
        #moveCounter,
        #statisticsBtn,
        #bookmarkBtn {
            height: 15px;
            font-size: 10px !important;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 0.3rem 0.3rem !important;
            min-width: 50px !important;
        }

        #zoomIn,
        #zoomOut,
        #zoomControls button,
        #zoomLevel,
        .zoomControlsGroup button {
            min-width: 30px !important;
        }

    #zoomLevel {
        width: 20px;
    }

    /* Adjust spacing */
    .button-group {
        margin-right: 4px;
    }

    #gameHeader .variations a {
        font-size: 12px;
        gap: 15px;
    }
}

/* Small Screens (max-width: 930px) */
@media (max-width: 1180px) {
    .game-title {
        font-size: 15px;
    }


    .button-group .three-d-button,
    .three-d-button,
    .three-d-button-settings,
    .three-d-button-hint {
        height: 25px !important;
        font-size: 12px;
        min-width: 30px;
        /* Reduced from 75px */
    }

    #zoomControls {
        gap: 0px;
        left: 0px;
    }

        #zoomIn,
        #zoomOut,
        #zoomControls button,
        #zoomLevel,
        #gameTimer,
        #moveCounter,
        #statisticsBtn,
        #bookmarkBtn {
            height: 15px;
            font-size: 10px !important;
            display: flex;
            align-items: center;
            justify-content: center;
            min-width: 50px !important;
        }

        #zoomIn,
        #zoomOut,
        #zoomControls button,
        #zoomLevel,
        .zoomControlsGroup button {
            min-width: 30px !important;
        }


    /* Adjust spacing */
    .button-group {
        margin-right: 3px;
    }

    #gameHeader .variations a {
        font-size: 11px;
        gap: 12px;
    }
}

/* Small Screens (max-width: 840px) */
@media (max-width: 840px) {

    .game-title {
        font-size: 15px;
    }


    .button-group .three-d-button,
    .three-d-button,
    .three-d-button-settings,
    .three-d-button-hint {
        height: 20px !important;
        font-size: 10px;
        min-width: 20px;
        /* Reduced from 75px */
    }

    .button-group {
        min-width: 65px;
    }

    #zoomControls {
        gap: 0px;
        left: 0px;
    }

        #zoomIn,
        #zoomOut,
        #zoomControls button,
        #zoomLevel,
        #gameTimer,
        #moveCounter,
        #statisticsBtn,
        #bookmarkBtn {
            height: 15px;
            font-size: 9px !important;
            display: flex;
            align-items: center;
            justify-content: center;
            min-width: 40px !important;
        }

        #zoomIn,
        #zoomOut,
        #zoomControls button,
        #zoomLevel,
        .zoomControlsGroup button {
            min-width: 20px !important;
        }

    .zoomControlsGroup button {
        width: 15px;
    }

    /* Adjust spacing */
    .button-group {
        margin-right: 0px;
    }

    #gameHeader .variations a {
        font-size: 9px;
        gap: 10px;
    }
}

/* Small Screens (max-width: 765px) */
@media (max-width: 765px) {

    .game-title {
        font-size: 10px;
    }


    .button-group .three-d-button,
    .three-d-button,
    .three-d-button-settings,
    .three-d-button-hint {
        height: 20px !important;
        font-size: 7px;
        min-width: 25px;
    }

    .button-group {
        min-width: 55px;
    }

    #zoomControls {
        gap: 0px;
        left: 0px;
    }

        #zoomIn,
        #zoomOut,
        #zoomControls button,
        #zoomLevel,
        #gameTimer,
        #moveCounter,
        #statisticsBtn,
        #bookmarkBtn {
            height: 15px;
            font-size: 9px !important;
            display: flex;
            align-items: center;
            justify-content: center;
            min-width: 40px !important;
        }

        #zoomIn,
        #zoomOut,
        #zoomControls button,
        #zoomLevel,
        .zoomControlsGroup button {
            min-width: 20px !important;
        }

    .zoomControlsGroup button {
        width: 15px;
    }

    #moveCounter,
    #gameTimer {
        min-width: 32px;
    }

    .button-group {
        margin-right: 2px;
    }

    #gameHeader .variations a {
        font-size: 8px;
        gap: 8px;
    }
}

/* Small Screens (max-width: 635px) */
@media (max-width: 635px) {
    .game-title {
        font-size: 8px;
    }


    .button-group .three-d-button,
    .three-d-button,
    .three-d-button-settings,
    .three-d-button-hint {
        height: 20px !important;
        font-size: 5px;
        padding: 0rem 0rem;
        min-width: 25px;
        /* Reduced from 75px */
    }

    .button-group {
        min-width: 55px;
    }

    #zoomIn,
    #zoomOut,
    #zoomControls button,
    #zoomLevel,
    #gameTimer,
    #moveCounter,
    #statisticsBtn,
    #bookmarkBtn {
        height: 15px;
        font-size: 8px !important;
        display: flex;
        align-items: center;
        justify-content: center;
        min-width: 35px !important;
    }

    #zoomIn,
    #zoomOut,
    #zoomControls button,
    #zoomLevel,
    .zoomControlsGroup button {
        min-width: 15px !important;
    }

    .zoomControlsGroup button {
        width: 15px;
    }

    /* Adjust spacing */
    .button-group {
        margin-right: 1px;
    }

    #statisticsBtn,
    #bookmarkBtn,
    #zoomLevel {
        min-width: 32px;
        /* Allow natural width */
        white-space: nowrap;
        letter-spacing: 0px;
        /* Tighten letter spacing */
    }

    #statisticsBtn,
    #bookmarkBtn {
        min-width: 28px;
        /* Adjust based on content */
    }
    
    /* Ensure content is tightly packed */
        #zoomLevel span,
        #statisticsBtn span,
        #bookmarkBtn span {
            margin: 0;
        }

    #gameHeader .variations a {
        font-size: 8px;
        gap: 6px;
    }

    #gameHeader .variations {
        gap: 4px;
    }

    #gameHeader .logo {
        font-size: 8px;
    }
}