html,
body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background: #000;
    overscroll-behavior: none;
    touch-action: none;
}

#playables-context-button {
    position: fixed;
    z-index: 1000;
    top: max(12px, env(safe-area-inset-top));
    right: max(12px, env(safe-area-inset-right));
    min-width: 88px;
    min-height: 52px;
    box-sizing: border-box;
    padding: 0 17px;
    border: 2px solid rgb(255 255 255 / 75%);
    border-radius: 12px;
    background: rgb(8 34 62 / 90%);
    box-shadow: 0 3px 12px rgb(0 0 0 / 55%);
    color: #fff;
    font: 700 16px/1 system-ui, sans-serif;
    letter-spacing: 0.02em;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

#playables-context-button:active {
    transform: translateY(1px);
    background: rgb(18 79 125 / 96%);
}

#playables-context-button:focus-visible {
    outline: 3px solid #ffe36e;
    outline-offset: 3px;
}

#playables-context-button[hidden] {
    display: none;
}

@media (pointer: fine) and (min-width: 900px) {
    #playables-context-button {
        min-height: 48px;
        opacity: 0.82;
    }
}