/* A page off the games hub (the creators: /generate, /generate/advanced) gets
   the games' round back button (shared/game-menu.js #otomateBackBtn) in a bar
   at its top, in place of the old site sidebar and its Menu button: the hub's
   profile menu and Shop cover what that sidebar listed. oto-page-back.js. */
html.oto-page-back .oto-app-sidebar,
html.oto-page-back .oto-app-drawer-toggle,
html.oto-page-back .oto-app-drawer-backdrop,
html.oto-page-back .memories-header {
    display: none !important;
}

html.oto-page-back .oto-app-main {
    margin-left: 0 !important;
    padding-top: 0 !important;
}

.oto-backbar {
    position: relative;
    z-index: 2;   /* (over a page's own backdrop layer: Friends') */
    display: flex;
    align-items: center;
    padding: max(12px, env(safe-area-inset-top)) 0 10px;
}

/* (the apps' hub WebView already sits below the status bar) */
html.oto-hub-app .oto-backbar {
    padding-top: 14px;
}

.oto-back-btn {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    box-sizing: border-box;
    padding: 0;
    border-radius: 50%;
    border: 1.5px solid rgba(255, 255, 255, 0.3);
    background: rgba(10, 18, 28, 0.55);
    color: #fff;
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(0, 6, 14, 0.35);
    transition: transform 120ms ease;
    touch-action: manipulation;
}

.oto-back-btn:active {
    transform: scale(0.9);
}

.oto-back-btn:focus-visible {
    outline: 2px solid #d6a3ef;
    outline-offset: 2px;
}

.oto-back-btn[hidden] {
    display: none;
}