/* ===========================================
   MARBLE BASE
   Core marble element styles
   =========================================== */

.marble {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    position: absolute;
    opacity: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    font-weight: 700;
    color: #fff;
    text-shadow: none;
    font-family: 'DM Sans', sans-serif;
    transition: bottom 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94), left 0.1s ease;
    z-index: 15; /* Above jar lid (z-index: 10) so marbles are visible when dropping */
}

.marble:hover,
.marble:active,
.marble:focus,
.marble:focus-within,
.marble.selected {
    z-index: 1000; /* Bring interacted marble to front, above all other marbles */
}

.marble.falling {
    transition: bottom 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.marble.bouncing {
    animation: bounce 0.35s ease-out forwards;
}