.shelf {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin: 30px auto;
    padding: 20px;
    background: #8b5a2b;
    border-radius: 12px;
    width: fit-content;
    min-height: 80px;
}

.slot {
    width: 8rem;
    height: 8rem;
    border: 3px dashed white;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #374151;
}

.slot.filled {
    border-style: solid;
}

#message {
    font-size: 24px;
    font-weight: bold;
    margin-top: 20px;
}

/* 
button {
    margin-top: 20px;
    padding: 10px 20px;
    font-size: 16px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
}
 */

.unlocked {
    color: #22c55e;
}

.locked {
    color: #ef4444;
}

@import url('https://fonts.googleapis.com/css2?family=Noto+Serif:wght@600&display=swap');

.billiard-ball {
    --_color-yellow: hsl(60 100% 50%);
    --_color-blue: hsl(240 100% 50%);
    --_color-red: hsl(0 100% 50%);
    --_color-pink: hsl(325 100% 50%);
    --_color-purple: hsl(300 100% 25%);
    --_color-orange: hsl(25 100% 50%);
    --_color-green: hsl(125 100% 25%);
    --_color-brown: hsl(10 100% 25%);
    --_color-black: hsl(0 0% 5%);
    --_color-white: hsl(0 0% 95%);
    --_grad-light: radial-gradient(100% 100% at 70% 15%, hsl(0 0% 100%/.5), hsl(0 0% 100%/.2) 10%, hsl(0 0% 0%/.6) 60%, hsl(0 0% 0%/.9));

    width: 6rem;
    aspect-ratio: 1/1;
    border-radius: 50%;
    box-shadow: -1rem 1rem 1rem hsl(0 0% 0% / .5);
    background-color: var(--_color-white);
    background-image: var(--_grad-light);
    cursor: grab;
}


.billiard-ball:active {
    cursor: grabbing;
}

.billiard-ball[data-pool] {
    --_c1: 20%;
    --_s1: calc(var(--_stripe, 0) * 22.5%);
    --_s2: calc(100% - var(--_stripe, 0) * 22.5%);
    --_grad-cirle: radial-gradient(100% 100%, var(--_color-white) var(--_c1), #0000 calc(var(--_c1) + 1px));
    --_grad-stripe: linear-gradient(180deg, #0000 calc(var(--_s1) - 1px), var(--_color, #0000) var(--_s1) var(--_s2), #0000 calc(var(--_s2) + 1px));

    container-type: inline-size;
    display: grid;
    place-items: center;
    background-color: var(--_color-white);
    background-image: var(--_grad-light), var(--_grad-cirle), var(--_grad-stripe);
}

.billiard-ball[data-pool]::after {
    content: var(--_nr, "");
    color: var(--_color-black);
    font-family: 'Noto Serif', serif;
    font-size: 25cqi;
    text-decoration: var(--_line, none);
}

.billiard-ball[data-pool="0"] { --_nr: ""; --_color: var(--_color-white); }
.billiard-ball[data-pool="1"] { --_nr: "1"; --_color: var(--_color-yellow); }
.billiard-ball[data-pool="2"] { --_nr: "2"; --_color: var(--_color-blue); }
.billiard-ball[data-pool="3"] { --_nr: "3"; --_color: var(--_color-red); }
.billiard-ball[data-pool="4"] { --_nr: "4"; --_color: var(--_color-purple); }
.billiard-ball[data-pool="5"] { --_nr: "5"; --_color: var(--_color-orange); }
.billiard-ball[data-pool="6"] { --_nr: "6"; --_color: var(--_color-green); --_line: underline; }
.billiard-ball[data-pool="7"] { --_nr: "7"; --_color: var(--_color-brown); }
.billiard-ball[data-pool="8"] { --_nr: "8"; --_color: var(--_color-black); }
.billiard-ball[data-pool="9"] { --_nr: "9"; --_color: var(--_color-yellow); --_stripe: 1; --_line: underline; }
.billiard-ball[data-pool="10"] { --_nr: "10"; --_color: var(--_color-blue); --_stripe: 1; }
.billiard-ball[data-pool="11"] { --_nr: "11"; --_color: var(--_color-red); --_stripe: 1; }
.billiard-ball[data-pool="12"] { --_nr: "12"; --_color: var(--_color-purple); --_stripe: 1; }
.billiard-ball[data-pool="13"] { --_nr: "13"; --_color: var(--_color-orange); --_stripe: 1; }
.billiard-ball[data-pool="14"] { --_nr: "14"; --_color: var(--_color-green); --_stripe: 1; }
.billiard-ball[data-pool="15"] { --_nr: "15"; --_color: var(--_color-brown); --_stripe: 1; }

.billiard-balls {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
}

.billiard-balls h2 {
    width: 100%;
}