/* ============================================
   CONTROL STRIP - Mac System 7 style dark grey squares
============================================ */

.control-strip {
    position: fixed;
    bottom: 8px;
    left: 8px;
    display: flex;
    align-items: center;
    z-index: 9999;
}

.control-strip__btn {
    width: 36px;
    height: 36px;
    background: #bbbbbb;
    /* Thick black outer border */
    border: 2px solid var(--pure-black);
    /* 3D beveled effect: light top/left, dark bottom/right */
    box-shadow:
        inset 2px 2px 0 0 #ffffff,
        inset -2px -2px 0 0 #666666;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    cursor: pointer;
    color: var(--pure-black);
    /* Smooth button press animation */
    transition: transform 0.08s ease-out, box-shadow 0.08s ease-out;
}

/* Pressed state - invert the bevel + slight push down */
.control-strip__btn:active {
    box-shadow:
        inset -2px -2px 0 0 #ffffff,
        inset 2px 2px 0 0 #666666;
    transform: translateY(1px);
}