/* Mobile fixes for the PlayCanvas game's own panels (planet management view).
   Scoped to the full-view (which uniquely contains #fv-sections) so the
   85vw side panel is untouched. :has() is supported on iOS 15.4+ / modern Chrome. */
@media (max-width: 700px) {
    /* let the world title wrap instead of overflowing */
    .cx-frame:has(#fv-sections) #fv-title { white-space: normal !important; font-size: 21px !important; }
    /* stack the two columns (districts grid + about) vertically */
    .cx-frame:has(#fv-sections) > div:nth-child(2) {
        flex-direction: column !important;
        gap: 14px !important;
        padding: 14px 16px 20px !important;
    }
    .cx-frame:has(#fv-sections) > div:nth-child(2) > div {
        min-width: 0 !important;
        max-width: none !important;
    }
    /* district cards go single-column so they never overflow */
    .cx-frame:has(#fv-sections) #fv-sections { grid-template-columns: 1fr !important; }
    /* trim the header padding */
    .cx-frame:has(#fv-sections) > div:first-child { padding: 14px 16px 0 !important; }
    /* cap the about box so the page stays scannable */
    .cx-frame:has(#fv-sections) #fv-about { max-height: 38vh; }
}