/* Ball Grid Layout */
.ball-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    gap: 15px;
    padding: 20px;
    justify-content: center; /* centers items when fewer than max */
    max-width: calc(8 * 80px + 6 * 15px); /* 7 items + gaps */
    margin: 0 auto; /* centers the whole grid in its container */
}

.ball-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: transform 0.2s;
}

.ball-container:hover:not([style*="cursor: not-allowed"]) {
    transform: scale(1.1);
}

.ball-number {
    margin-top: 5px;
    font-weight: bold;
    font-size: 14px;
}

/* Billiard Ball Sprite Sheet Styles */
/* Sprite sheet is 4x4 grid: row 1 (1-4), row 2 (5-8), row 3 (9-12), row 4 (13-15, cue) */
.billiard-ball {
    width: 60px;
    height: 60px;
    background-image: url("/static/img/billiards/billiards-vector-5016.jpg");
    background-size: 480% 480%; /* 4x4 grid: 75px per tile */
    background-repeat: no-repeat;
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
    background-position: center;
}

/* Position each ball from the 4x4 sprite sheet grid */
/* Each tile is 75px (300px / 4 columns) */
/* Row 1: balls 1-4 */
.ball-1 { background-position: 0 0; }
.ball-2 { background-position:  33.33% 0; }
.ball-3 { background-position: 66.66% 0; }
.ball-4 { background-position: 100% 0; }

/* Row 2: balls 5-8 */
.ball-5 { background-position: 0 33.33%; }
.ball-6 { background-position: 33.33% 33.33%; }
.ball-7 { background-position: 66.66% 33.33%; }
.ball-8 { background-position: 100% 33.33%; }

/* Row 3: balls 9-12 */
.ball-9 { background-position: 0 66.66%; }
.ball-10 { background-position: 33.33% 66.66%; }
.ball-11 { background-position: 66.66% 66.66%; }
.ball-12 { background-position: 100% 66.66%; }

/* Row 4: balls 13-15, cue ball */
.ball-13 { background-position: 0 100%; }
.ball-14 { background-position: 33.33% 100%; }
.ball-15 { background-position: 66.66% 100%; }
.ball-cue { background-position: 100% 100%; }

.ball-sunk {
    filter: grayscale(100%) brightness(0.5);
}

.sunk-balls {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.sunk-balls .badge {
    font-size: 14px;
}