.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: 2rem;
    height: 2rem;
    text-shadow: 0 0 0.25rem rgba(0, 0, 0, 0.5);
    border: 0.15rem solid rgba(var(--priUser), 1);
    border-radius: 50%;
    font-weight: 700;
    font-size: 0.63rem;
    text-transform: uppercase;
    margin: 0.25rem;
    flex-shrink: 0;

    &:hover,
    &:active {
        cursor: pointer;
    }

    &:active {
        font-size: 0.61rem;
        border: 0.18rem solid rgba(var(--priUser), 1);
    }

    &.btn-primary {
        width: 4rem;
        height: 4rem;
        font-size: 0.875rem;
        border-width: 0.21rem;
        color: rgba(var(--quaUser), 1);
        border-color: rgba(var(--quaUser), 1);
        background-color: rgba(var(--quiUser), 1);
        box-shadow:
            0.1rem 0.1rem 0.12rem rgba(var(--quiUser), 0.25),
            0.12rem 0.12rem 0.25rem rgba(0, 0, 0, 0.25),
            0.25rem 0.25rem 0.25rem rgba(var(--quiUser), 0.12)
        ;

        &:hover {
            text-shadow:
                0.2rem 0.2rem 0.2rem rgba(0, 0, 0, 0.25),
                0 0 0.5rem rgba(var(--quaUser), 1)
                ;
            box-shadow:
                0.24rem 0.24rem 0.5rem rgba(0, 0, 0, 0.25),
                0 0 0.5rem rgba(var(--quaUser), 0.22)
            ;
        }

        &:active {
            border-width: 0.25rem;
            text-shadow:
                -0.2rem -0.2rem 0.25rem rgba(0, 0, 0, 0.25),
                0 0 0.24rem rgba(var(--quaUser), 1)
            ;
            box-shadow:
                -0.2rem -0.2rem 0.24rem rgba(var(--quiUser), 0.25),
                -0.2rem -0.2rem 0.24rem rgba(0, 0, 0, 0.25),
                0 0 0.5rem rgba(var(--quaUser), 0.22)
            ;
        }

        @media (orientation: landscape) and (max-width: 1100px) {
            width: 2.75rem !important;
            height: 2.75rem !important;
            font-size: 0.625rem !important;
            border-width: 0.125rem !important;
        }
    }

    &.btn-abandon {
        color: rgba(var(--priBl), 1);
        border-color: rgba(var(--priBl), 1);
        background-color: rgba(var(--terBl), 1);
        box-shadow:
            0.1rem 0.1rem 0.12rem rgba(var(--terBl), 0.25),
            0.12rem 0.12rem 0.25rem rgba(0, 0, 0, 0.25),
            0.25rem 0.25rem 0.25rem rgba(var(--terBl), 0.12)
        ;

        &:hover {
            text-shadow:
                0.1rem 0.1rem 0.1rem rgba(0, 0, 0, 0.25),
                0 0 1rem rgba(var(--priBl), 1)
                ;
            box-shadow:
                0.12rem 0.12rem 0.5rem rgba(0, 0, 0, 0.25),
                0 0 0.5rem rgba(var(--priBl), 0.12)
            ;
        }
        
        &:active {
            border: 0.18rem solid rgba(var(--priBl), 1);
            text-shadow:
                -0.1rem -0.1rem 0.25rem rgba(0, 0, 0, 0.25),
                0 0 0.12rem rgba(var(--priBl), 1)
            ;
            box-shadow:
                -0.1rem -0.1rem 0.12rem rgba(var(--terBl), 0.25),
                -0.1rem -0.1rem 0.12rem rgba(0, 0, 0, 0.25),
                0 0 0.5rem rgba(var(--priBl), 0.12)
            ;
        }
    }

    &.btn-cancel {
        color: rgba(var(--priOr), 1);
        border-color: rgba(var(--priOr), 1);
        background-color: rgba(var(--terOr), 1);
        box-shadow:
            0.1rem 0.1rem 0.12rem rgba(var(--terOr), 0.25),
            0.12rem 0.12rem 0.25rem rgba(0, 0, 0, 0.25),
            0.25rem 0.25rem 0.25rem rgba(var(--terOr), 0.12)
        ;

        &:hover {
            text-shadow:
                0.2rem 0.2rem 0.2rem rgba(0, 0, 0, 0.25),
                0 0 0.5rem rgba(var(--priOr), 1)
                ;
            box-shadow:
                0.24rem 0.24rem 0.5rem rgba(0, 0, 0, 0.25),
                0 0 0.5rem rgba(var(--priOr), 0.12)
            ;
        }
        
        &:active {
            text-shadow:
                -0.1rem -0.1rem 0.5rem rgba(0, 0, 0, 0.25),
                0 0 0.12rem rgba(var(--priOr), 1)
            ;
            box-shadow:
                -0.1rem -0.1rem 0.12rem rgba(var(--terOr), 0.25),
                -0.1rem -0.1rem 0.12rem rgba(0, 0, 0, 0.25),
                0 0 0.5rem rgba(var(--priOr), 0.12)
            ;
        }
    }

    &.btn-caution {
        color: rgba(var(--priYl), 1);
        border-color: rgba(var(--priYl), 1);
        background-color: rgba(var(--terYl), 1);
        box-shadow:
            0.1rem 0.1rem 0.12rem rgba(var(--terYl), 0.25),
            0.12rem 0.12rem 0.25rem rgba(0, 0, 0, 0.25),
            0.25rem 0.25rem 0.25rem rgba(var(--terYl), 0.12)
        ;

        &:hover {
            text-shadow:
                0.1rem 0.1rem 0.1rem rgba(0, 0, 0, 0.25),
                0 0 1rem rgba(var(--priYl), 1)
                ;
            box-shadow:
                0.12rem 0.12rem 0.5rem rgba(0, 0, 0, 0.25),
                0 0 0.5rem rgba(var(--priYl), 0.12)
            ;
        }
        
        &:active {
            border: 0.18rem solid rgba(var(--priYl), 1);
            text-shadow:
                -0.1rem -0.1rem 0.25rem rgba(0, 0, 0, 0.25),
                0 0 0.12rem rgba(var(--priYl), 1)
            ;
            box-shadow:
                -0.1rem -0.1rem 0.12rem rgba(var(--terYl), 0.25),
                -0.1rem -0.1rem 0.12rem rgba(0, 0, 0, 0.25),
                0 0 0.5rem rgba(var(--priYl), 0.12)
            ;
        }
    }
    
    &.btn-confirm {
        color: rgba(var(--priGn), 1);
        border-color: rgba(var(--priGn), 1);
        background-color: rgba(var(--terGn), 1);
        box-shadow:
            0.1rem 0.1rem 0.12rem rgba(var(--terGn), 0.25),
            0.12rem 0.12rem 0.25rem rgba(0, 0, 0, 0.25),
            0.25rem 0.25rem 0.25rem rgba(var(--terGn), 0.12)
        ;

        &:hover {
            text-shadow:
                0.1rem 0.1rem 0.1rem rgba(0, 0, 0, 0.25),
                0 0 1rem rgba(var(--priGn), 1)
                ;
            box-shadow:
                0.12rem 0.12rem 0.5rem rgba(0, 0, 0, 0.25),
                0 0 0.5rem rgba(var(--priGn), 0.12)
            ;
        }
        
        &:active {
            border: 0.18rem solid rgba(var(--priGn), 1);
            text-shadow:
                -0.1rem -0.1rem 0.25rem rgba(0, 0, 0, 0.25),
                0 0 0.12rem rgba(var(--priGn), 1)
            ;
            box-shadow:
                -0.1rem -0.1rem 0.12rem rgba(var(--terGn), 0.25),
                -0.1rem -0.1rem 0.12rem rgba(0, 0, 0, 0.25),
                0 0 0.5rem rgba(var(--priGn), 0.12)
            ;
        }
    }

    &.btn-danger {
        color: rgba(var(--priRd), 1);
        background-color: rgba(var(--terRd), 1);
        border-color: rgba(var(--priRd), 1);
        box-shadow:
            0.1rem 0.1rem 0.12rem rgba(var(--terRd), 0.25),
            0.12rem 0.12rem 0.25rem rgba(0, 0, 0, 0.25),
            0.25rem 0.25rem 0.25rem rgba(var(--terRd), 0.12)
        ;
    
        &:hover {
            text-shadow:
                0.1rem 0.1rem 0.1rem rgba(0, 0, 0, 0.25),
                0 0 1rem rgba(var(--priRd), 1)
                ;
            box-shadow:
                0.12rem 0.12rem 0.5rem rgba(0, 0, 0, 0.25),
                0 0 0.5rem rgba(var(--priRd), 0.12)
            ;
        }
        
        &:active {
            text-shadow:
                -0.1rem -0.1rem 0.25rem rgba(0, 0, 0, 0.25),
                0 0 0.12rem rgba(var(--priRd), 1)
            ;
            box-shadow:
                -0.1rem -0.1rem 0.12rem rgba(var(--terRd), 0.25),
                -0.1rem -0.1rem 0.12rem rgba(0, 0, 0, 0.25),
                0 0 0.5rem rgba(var(--priRd), 0.12)
            ;
        }
    
        &.stop-player {
            width: 4rem;
            height: 4rem;
            font-size: 0.9rem;
            border: 0.2rem solid rgba(var(--priRd), 1);
            box-shadow:
                0.1rem 0.1rem 0.25rem rgba(var(--terRd), 0.5),
                0.25rem 0.25rem 1rem rgba(0, 0, 0, 0.5),
                0.5rem 0.5rem 0.5rem rgba(var(--terRd), 0.25)
            ;

            &:hover {
                text-shadow:
                    0.1rem 0.1rem 0.1rem rgba(0, 0, 0, 0.5),
                    0 0 1rem rgba(var(--priRd), 1)
                    ;
                box-shadow:
                    0.25rem 0.25rem 1rem rgba(0, 0, 0, 0.5),
                    0 0 1rem rgba(var(--priRd), 0.25)
                ;
            }
            
            &:active {
                font-size: 0.88rem;
                border: 0.25rem solid rgba(var(--priRd), 1);
                text-shadow:
                    -0.1rem -0.1rem 0.5rem rgba(0, 0, 0, 0.5),
                    0 0 0.25rem rgba(var(--priRd), 1)
                    ;
                box-shadow:
                    -0.1rem -0.1rem 0.25rem rgba(var(--terRd), 0.5),
                    -0.1rem -0.1rem 0.25rem rgba(0, 0, 0, 0.5),
                    0 0 1rem rgba(var(--priRd), 0.25)
                ;
            }
        }
    }

    @media (orientation: landscape) and (min-width: 1800px) {
        width: 2.4rem;        // 2rem × 1.2
        height: 2.4rem;
        font-size: 0.75rem;   // 0.63rem × 1.2
    }

    &.btn-disabled {
        cursor: default !important;
        font-size: 1.2rem;
        padding-bottom: 0.1rem;
        color: rgba(var(--secUser), 0.25);
        background-color: rgba(var(--priUser), 1);
        border-color: rgba(var(--secUser), 0.25);
        box-shadow:
            0.1rem 0.1rem 0.12rem rgba(var(--priUser), 0.5),
            0.12rem 0.12rem 0.25rem rgba(0, 0, 0, 0.25),
            0.25rem 0.25rem 0.25rem rgba(var(--secUser), 0.12)
            ;

        &:hover {
            text-shadow:
                0.1rem 0.1rem 0.1rem rgba(0, 0, 0, 0.25),
                0 0 1rem rgba(var(--priUser), 1)
                ;
            box-shadow:
                0.12rem 0.12rem 0.5rem rgba(0, 0, 0, 0.25),
                0 0 0.5rem rgba(var(--priUser), 0.12)
                ;
        }
        
        &:active {
            text-shadow:
                -0.1rem -0.1rem 0.25rem rgba(0, 0, 0, 0.25),
                0 0 0.12rem rgba(var(--priUser), 1)
                ;
            box-shadow:
                -0.1rem -0.1rem 0.12rem rgba(var(--priUser), 0.75),
                -0.1rem -0.1rem 0.12rem rgba(0, 0, 0, 0.25),
                0 0 0.5rem rgba(var(--secUser), 0.12)
                ;
        }
    }
}