body .back-button, body .profile-back {
    position: fixed;
    top: calc(10px + env(safe-area-inset-top));
    left: calc(10px + env(safe-area-inset-left));
    z-index: 40;
    width: auto;
    min-height: 42px;
    margin: 0;
    padding: 10px 14px;
    border: 1px solid var(--yap-border, #494268);
    border-radius: 10px;
    background: var(--yap-surface, #24263e);
    color: var(--yap-muted, #c2c6df);
    font: inherit;
    font-size: .85rem;
    font-weight: 900;
    text-decoration: none;
    cursor: pointer;
}
body .back-button:hover, body .profile-back:hover { color: white; border-color: var(--yap-primary, #34d399); }
body .join-page .back-button { margin-top: 0; }
body .back-button:focus-visible, body .profile-back:focus-visible { outline: 2px solid var(--yap-primary, #34d399); outline-offset: 3px; }
body:has(.back-button, .profile-back) .sound-control { left: calc(110px + env(safe-area-inset-left)); }
body:has(.back-button, .profile-back) > main { padding-top: max(70px, env(safe-area-inset-top)); }