/* Import freecell base styles */
@import '/freecell/style.css';

/* Eight Off specific spacing */
.cells-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.foundations {
    display: flex;
    gap: var(--card-gap);
}

.foundation {
    width: var(--card-width);
    height: var(--card-height);
    border: 2px dashed rgba(255, 255, 255, 0.15);
    background: rgba(0,0,0,0.15);
    border-radius: 6px;
    position: relative;
    flex-shrink: 0;
}

.free-cells {
    display: flex;
    gap: var(--card-gap);
}

.free-cell {
    width: var(--card-width);
    height: var(--card-height);
    border: 2px dashed rgba(255, 255, 255, 0.15);
    background: rgba(0,0,0,0.15);
    border-radius: 6px;
    position: relative;
    flex-shrink: 0;
}

/* Constrain tableau to match free cells width */
.tableau {
    display: flex;
    gap: var(--card-gap);
    width: fit-content;
    min-height: 450px;
}

.tableau-column {
    flex: 1;
    min-width: var(--card-width);
    max-width: var(--card-width);
    width: var(--card-width);
}

/* Mobile: reorder so foundations are on top, then free cells, then tableau */
@media (max-width: 768px) {
    .cells-container {
        gap: 6px;
    }
    
    .foundations {
        order: 1;
        margin-bottom: 6px;
    }
    
    .free-cells {
        order: 2;
    }
    
    .tableau {
        order: 3;
        min-height: 300px;
    }
}