:root {
    --bg-color: #004d26;
    /* Classic Green Felt */
    --card-width: 80px;
    --card-height: 112px;
    --gap: 10px;
    --text-color: #ffffff;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: var(--bg-color);
    color: var(--text-color);
    display: flex;
    justify-content: center;
    min-height: 100vh;
    /* overflow: hidden; Removed to allow scrolling */
    overflow-y: auto;
    /* Explicitly allow vertical scrolling */
}

#game-container {
    width: 100%;
    max-width: 1000px;
    padding: 20px;
    padding-bottom: 100px;
    /* Add padding at bottom for extra space */
    display: flex;
    flex-direction: column;
}

header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

button {
    padding: 8px 16px;
    background-color: #ffffff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-weight: bold;
    color: #333;
}

button:hover {
    background-color: #e0e0e0;
}

#game-board {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.top-row {
    display: flex;
    justify-content: space-between;
}

.cell-group {
    display: flex;
    gap: var(--gap);
    flex-wrap: wrap;
    /* Allow wrapping for more cells */
    justify-content: center;
    /* Center items if they wrap */
}

#free-cells {
    max-width: 100%;
}

.cell {
    width: var(--card-width);
    height: var(--card-height);
    background-color: rgba(0, 0, 0, 0.2);
    border-radius: 6px;
    border: 2px solid rgba(255, 255, 255, 0.1);
    position: relative;
}

#tableau {
    display: flex;
    justify-content: space-between;
    min-height: 600px;
    /* Changed from fixed height to min-height */
    height: auto;
    /* Approximate height for card stacks */
}

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

/* Card Styles */
.card {
    width: var(--card-width);
    height: var(--card-height);
    background: linear-gradient(135deg, #ffffff 0%, #f0f0f0 100%);
    border-radius: 8px;
    position: absolute;
    color: black;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 5px;
    font-size: 24px;
    font-weight: bold;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2), 0 1px 2px rgba(0, 0, 0, 0.1);
    cursor: grab;
    user-select: none;
    transition: transform 0.1s, box-shadow 0.1s;
}

.card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    z-index: 100;
    /* Bring to front on hover */
}

.card.red {
    color: #e74c3c;
}

.card.black {
    color: #2c3e50;
}

.card.dragging {
    opacity: 0.5;
    cursor: grabbing;
}

/* Card Content Layout */
.card::before {
    content: attr(data-rank) " " attr(data-suit-symbol);
    position: absolute;
    top: 4px;
    left: 4px;
    font-size: 20px;
}

.card::after {
    content: attr(data-rank) " " attr(data-suit-symbol);
    position: absolute;
    bottom: 4px;
    right: 4px;
    font-size: 20px;
    transform: rotate(180deg);
}

.card .center-suit {
    font-size: 64px;
    align-self: center;
    margin-top: auto;
    margin-bottom: auto;
    color: rgba(0, 0, 0, 0.1);
    /* Subtle watermark style for center suit */
}

/* Make center suit more visible if desired, or keep it subtle. 
   The user asked for "easier to read", so maybe normal color is better?
   Let's stick to the previous design but larger. 
   The previous design had color: rgba(255, 255, 255, 0.2) which was weird for a white card.
   Let's make it inherit color but be semi-transparent.
*/
.card .center-suit {
    font-size: 64px;
    align-self: center;
    margin-top: auto;
    margin-bottom: auto;
    opacity: 0.2;
}

.foundation {
    background-color: rgba(255, 255, 255, 0.05);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 32px;
    color: rgba(255, 255, 255, 0.2);
}

.foundation::before {
    content: attr(data-suit-symbol);
}

@media (max-width: 768px) {
    :root {
        --card-width: 11vw;
        --card-height: 15.4vw;
        --gap: 1.5vw;
    }

    #game-container {
        padding: 10px;
    }

    header {
        flex-direction: column;
        gap: 10px;
        margin-bottom: 15px;
    }

    h1 {
        font-size: 1.5rem;
    }

    .controls {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    #game-board {
        gap: 15px;
    }

    .card {
        font-size: 14px;
        /* Smaller font on mobile */
        border-radius: 4px;
    }

    .card::before,
    .card::after {
        font-size: 12px;
        top: 2px;
        left: 2px;
        bottom: 2px;
        right: 2px;
    }

    .card .center-suit {
        font-size: 32px;
    }

    .foundation {
        font-size: 24px;
    }
}