#floating-block-container {
    position: fixed;
    left: 30px;
    bottom: 30px;
    width: 60px;
    height: 60px;
    display: block !important;
    perspective: 800px;
    z-index: 999;
    cursor: grab;
    user-select: none;
    touch-action: none;
}

#floating-block-container:focus-visible {
    outline: 2px solid #a5f3fc;
    outline-offset: 8px;
    border-radius: 4px;
}

#floating-block {
    width: 100%;
    height: 100%;
    position: relative;
    transform-style: preserve-3d;
    transform: rotateX(-20deg) rotateY(45deg);
}

#floating-block .face {
    position: absolute;
    inset: 0;
    background: #64e0e0 url('/images/textures/diamond_block.png') center / 100% 100%;
    image-rendering: pixelated;
    box-shadow: inset 0 0 5px rgba(0, 0, 0, .2);
    border: 0;
}

#floating-block .face::before,
#floating-block .face::after {
    display: none;
}

#floating-block .front { transform: rotateY(0deg) translateZ(30px); }
#floating-block .back { transform: rotateY(180deg) translateZ(30px); }
#floating-block .right { transform: rotateY(90deg) translateZ(30px); }
#floating-block .left { transform: rotateY(-90deg) translateZ(30px); }
#floating-block .top { transform: rotateX(90deg) translateZ(30px); }
#floating-block .bottom { transform: rotateX(-90deg) translateZ(30px); }

@media (max-width: 720px) {
    #floating-block-container {
        left: 12px;
        bottom: 18px;
        width: 46px;
        height: 46px;
    }

    #floating-block .front { transform: rotateY(0deg) translateZ(23px); }
    #floating-block .back { transform: rotateY(180deg) translateZ(23px); }
    #floating-block .right { transform: rotateY(90deg) translateZ(23px); }
    #floating-block .left { transform: rotateY(-90deg) translateZ(23px); }
    #floating-block .top { transform: rotateX(90deg) translateZ(23px); }
    #floating-block .bottom { transform: rotateX(-90deg) translateZ(23px); }
}