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;
    box-sizing: border-box;
    /* Remove overflow: hidden to allow scrolling */
}

.game-area.with-ads {
    padding-right: 412px;
}

/* New styles for the canvas container */
#gameCanvas {
    position: relative;
    width: 100%;
    height: calc(100vh - 87px);
    /* Adjust for top and bottom controls */
    margin-top: 87px;
    /* Space for game controls */
}

#pixiCanvas {
    position: absolute;
    top: 0;
    left: 0;
    cursor: default !important;
}

/* Updated canvas styles - remove the old canvas styles that targeted all canvas elements */
canvas:not(#pixiCanvas) {
    position: absolute;
    cursor: default !important;
    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;
}

.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;
}

.button-group .three-d-button,
.three-d-button,
.three-d-button-settings,
.three-d-button-hint{
    outline: none;
}

#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 */
}

#leaveRoomGameBtn {
    background-color: #D32F2F !important;
    box-shadow: 0px 3px 0px #9A0007, 0px 6px 15px rgba(0, 0, 0, 0.3);
}

@media (max-width: 1180px) {
    #gameCanvas {
        height: calc(100vh - 77px);
        margin-top: 77px;
    }
}

@media (max-width: 840px) {
    #gameCanvas {
        height: calc(100vh - 75px);
        margin-top: 75px;
    }
}

@media (max-width: 765px) {
    #gameCanvas {
        height: calc(100vh - 70px);
        margin-top: 70px;
    }
}

@media (max-width: 635px) {
    #gameCanvas {
        height: calc(100vh - 70px);
        margin-top: 70px;
    }
}

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

    #gameCanvas {
        height: calc(100vh - 90px);
        margin-top: 90px;
    }

    .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;
    }

    #gameCanvas {
        height: calc(100vh - 120px);
        margin-top: 120px;
    }

    .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;
    }
}

/* Round Info Panel HTML Styles */
.round-info-panel {
    position: fixed;
    top: 40px;
    right: calc(412px + 10px * var(--dynamic-scale, 1)); 
    width: calc(180px * var(--dynamic-scale, 1));
    height: calc(99px * var(--dynamic-scale, 1)); 
    background: rgba(255, 255, 255, 0.95);
    border: calc(2px * var(--dynamic-scale, 1)) solid rgba(102, 102, 102, 0.9);
    border-radius: calc(10px * var(--dynamic-scale, 1));
    z-index: 1001;
    font-family: Arial, sans-serif;
    box-sizing: border-box;
    --dynamic-scale: 1; /* Default scale, updated by JavaScript */
}

.round-info-header {
    display: flex;
    height: calc(33px * var(--dynamic-scale, 1));
    border-bottom: calc(2px * var(--dynamic-scale, 1)) solid rgba(102, 102, 102, 0.8);
}

.round-info-header-cell {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: calc(16px * var(--dynamic-scale, 1));
    color: #636363;
    font-weight: bold;
    text-align: center;
}

.round-info-header-cell:first-child {
    border-right: calc(2px * var(--dynamic-scale, 1)) solid rgba(102, 102, 102, 0.8);
}

.round-info-values {
    display: flex;
    height: calc(33px * var(--dynamic-scale, 1));
    background: #cfe8ff;
}

.round-info-value-cell {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: calc(22px * var(--dynamic-scale, 1));
    color: #0055aa;
    font-weight: bold;
    text-align: center;
}

.round-info-value-cell:first-child {
    border-right: calc(2px * var(--dynamic-scale, 1)) solid rgba(102, 102, 102, 0.8);
}

.round-info-footer {
    height: calc(33px * var(--dynamic-scale, 1));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: calc(19px * var(--dynamic-scale, 1));
    color: #424242;
    font-weight: bold;
    text-align: center;
}

/* Hide the panel when ads are not shown */
.game-area:not(.with-ads) .round-info-panel {
    display: none;
}

/* Three-column variant (Spades) */
.round-info-panel.three-columns {
    width: calc(230px * var(--dynamic-scale, 1));
}

.round-info-panel.three-columns .round-info-label-cell {
    flex: 0 0 calc(60px * var(--dynamic-scale, 1));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: calc(14px * var(--dynamic-scale, 1));
    color: #424242;
    font-weight: bold;
    text-align: center;
    border-right: calc(2px * var(--dynamic-scale, 1)) solid rgba(102, 102, 102, 0.8);
}

/* Match label column width for top labels row's first cell */
.round-info-panel.three-columns .round-info-values .round-info-header-cell:first-child {
    flex: 0 0 calc(60px * var(--dynamic-scale, 1));
}

/* Add bottom border to the labels row to match row separators */
.round-info-panel.three-columns .round-info-values {
    border-bottom: calc(2px * var(--dynamic-scale, 1)) solid rgba(102, 102, 102, 0.8);
}

/* Single separator only between Score and Bags (3rd column) to avoid double borders) */
.round-info-panel.three-columns .round-info-header .round-info-value-cell:nth-child(3),
.round-info-panel.three-columns .round-info-values .round-info-header-cell:nth-child(3) {
    border-left: calc(2px * var(--dynamic-scale, 1)) solid rgba(102, 102, 102, 0.8);
}

/* Responsive adjustments for the round info panel */
@media (max-width: 1366px) {
    .round-info-panel {
        right: calc(412px + 8px * var(--dynamic-scale, 1));
    }
}

@media (max-width: 1180px) {
    .round-info-panel {
        right: calc(412px + 6px * var(--dynamic-scale, 1));
    }
}

@media (max-width: 840px) {
    .round-info-panel {
        right: calc(412px + 4px * var(--dynamic-scale, 1));
    }
}

@media (max-width: 765px) {
    .round-info-panel {
        right: calc(412px + 3px * var(--dynamic-scale, 1));
    }
}

@media (max-width: 635px) {
    .round-info-panel {
        right: calc(412px + 2px * var(--dynamic-scale, 1));
    }
}