.solitaire-window {
    display: flex;
    flex-direction: column;
    user-select: none;
    background-color: #008000;
    /* Classic green felt */
}

/* Override standard window content for Solitaire */
.window[data-window="solitaire"] {
    min-width: 0 !important;
    min-height: 0 !important;
    width: fit-content !important;
}

.window[data-window="solitaire"] .content {
    background-color: #008000 !important;
    padding: 3px !important;
    overflow: hidden !important;
    display: flex;
    width: fit-content !important;
}

.solitaire-table {
    position: relative;
    width: 651px;
    /* 560 + 71 + 20 padding */
    height: 520px;
    padding: 20px;
    box-sizing: border-box;
    background-color: #008000;
}

/* Pile Containers */
.solitaire-pile {
    position: absolute;
    width: 71px;
    height: 96px;
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 3px;
}

/* Specific Pile Locations */
.pile-stock {
    top: 20px;
    left: 20px;
}

.pile-waste {
    top: 20px;
    left: 110px;
}

.pile-foundation-0 {
    top: 20px;
    left: 290px;
}

.pile-foundation-1 {
    top: 20px;
    left: 380px;
}

.pile-foundation-2 {
    top: 20px;
    left: 470px;
}

.pile-foundation-3 {
    top: 20px;
    left: 560px;
}

.pile-tableau-0 {
    top: 140px;
    left: 20px;
}

.pile-tableau-1 {
    top: 140px;
    left: 110px;
}

.pile-tableau-2 {
    top: 140px;
    left: 200px;
}

.pile-tableau-3 {
    top: 140px;
    left: 290px;
}

.pile-tableau-4 {
    top: 140px;
    left: 380px;
}

.pile-tableau-5 {
    top: 140px;
    left: 470px;
}

.pile-tableau-6 {
    top: 140px;
    left: 560px;
}

/* Card Component */
.card {
    position: absolute;
    width: 71px;
    height: 96px;
    background-color: white;
    box-sizing: border-box;
    border: 1px solid #000;
    border-radius: 4px;
    box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4);
    cursor: pointer;
    transition: transform 0.1s;
    overflow: hidden;
}

.card.back {
    background-color: #000080;
    background-image: repeating-linear-gradient(45deg, #000080, #000080 2px, #4169e1 2px, #4169e1 4px);
    border: 1px solid #fff;
}

.card.face-up {
    background: #fff;
}

.card-inner {
    padding: 4px;
    height: 100%;
    display: flex;
    flex-direction: column;
    pointer-events: none;
}

.card-top {
    font-size: 14px;
    font-weight: bold;
    display: flex;
    justify-content: space-between;
}

.card-suit-large {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 32px;
}

.card.red {
    color: #f00;
}

.card.black {
    color: #000;
}

.card * {
    pointer-events: none;
}

/* Dragging State */
.card.dragging {
    z-index: 1000 !important;
    opacity: 0.8;
    cursor: grabbing;
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);
    pointer-events: none;
    /* Let events pass during move */
}

/* Pile indicators */
.solitaire-pile::after {
    content: '';
    position: absolute;
    inset: 5px;
    border: 2px dashed rgba(255, 255, 255, 0.2);
    border-radius: 4px;
    pointer-events: none;
}