:root {
    --card-width: 100px;
    --card-height: 150px;
    --space-x: 10px;
}

.game-board {
    position: relative;
    width: 100vw;
    height: calc(100vh - 68px); /* substract menu height */
    background-color: green;
    display: flex;
    flex-direction: column;
    align-items: center; /* Centers the top container horizontally */
}

.top-container {
    display: flex;
    justify-content: space-between; /* Spacing between stock-waste and foundation */
    width: calc(var(--card-width) * 7 + var(--space-x) * 6);
    margin-top: 10px;
}

.stock-waste-container {
    display: flex;
    width: calc(var(--card-width) * 2 + var(--space-x));
}

.waste{
    margin-left: 10px;
}

.foundation-container {
    display: flex;
    margin-left: var(--space-x);
}

.foundation{
    margin-left: var(--space-x);
}

.tableau-container {
    display: flex;
    margin-top: 20px;
    justify-content: flex-start;
    align-items: flex-start;
    gap: var(--space-x);
}

.pile {
    width: var(--card-width);
    height: var(--card-height);
    position: relative;
}

.card {
    width: var(--card-width);
    height: var(--card-height);
    background-repeat: no-repeat;
    position: absolute;
    cursor: grab;
}

.card img {
    width: var(--card-width);
    height: var(--card-height);
}

.card:active {
    cursor: grabbing;
}

/* flipping */
.card {
    transform-style: preserve-3d;
    transition: transform 0.3s;
    transform: rotateY(0deg);
}

.card.flipping {
    transform: rotateY(180deg);
}

.card .front, .card .back {
    position: absolute;
    width: var(--card-width);
    height: var(--card-height);
    backface-visibility: hidden;
}

.card.face-up  {
    transform: rotateY(180deg);
}
        /* Basic menu styling for desktop */
        .menu-bar {
            z-index: 987654321;
            position: relative;
            display: flex;
            background-color: #333;
            padding: 10px;
            justify-content: flex-start;
            /* Align menu items to the left */

            font-family: Arial, Helvetica, sans-serif;
            height: 48px;
        }

        .menu-item {
            color: white;
            padding: 10px;
            cursor: pointer;
            position: relative;
            text-align: center;
            flex: 0;
            display: flex;
            /* Align icon and text on the same line */
            align-items: center;
            justify-content: center;
            white-space: nowrap;
        }

        .menu-item {
            text-align: left;
        }

        .menu-item i {
            font-size: 1.5rem;
            margin-right: 8px;
            /* Space between icon and text */
        }

        .menu-item .shortcut,
        .submenu-item .shortcut {
            color: #999;
        }

        .menu-item .shortcut {
            display: none;
            /* too ugly on main items */
        }


        .submenu {
            display: none;
            position: absolute;
            background-color: #444;
            top: 40px;
            left: 0;
            width: 150px;
        }

        .submenu-item {
            padding: 10px;
            color: white;
        }

        .submenu-item:hover {
            background-color: #666;
        }

        .menu-item.active .submenu {
            display: block;
        }

        /* Mobile styles */
        @media (max-width: 768px) {
            .menu-bar {
                flex-direction: column;
                position: relative;
                display: grid;
                /* Grid layout for mobile */
                grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
                /* Evenly divide menu items into columns */
                gap: 10px;
            }

            .menu-item {
                padding: 15px 5px;
                display: block;
                /* Stack icon and text vertically on mobile */
                white-space: normal;
            }

            .menu-item {
                text-align: center;
            }

            .menu-item i {
                font-size: 2rem;
                /* Larger icon for mobile */
                margin-right: 0;
                /* Remove margin on mobile */
                display: block;
                /* Icon on a separate line */
                text-align: center;
            }

            .menu-item .shortcut {
                display: none;
                /* Hide shortcuts on mobile */
            }

            .submenu {
                position: static;
                display: none;
                width: 100%;
                background-color: #333;
                top: 0;
                left: 0;
                z-index: 10;
            }

            .menu-item.active .submenu {
                display: block;
            }

            .menu-bar.active .menu-item {
                display: none;
            }

            .menu-bar.active .menu-item.active {
                display: block;
            }

            .submenu .close-btn {
                color: white;
                padding: 10px;
                cursor: pointer;
                text-align: center;
                background-color: #444;
            }

            .submenu .close-btn:hover {
                background-color: #666;
            }
        }