/* The admin page's puzzle previews (moved from Views/Admin/Index.cshtml's inline style). */

.grid-container {
    aspect-ratio: 1 / 1;
    width: 80vmin;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: auto auto auto;
}

.grid-item {
    display: flex;
    justify-content: center;
    align-items: center;
}

.card-grid .puzzle-position-card-grid {
    display: grid;
    grid-template-columns: repeat(2, auto);
}

.puzzle-cell {
    text-align: center;
}

.trick-center {
    position: relative;
    width: 100%;
    height: 100%;
}

.trick-card {
    position: absolute;
}

    /* Positioning */
    .trick-card.top {
        top: 0;
        left: 50%;
        transform: translateX(-50%);
    }

    .trick-card.right {
        top: 50%;
        right: 0;
        transform: translateY(-50%);
    }

    .trick-card.bottom {
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
    }

    .trick-card.left {
        top: 50%;
        left: 0;
        transform: translateY(-50%);
    }

.bid {
    white-space: nowrap;
    padding: 2px;
    border: 2px solid green;
}

.card-stack {
    display: flex;
    flex-direction: column;
    align-items: center;
}