#recentpuzzles .dropdown-menu {
            min-width: 400px;
        }

        @media screen and (max-width: 500px) /* Breakpoint: MOBILE */ {
            /* Bootstrap 5: #recentpuzzles sits left of the user button, so dropdown-menu-end
               aligns to its right edge rather than the viewport edge, causing the menu to
               overflow left. Setting position:static removes it as the positioning context
               so the menu positions relative to the outer #logindiv instead. */
            #recentpuzzles {
                position: static;
            }
            #recentpuzzles .dropdown-menu {
                min-width: 80vw;
            }
            #recentpuzzles .dropdown-item {
                white-space: normal; /* Bootstrap 5 sets nowrap by default; allow wrapping on mobile. */
            }
        }