#pyramid-board {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding-top: 20px;
}

.pyramid-layout {
    position: relative;
    width: 100%;
    /* 7 rows * (card height * overlap) + last card height */
    height: calc(var(--card-height) + (6 * (var(--card-height) * 0.45)));
    margin-bottom: 40px;
    max-width: 1000px;
}

.pyramid-layout .card {
    position: absolute; /* Essential for correct placement in layout */
    transition: all 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
    z-index: 100;
}

.pyramid-bottom-piles {
    display: flex;
    width: 100%;
    justify-content: center;
    gap: 80px;
    align-items: flex-start;
    margin-top: 20px;
}

/* Make stock look like a stack */
#pyramid-stock::after {
    content: '';
    position: absolute;
    top: 4px;
    left: 4px;
    width: 100%;
    height: 100%;
    border: 2px solid var(--line);
    border-radius: var(--card-radius);
    z-index: -1;
    background: var(--card-bg);
}

#pyramid-stock:empty::before {
    content: '↺';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 32px;
    opacity: 0.3;
    color: var(--text-color);
}

.card.is-selected {
    outline: 4px solid var(--glow);
    box-shadow: 0 0 20px var(--glow);
    transform: scale(1.05) translateY(-5px);
    z-index: 1000 !important;
}

/* Specific to Pyramid Card layout */
.pyramid-card {
    /* These will be overridden by inline styles from pyramid.js */
}

@media (max-width: 600px) {
    .pyramid-bottom-piles {
        gap: 40px;
    }
}