.table {
    background: cornflowerblue;
    width: 400px;
    height: 800px;

    border-radius: 42px;
    border: 40px solid tan;             
    box-shadow: 
        0 0 7px 7px rgba(0, 30, 35, 0.5),
        0 0 10px 10px rgba(0, 0, 0, 0.7) inset;

    position: relative;

    & > div.pocket {
        position: absolute;
        background: #444;
        border-radius: 40px;
        box-shadow: 
            0 0 3px 3px black inset,
            0 0 6px 6px #222 inset;

        height: 40px;
        width: 40px;
        z-index: 1;

        &.head         { margin-top:  -20px; }
        &.center       { margin-top:  380px; }
        &.foot         { margin-top:  780px; }
        &.left         { margin-left: -20px; }
        &.right        { margin-left: 380px; }
        &.center.left  { margin-left: -30px; }
        &.center.right { margin-left: 390px; }
    }

    & > div.diamond {
        position: absolute;
        background: darkgoldenrod;
        border: 1px solid dimgrey;
        box-shadow: -1px -1px 4px var(--box-shadow);
        height: 10px;
        width: 10px;
        transform: rotate(45deg);

        &.row0 { margin-top:  -25px; }
        &.row1 { margin-top:   95px; }
        &.row2 { margin-top:  195px; }
        &.row3 { margin-top:  295px; }
        &.row4 { margin-top:  395px; }
        &.row5 { margin-top:  495px; }
        &.row6 { margin-top:  595px; }
        &.row7 { margin-top:  695px; }
        &.row8 { margin-top:  815px; }
        &.col0 { margin-left: -25px; }
        &.col1 { margin-left:  95px; }
        &.col2 { margin-left: 195px; }
        &.col3 { margin-left: 295px; }
        &.col4 { margin-left: 415px; }
    }

    & > img {
        display: none;
        height: 20px;
        width: 20px;
    }

    & #Canvas {
        position: absolute;
        margin-left: -200px;
        box-shadow: 
            0 0 10px 10px rgba(0, 148, 235, 0.5) inset,
            0 0 8px 8px rgba(220, 200, 170),
            0 0 4px 4px rgba(230, 220, 200);
    }
}

.table.blured::before {
    position: absolute;
    content: '';
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 3;
    backdrop-filter: blur(5px);
}

.wrapper {
    & > .table.Carom .pocket {
        display: none;
    }

    /* & > .table.Carom  .diamond, */
    & > .table.Snooker.diamond {
        display: none;
    }
}

@media (min-width: 105rem) {

    nav:has(#tableRotationAllowed:checked) + article .table {
        transform: rotate(90deg);
        margin-left: 12.5em;
        margin-top: -12.5em;
        margin-bottom: -12.5em;
    }

}